The Checkout Extensions Progress Bar widget offers merchants the ability to display a progress bar in the checkout process to track customer progress toward free shipping or other rewards. The widget allows you to choose between a Shipping Progress Bar or mirror your existing Smart Cart Tiered Progress Bar. Below is a detailed guide on how to use and configure this feature.
Available Progress Bar Options
Shipping Progress Bar
This option is ideal for merchants who want to encourage customers to spend more to qualify for free shipping. It allows you to create a shipping progress bar with one tier.
The shipping progress bar can be customized based on the unlock price, which is the amount the customer needs to spend to qualify for free shipping.
Smart Cart Tiered Progress Bar
If you're using Smart Cart with a Tiered Progress Bar, the same progress bar will be carried over to your checkout when you select the Smart Cart option. This progress bar includes multiple tiers and is dynamic based on the cart's content.
Important Notes
You can only have one progress bar widget in your checkout.
This is a Shopify Plus only feature (Shopify checkout editor access required).
If a Smart Cart Tiered Progress Bar is already live with a shipping tier set, the Shipping Progress Bar option will not be available.
Free Shipping tier is not an automatic trigger. It serves as a reference point for merchants to set up free shipping in their systems. You must configure your shipping rates in Shopify.
Video Instructions
Instructions for Setting Up the Checkout Extensions | Shipping / Tiered Progress Bar
Step 1: Create Your Widget
Click on 'Checkout Extensions'
Navigate to the Checkout Extensions section in your admin panel.Select 'Get Started'
Click on Get Started to begin the process of creating your new widget.Choose 'Checkout' as the Location for Your Widget
Note: This is where you'll be adding the progress bar widget.Select 'Progress Bar' as Your Widget Option
Choose Progress Bar as the widget type from the available options.Click 'Create Widget'
After selecting your widget, click Create Widget to generate your new progress bar widget.
Step 2: Customize Your Progress Bar Settings
Now that your widget is created, you’ll need to customize it. Depending on whether you’re creating a Shipping Progress Bar or a Smart Cart Tiered Progress Bar, here’s what you can do:
For Shipping Progress Bar:
Set your Unlock Price (the amount customers need to spend to unlock free shipping).
Configure the Free Shipping Options, such as free shipping for all products, only subscription products, or enable presentment currencies.
Set the Limit Countries toggle to limit the bar to specific countries if needed.
Edit labels for Amount Remaining to Free Shipping and Amount Reached for Free Shipping.
For Smart Cart Tiered Progress Bar:
Choose the Smart Cart Tiered Progress Bar option and it will automatically pull in settings from your live Smart Cart setup.
No additional customization is required unless you want to make changes in your Smart Cart admin.
Activate the Widget
Toggle the widget switch to On to activate it and make it live on your checkout.Save Your Settings
Be sure to save all the changes you’ve made to ensure the widget functions as intended.Copy the Widget ID
You’ll need the Widget ID to complete the next step. Copy it from the widget settings page.
Step 3: Add the Widget to Your Shopify Checkout
Go to the Shopify Checkout Editor
Open the Shopify Checkout Editor to customize the checkout experience.Click 'Add App Block'
In the checkout editor, click Add App Block in the section where you want the progress bar to appear.Choose 'Rebuy Smart Component' from the Options
From the available app block options, select Rebuy Smart Component.Paste the Widget ID
Paste the Widget ID you copied earlier into the appropriate field.Set "Hide This Extension" to 'NO'
Ensure the Hide This Extension setting is set to NO so the progress bar is visible in checkout.Save Your Work in the Shopify Checkout Editor
Once you've pasted the Widget ID and configured the settings, click Save to apply your changes.
Shipping Progress Bar Settings
When selecting the Shipping Progress Bar, you'll have several customization options:
Limit Countries
Toggle this setting to limit the progress bar's visibility to specific countries.
Unlock Price
Set the unlock price for free shipping. This is the amount customers need to spend to unlock free shipping.
Dynamic Preview: Changes as you adjust the unlock price, and the preview of the progress bar Amount Remaining to Free Shipping label updates in real-time.
Free Shipping Options
Free Shipping on All Products: Enable free shipping with no minimum order.
Free Shipping on Subscription Products: Allow free shipping on subscription-based products only.
Enable Presentment Currencies: If enabled, the progress bar will adjust to display prices in the customer's local currency.
Configure Labels
You can adjust the text displayed under the progress bar:
Amount Remaining to Free Shipping
Amount Reached for Free Shipping
Smart Cart Tiered Progress Bar Settings (In Checkout Editor)
If you choose to display the Smart Cart Tiered Progress Bar you will need to manage the settings for that bar within the Smart Cart settings. Please refer to these instructions to set up and manage your tier progress bar.
Edit Cart
A button in the settings will allow you to quickly navigate to the Smart Cart Admin for further customizations.
Grayed-Out Option for Non-Smart Cart Users
If you don't have access to Smart Cart, the Smart Cart Tiered Progress Bar option will be grayed out, with a message saying: “To access this option, you will need access to the Cart & Merchandising package.”
Clicking this message will take you to the Cart & Merchandising package admin page to purchase the required access.
Tiered Progress Checkout Previewer
This previewer allows you to view how the Smart Cart Tiered Progress Bar will appear in the checkout.
Static Image: If no unlock price is set to 0, only the Amount Remaining to Free Shipping text will be dynamic.
Dynamic Preview: Preview changes as you adjust the unlock price, and progress bar's first tier's Amount Remaining to Free Shipping label updates in real-time based on Smart Cart TPB settings
If there is no live Smart Cart with a Tiered Progress Bar, you will see a warning in the previewer: “No preview available. You don’t seem to have a live Smart Cart with a Tiered Progress Bar. Please set one up to continue. Go to Smart Cart.”
General Settings and Limitations
Placement in Checkout
The Progress Bar widget can be placed anywhere in the checkout that an app block can be placed, similar to other widgets, using the Shopify Checkout Editor.
Free Shipping Discount
You must set up a free shipping discount in your Shopify admin.
Extensions cannot create or delete discount functions in Shopify directly; it only captures line-item changes from active functions, such as discounts set in Smart Cart's Tiered Progress Bar.
Smart Cart TPB with Scheduled Dates
If a Smart Cart with a scheduled live Tiered Progress Bar is active, the progress bar will only show in the checkout previewer during the live date range.
Smart Cart A/B Test Limitation
The Checkout Progress Bar widget is only available in checkout if a live Smart Cart is active. If a Smart Cart A/B test is running, the Checkout Progress Bar will not load, as the A/B test disables all Smart Cart configurations. Currently, it is not possible to A/B test multiple progress bars in checkout while a Smart Cart A/B test is active, as only one Smart Cart configuration can be live at a time.
Variants for Free Product/Gift
If your Smart Cart has free product/gift variants, a modal will appear onsite with selectors for the variant(s) based on the merchant's theme colors. The variants change when selected.
If multiple variants are available, customers can choose the one they want to add to the cart.
Progress Bars May Display Differently in Smart Cart vs. Checkout
If you're using the Limit Countries setting in Custom Progress Bars (TPBs), there’s an important difference in how progress bars appear between the Smart Cart (SC) and the Checkout Extension (CE):
In Smart Cart, the progress bar visibility is based on the customer’s IP address. This means it reflects the country they're browsing from.
In Checkout, the progress bar visibility is based on the Shopify market, which is determined by the shipping address the customer enters—not their IP.
Why this happens:
At checkout, we don’t have access to a customer’s IP address, so we rely on Shopify’s market system instead. Since the market changes based on the shipping address, this creates a mismatch in how visibility is determined between Smart Cart and Checkout.
Example:
A customer located in Canada browsing your site will not see the progress bar in Smart Cart if it's set to show only for US users.
However, if they enter a US shipping address at checkout, the progress bar will appear there because the Shopify market is now set to the US.
Handling Specific Cases
If You Lose Access to Smart Cart
If you lose access to the Cart & Merchandising package, and you had a shipping progress bar set up, the progress bar will no longer appear in checkout. You’ll need to revisit the widget settings and re-select the Shipping Progress Bar option, then save the changes.
Custom Template and Code Limitations
Custom template, CSS, or JavaScript code modifications made to the Smart Cart Tiered Progress Bar cannot be transferred to the Extensions Progress Bar.
Any customizations or styles made in Smart Cart will not carry over to the Extensions Progress Bar.
Single Progress Bar Limit
You can only have one progress bar widget active in your checkout, and it can be either the Shipping Progress Bar or the Smart Cart Tiered Progress Bar.
Troubleshooting
Smart Cart TPB Not Displaying
If the Smart Cart Tiered Progress Bar doesn’t display in the checkout previewer, ensure that the Smart Cart is live and configured correctly.
Previewer Not Showing
The previewer will show a “No preview available” message if there is no active Smart Cart Tiered Progress Bar. Ensure the Smart Cart is live and the proper tiered progress bar is selected.
Summary of Limitations
Available only for Plus merchants.
Only Smart Cart v2 Tiered Progress Bars can be used.
One progress bar widget is allowed per checkout.
Customizations to the Smart Cart progress bar (CSS, JS, templates) cannot be applied to the Extensions Progress Bar.
The Shipping Progress Bar is not available if a Smart Cart Tiered Progress Bar is live with a shipping tier set.
Free Shipping Tier is not an automatic trigger. It serves as a reference point for merchants to set up free shipping in their systems. You must configure your shipping rates in Shopify.
FAQs
How do I create a progress bar in Checkout Extensions?
To create a progress bar, go to Extensions in your admin panel, click New, and select the Progress Bar type. From there, you can choose between a Shipping Progress Bar or a Smart Cart Tiered Progress Bar and set it up as desired.
Can I have multiple progress bars in my checkout?
No, only one progress bar widget is allowed in checkout at a time. You can choose either the Shipping Progress Bar or the Smart Cart Tiered Progress Bar but not both simultaneously.
What’s the difference between the Shipping Progress Bar and the Smart Cart Tiered Progress Bar?
The Shipping Progress Bar focuses solely on tracking progress toward free shipping with a single tier.
The Smart Cart Tiered Progress Bar shows multiple tiers based on the products in the cart, and it’s carried over from the Smart Cart setup you’ve already configured. It’s ideal if you want to display multi-tiered goals.
How do I set up free shipping with the Shipping Progress Bar?
To enable free shipping, you’ll need to set the Unlock Price (the amount customers need to spend to qualify for free shipping) in the Shipping Progress Bar settings. Then, make sure you’ve configured your shipping rates in Shopify as the free shipping tier serves as a reference point, not an automatic trigger.
Can I use the Smart Cart Tiered Progress Bar if I don’t have Smart Cart?
No, you need to have the Cart & Merchandising package to access the Smart Cart Tiered Progress Bar. If you don’t have access, the option will be grayed out, and you’ll be directed to the Cart & Merchandising admin page to purchase the required package.
Can I customize the look of the progress bar?
Yes, you can customize the text labels, such as Amount Remaining to Free Shipping and Amount Reached for Free Shipping. However, any custom templates, CSS, or JS applied in Smart Cart will not carry over to the Extensions Progress Bar.
Can I limit which countries see the progress bar?
Yes, you can enable the Limit Countries toggle in the Shipping Progress Bar settings to restrict the visibility of the progress bar to specific countries.
Does the progress bar update in real-time during checkout?
Yes, as customers add products to their cart, the progress bar will update in real-time, reflecting the amount remaining to reach free shipping or any other configured goal.
What happens if my Smart Cart Tiered Progress Bar isn’t showing in the checkout preview?
If the Smart Cart Tiered Progress Bar isn’t showing, ensure that your Smart Cart is live with the Tiered Progress Bar correctly set up. If there’s no live Smart Cart, the preview will display a message prompting you to set up the bar.
Can I see a preview of the progress bar before going live?
Yes, both the Shipping Progress Bar and Smart Cart Tiered Progress Bar have previewers where you can see how the progress bar will appear based on your settings.
Why does the progress bar show at checkout but not in Smart Cart?
Smart Cart uses your IP address to determine your country, while Checkout uses your shipping address to determine your country via Shopify Markets. This can lead to different visibility results for the progress bar.
Can I use the Checkout Progress Bar if I have a Smart Cart A/B test running?
No, the Checkout Progress Bar will not load if a Smart Cart A/B test is active. The A/B test disables all Smart Cart configurations, which prevents the progress bar from appearing in the checkout.
Is it possible to test two different progress bars while running a Smart Cart A/B test?
No, it is currently not possible to A/B test two progress bars in checkout when a Smart Cart A/B test is active. The Checkout Progress Bar widget can only function with one live Smart Cart configuration at a time.