> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/features/free-shipping-bar.md).

# Free shipping bar

A progress bar that shows how close a shopper is to free shipping — for example "You're $12 away from free shipping." The bar fills and the message updates whenever the cart changes. The full bar appears in the cart drawer and cart page; the message alone can also be shown in the announcement bar as a **Free shipping progress** block (message only, no bar).

![Free shipping bar overview](/files/FHJSkZSWvUdV2OWVqy0R)

The bar is visual only — it does not apply free shipping on its own, so a matching free shipping rate must exist in your Shopify shipping settings.

## How to turn it on

1. In **Shopify admin → Settings → Shipping and delivery**, set up a free shipping rate at the threshold you want to promote.
2. In the theme editor, open [**Theme settings → Cart**](/helix/theme-settings/cart.md#free-shipping-bar).
3. Under **Free shipping bar**, enter the **Minimum amount for free shipping** as a plain number in your store currency (for example, `75` for $75) — match it to the rate you configured in step 1.
4. Pick a **Progress bar color** that stands out against your cart's color scheme.
5. Keep **Show amount range** on so shoppers always see how much more they need to add.
6. Save.
7. The bar shows wherever the **Free shipping** block is placed — by default in the [Cart drawer](/helix/overlay-group/cart-drawer.md#free-shipping-progress) and the [Cart page](/helix/other-sections/cart-page.md#free-shipping).
8. Optional: add the **Free shipping progress** block to the [Announcement bar](/helix/header-group/announcement-bar.md#free-shipping-progress) to show the message storewide. It reads the same threshold, but shows text only, with no bar.