# Free shipping bar

> The values of `data-prop` inside `free-shipping-bar`.

Status: Ready (Smootify 2.0)  
URL: https://www.smootify.io/docs/reference/attributes/free-shipping  
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

- **Inside** [`free-shipping-bar`](https://www.smootify.io/docs/reference/elements/free-shipping-bar).

## Values

| Attribute and value | What it is | Notes |
|---|---|---|
| `data-prop="left"` | Amount left | on text |
| `data-prop="progress-width"` | Bar width | on container |