• BLOCK SETUP GUIDES • SETUP GUIDE

How to Add a Free Shipping Progress Bar to Shopify Checkout

By Rivio Support Team
4 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

Use Free shipping progress bar on its supported pages to help customers with the task described below. Configure it in Rivio, save its activation state, and then add the corresponding block in Shopify’s checkout and accounts editor.

Supported pages and requirements

Supported pages: Checkout. Checkout placement requires Shopify Plus. Your Rivio app plan must also include the feature. Check the page labels on the current block card before setup.

When to use this block

  • Show progress toward an actual free-shipping offer.

Configuration settings

Setting How to configure it
Threshold Enter the goal and record the currency and amount basis.
Below-threshold message Explain the remaining amount using the supported text controls.
Reached-threshold message Make a promise only when the corresponding shipping benefit applies.
Eligibility Match rate, destination, and amount eligibility to the real shipping discount.

Use the controls available in your current configuration screen. Save a clearly named configuration, then confirm that Shopify’s editor uses that same configuration.

Screenshot to add: The Free shipping progress bar configuration form with its content and appearance settings visible.

Rivio blocks add content or input fields to supported checkout and account pages. Configure the content in Rivio and place the block in Shopify’s editor.

Worked example: Show progress toward a $50 shipping offer

Example setup: USD store with a separately configured matching free-shipping benefit.

Step-by-step instructions

  1. Open UI extension blocks and find Free shipping progress bar. Check the supported pages on its card.

  2. Choose Set up or Manage and create a configuration with a clear internal name.

  3. Set the supported threshold to 50 and confirm the form’s currency and amount basis.

  4. Configure the supported below-threshold text and reached-threshold message.

  5. Match the visual promise to the actual shipping discount or free-rate eligibility, including country and rate restrictions.

  6. Review how the preview represents progress below and above the threshold.

  7. Review the preview and any display conditions. For the first demo, leave optional conditions empty so you can isolate placement.

  8. Save as Active. Open the Checkout and Accounts Editor, select the intended configuration and supported target page, and add the matching Rivio block in a supported location.

  9. Select the saved configuration if prompted and save Shopify’s editor. Test the actual customer page on desktop and a phone.

Verify the result

Test case Expected result or verification
$40 eligible amount The bar shows progress toward $50; if a remaining-amount message is supported, the example remainder is $10.
$50 eligible amount The threshold-reached message displays according to the bar’s operator.
Actual shipping selection Verify the separate benefit really makes the intended eligible rate free.
Cart reduced below threshold The bar and shipping eligibility update consistently.

Important: Do not display an unconditional free-shipping promise when the real benefit excludes that country or delivery method. Checkout-step UI blocks require Shopify Plus. For another surface, use only the pages supported by this block’s card.

If the result is different

Check What it means / what to do
Block unavailable in checkout Confirm Shopify Plus and the supported target location.
Visible but behavior differs Check the individual saved block options and actual checkout result, including submitted data or fees.
Progress bar says free shipping but a charge remains Configure and verify the separate actual shipping benefit with matching eligibility.

Add and verify each supported placement

  1. Open Settings → Checkout in Shopify admin and customise the intended configuration.
  2. Select the exact supported page: Checkout. For Profile, use the customer-account page selector.
  3. Add the matching Rivio app block in a supported location and select the saved configuration if prompted.
  4. Save the editor. Add and save each other intended page separately; one placement does not establish every placement.
  5. Preview desktop and mobile, then test the actual checkout, completed order, or signed-in account appropriate to that page.

Screenshot to add: Shopify’s editor showing the Free shipping progress bar block on the selected supported page, followed by the final customer view.

Limitations

  • The bar is a visual indicator and does not create a free shipping rate or discount.
  • Do not assume every currency uses an automatically converted equivalent threshold.

Display conditions depend on the page. Customer tags require logged-in customer context. Selected shipping method is unavailable on Order status. On Profile, only Customer, Language, Market, and Time on page conditions are evaluated; cart and order conditions are ignored.

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.