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.
Currently, we support 4 templates. You can choose one of them and keep editing with the following steps.
Hide "Cart" step: Check the box if you want to hide the "Cart" step from the progress bar.
Step label position: Change the position of icon label.
Under the progress bar (Default).
Above the progress bar.
Bar color: Apply the color to the active step and progressive bar.
Inactive bar color: Apply the color to the inactive step and bar.
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.
Active state design: Upload an image for the current step in the checkout flow.
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.
This settings is an optional. You can choose to hide the Progress bar on:
Checkout Draft order
Online Store
Step label: Rename the step label if desired (e.g., "Shipping" → "Delivery").
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.
Success State Design: Upload an image for the completed step (e.g., success icon).*
Active State Design: Add an image for when the "Shipping" step is active.*
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.
Step 1: Please kindly go to the Checkout Editor > Choose Add app block > Select Checkout progress bar.
Step 2: 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.
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
Hide "Cart" step: Check the box if you want to hide the "Cart" step from the progress bar.
Step label position: Change the position of icon label.
Under the progress bar (Default).
Above the progress bar.
Bar color: Apply the color to the active step and progressive bar.
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.
Active state design: Upload an image for the current step in the checkout flow.
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:
Checkout Draft order
Online Store
5. Step configuration
Step label: Rename the step label if desired (e.g., "Shipping" → "Delivery").
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.
Success State Design: Upload an image for the completed step (e.g., success icon).*
Active State Design: Add an image for when the "Shipping" step is active.*
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
Step 1: Please kindly go to the Checkout Editor > Choose Add app block > Select Checkout progress bar.
Step 2: 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.
Updated on: 19/01/2025
Thank you!