free-shipping-bar
Shows the progress towards free shipping from the cart.
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
- 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 | data-prop | 2 |
| Free shipping (condition) | free-shipping-condition | 2 |
Loading
Its code loads only on pages that have free-shipping-bar.