Progress Bar

The Progress Bar enhances the checkout experience by showing customers the steps involved in completing their order.

This extension can only work with Three-pages checkout type. If you're using One-page checkout type, this bar will disappear on your storefront.

1. Template layout

Currently, we support 4 templates. You can choose one of them and keep editing with the following steps.

2. Visibility

1. Hide "Cart" step: Check the box if you want to hide the "Cart" step from the progress bar.
2. Step label position: Change the position of icon label.
1. Under the progress bar (Default).
2. Above the progress bar.
3. Bar color: Apply the color to the active step and progressive bar.
   
4. Inactive bar color: Apply the color to the inactive step and bar.
   

3. Custom Design

If you use the Template 4, this option will be displayed. Please check the box Enable custom design option to personalize the checkout steps, and then you can upload the icon image to show it.

1. Active state design: Upload an image for the current step in the checkout flow.
2. Inactive state design: Upload an image for steps not yet reached.

With this step, we suggest uploading the image with small and basic icon for better performance.

4. Display settings

This settings is an optional. You can choose to hide the Progress bar on:

1. Checkout Draft order
   
2. Online Store
   

5. Step configuration

1. Step label: Rename the step label if desired (e.g., "Shipping" → "Delivery").
2. Enable custom design: Tick on this option to enable to personalize checkout step's shape and color. This option is only available if you use Template 2.
   
1. Success State Design: Upload an image for the completed step (e.g., success icon).
   
2. Active State Design: Add an image for when the "Shipping" step is active.
   
3. Inactive State Design: Add an image for when the "Shipping" step is inactive.

Now you can Save the settings and embed the bar to the Checkout page.

6. Embed the Progress Bar

Please kindly go to the Checkout Editor > Choose Add app block > Select Checkout progress bar.

Then you can hover over the Breadcrumbs and click on the Eye icon to hide the Shopify's breadcrumbs.

If you need further assistance or have any questions, please don't hesitate to let us know in app-chat or send us a ticket. Our team would love to help you.

• Related Articles

• Create/Edit a bar

  Templates There are 10 available templates to choose for your bar. Templates having a star () are available in Premium plan only. A template includes: background image, color, font, size of message, button, countdown. You can change any setting of a ...

• Why is my bar not showing up?

  There are various reasons why the bar is not showing up on a store.  Please read these cases and check the following solutions. The bar is not activated By default, when you successfully create a bar, it is deactivated. (only the first created bar is ...

• What's in Dashboard of Smart Bar

  This is the first page you see whenever you access to Smart Bar, so you can consider it as a homepage of this app. Here you can: Create a new bar See the overview tracking of total views and clicks on all bars See the list of all created bars Below ...

• Reward Bar

  Reward Bar is a feature in Extra Widget that would help merchants boost sales by encouraging customers to add more items to get a discount. But before create this Reward Bar, you will need to create a discount. Please click on this guideline to learn ...

• [Version 2] Reward Bar

  What is Reward Bar? Reward Bar is a multi-tiered progressive bar to show buyers how much more they need to spend to reach a specific goal. 3 types of Reward Bar: 1. Order Goal: Order Goal encourage customers to spend more to get order discounts. How ...