• BLOCK SETUP GUIDES • SETUP GUIDE

How to Customize Button & Card Corners on Shopify Checkout

By Rivio Support Team
2 min read

What you will achieve in this guide

Follow the feature-specific setup and testing instructions below. Check the supported pages and plan requirements before activating the feature.

EXPECTED SETUP TIME Varies by feature
COMPATIBILITY See requirements in this guide
TECHNICAL DIFFICULTY Zero Code Required

Rivio’s advanced branding module adjusts checkout colors, corner radius, typography, and supported account/sign-in appearance on Shopify Plus.

How this feature works

Checkout branding follows the selected checkout configuration. Check which configuration is Published before saving because changes to the published configuration affect live checkout. Account and sign-in appearance settings in the Customer accounts section apply shop-wide rather than being isolated by checkout profile.

Before you begin

Use an eligible Shopify Plus store. Open Apps > Rivio Checkout Customizer and check the feature’s listed supported page. For a visual feature, configure it in Rivio and save its matching editor placement.

Worked example: Use consistent rounded controls

Example setup: Shopify Plus; a checkout with buttons, input fields, and cards.

Step-by-step instructions

  1. Open Checkout branding and select the intended configuration.

  2. Open Corner radius and review the small, base, and large values exposed by Rivio.

  3. Adjust one radius level at a time and inspect which controls use it.

  4. Keep controls recognizable and avoid values that clip labels or content.

  5. Save and inspect buttons, inputs, and cards in an actual checkout.

  6. Repeat on a phone and compare with the account-card settings separately if you also style accounts.

Verify the result

Test case Expected result or verification
Affected checkout controls Corners follow their configured radius level.
Long button/input labels No clipping or hidden text.
Account cards Inspect account settings separately; do not assume every surface shares the same controls.

If the result is different

Check What it means / what to do
Changes not visible Check the saved value and the checkout configuration the shopper actually uses.
Wrong area changed Review main/order-summary schemes and checkout versus account/sign-in settings separately.
Text is difficult to read Test the affected controls, long labels, and error states on desktop and a phone before saving further changes.

Need help?

Email support@rivioapps.com with your store domain, feature name, target page, the relevant settings, and a screenshot of the actual result. Include the test cart, customer, or order details needed to reproduce the issue.

Screenshot reference

Screenshot to add: The saved settings described in this guide, with its selected conditions or scope visible.

Screenshot to add: The worked example’s actual customer result or saved Shopify record, including the relevant test inputs.