• BLOCK SETUP GUIDES • SETUP GUIDE

How to Change Fonts & Typography 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: Set readable typography for real checkout content

Example setup: Shopify Plus and products with short and long names.

Step-by-step instructions

  1. Open Checkout branding and select the intended configuration.

  2. Open Typography and choose a font from the supported list.

  3. Review base size and scale ratio; begin with readable values instead of shrinking content to fit.

  4. Inspect headings, labels, prices, long product names, and a validation message in the preview.

  5. Save and test the actual checkout on desktop and a phone.

  6. Check another supported shopper language if your store uses it, particularly for longer labels.

Verify the result

Test case Expected result or verification
Long product name It remains readable without hiding relevant information.
Phone checkout Inputs and prices are legible.
Different language Longer text still fits and the supported font renders correctly.

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.