> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.qikify.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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.

![](https://storage.crisp.chat/users/helpdesk/website/33f605886cba4e00/image_2fwudk.png)

# 2. Visibility

![](https://storage.crisp.chat/users/helpdesk/website/33f605886cba4e00/image_103q1m2.png)
  
* **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

![](https://storage.crisp.chat/users/helpdesk/website/33f605886cba4e00/image_81lkaz.png)
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
  
![](https://storage.crisp.chat/users/helpdesk/website/33f605886cba4e00/image_1mklr9t.png)

This settings is an optional. You can choose to hide the Progress bar on:  
* **Checkout Draft order**
* **Online Store**

# 5. Step configuration
  
![](https://storage.crisp.chat/users/helpdesk/website/33f605886cba4e00/image_nli67c.png)

* **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**.  

![](https://storage.crisp.chat/users/helpdesk/website/33f605886cba4e00/image_1ugxfzm.png)

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

![](https://storage.crisp.chat/users/helpdesk/website/33f605886cba4e00/image_1ee6w21.png)
| 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](https://support.qikify.com/portal/en/newticket). Our team would love to help you.