Free shipping bar
The values of `data-prop` inside `free-shipping-bar`.
On this page
At a glance
free-shipping-condition="needs-more"
Before the goal
- Text
data-prop="left"shows what is missing: €35.00.- Bar
data-prop="progress-width"is 65% wide.
free-shipping-condition="free-shipping"
After the goal
- Class
free-shipping-bargetsis-free.- Bar
- Goes on past 100%: give its track Overflow: hidden.
More in the guide.
Where it can go
- Inside
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 |