• BLOCK SETUP GUIDES • SETUP GUIDE

How to Change Colors 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: Change colors without losing readability

Example setup: Shopify Plus; white background, dark navy text, and a contrasting action color.

Step-by-step instructions

  1. Open Checkout branding and select the intended configuration.

  2. Open Colors and review brand/accent/decorative and status color settings offered by the module.

  3. Set the main color scheme for the primary checkout area, then separately inspect the order-summary scheme.

  4. Use distinct readable text/background combinations. Keep warning/error status content identifiable.

  5. Save and inspect an actual checkout, including selected buttons, muted text, and an error state.

  6. Repeat at mobile width and check every area using the affected scheme.

Verify the result

Test case Expected result or verification
Main checkout Text and controls remain readable in the new palette.
Order summary Its separately configured scheme is checked.
Validation error Error text and background remain clearly distinguishable.

Important: A decorative brand color may be unsuitable for small text; review the rendered result rather than the swatch alone.

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.