# free-shipping-bar

> Shows the progress towards free shipping from the cart.

Status: Ready (Smootify 2.0)  
URL: https://www.smootify.io/docs/reference/elements/free-shipping-bar  
Updated: 2026-10-13

## At a glance

With `data-amount="100"`: a €65 cart shows `free-shipping-condition="needs-more"`, `data-prop="left"` is €35.00 and `data-prop="progress-width"` is 65% wide. A €120 cart shows `free-shipping-condition="free-shipping"`, the bar gets the class `is-free`, and the width goes past 100% (give its track Overflow: hidden).

More in [the guide](https://www.smootify.io/docs/build/cart-extras).

## Where it can go

- **Anywhere** on the page.
- **Out of place,** it stays in the page and does nothing: no context required.

## What it requires

Nothing beyond Smootify: it works on every plan.

## Attributes on the element

- **It reads** `data-amount`, `data-quantity`.

## Attributes inside it

| Group | Attribute name | Values |
|---|---|---|
| [Free shipping bar](https://www.smootify.io/docs/reference/attributes/free-shipping) | `data-prop` | 2 |
| [Free shipping (condition)](https://www.smootify.io/docs/reference/conditions/free-shipping) | `free-shipping-condition` | 2 |

## Loading

Its code loads only on pages that have `free-shipping-bar`.