> For the complete documentation index, see [llms.txt](https://document.tek-labs.app/free-gift-userguide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://document.tek-labs.app/free-gift-userguide/user-guides/styling/progress-bar-type.md).

# Progress bar

Style the milestone progress bar in the cart.

<figure><img src="https://2782088585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyTxhG4dtLtoZ8LGb73m7%2Fuploads%2Fgit-blob-c8c9300cd7ec232f058952185f076c15733bc25c%2Fsp-st-progress-bar.png?alt=media" alt="Progress bar style editor"><figcaption></figcaption></figure>

**Preview**: drag the **Cart total** slider to see how the bar changes as the customer reaches each milestone. Use the Desktop and Mobile icons to switch devices.

## Sections

### Preset

One-click colour themes: **Default**, **Dark tangerine**, **Lucky point**, **Neon carrot**, **Amazon**, **Flamingo**, **Haiti**, **Egyptian blue**, **Cadet blue**, **Medium wood**, or **Custom color**.

### Currency Format

**Select currency format**: how amounts appear on the bar.

* Amount
* Amount no decimals
* Amount with comma separator
* Amount with space separator
* Amount with period and space separator
* Amount no decimals with comma separator
* Amount no decimals with space separator
* Amount with apostrophe separator

Tick **Change the default currency display** to write your own format for each store currency.

### Progress Bar

* **Title label**, **Milestone label** and **Filled bar** colours.
* **Icons**: **Default Icon**, or **Upload Image** to use your own icon for **Free Gift**, **Order Discount** and **Shipping Discount** milestones.

### Container

Font family, background and border colours, **Text reward** colour, border width and radius.

### Reward selection button

* **Button color** and **Button Selected Color**.
* **Hide this claim reward part**: hides the claim area under the bar. Recommended when the offer uses **Auto add rewards**.

### Gift Modal

{% hint style="info" %}
This section applies when customers choose their gift reward manually.
{% endhint %}

Background, button, checkbox, "FREE" and border colours; border width and radius.

### Countdown timer

Size, weight and colour of the **Title**, **Timer number** and **Timer label**.

### Custom CSS

Your own CSS. Contact us if you'd like our team to set it up.

### Advanced

Choose exactly where the bar is inserted on your theme with a CSS selector and a position (**Before the element**, **Prepend the element** or **After the element**) for:

* **Cart selector element** (cart page)
* **Cart draw selector element** (cart drawer)
* **Product page selector element**

{% hint style="warning" %}
Only change the Advanced settings if the bar doesn't appear in the right place in your theme. Contact us if you're not sure.
{% endhint %}