Cart
The cart, the mini cart and the free-shipping and countdown bars.
| Element | What it does |
|---|---|
bundle-item (template) | Template of one item of a bundle line, cloned per item. |
button[data-is="direct-add-to-cart"] | Button that adds the product’s current variant to the cart without a form. |
cart-item (template) | Template of one cart line: the first is cloned per line, the others are removed. |
free-shipping-bar | Shows the progress towards free shipping from the cart; 2.0: data-amount can give a threshold per currency (§2.11). |
gift-card-balance | (HQ #73) A form where the visitor types a gift card code and reads its balance, without buying anything: Smootify asks Shopify with a throwaway cart that carries only that code, never the visitor’s cart. On success [gift-card=“balance”] and [gift-card=“code”] are written (§2.11) and [form-done] shows; an unknown, disabled or expired code shows the form error, and so does a card used up: Shopify applies no card with a zero balance, the same answer as an unknown code (checked on the starter, 2026-10-16; beta.4’s is-empty never showed and is gone). Every plan. Inside smootify-cart too (next to its gift card field): the cart never takes its form, field or form states as its own, as with a smootify-product. |
modal-backdrop | Backdrop and animated panel of a <details> modal. |
smootify-cart | Renders the cart and opens or closes it as a mini cart. |
urgent-cart-countdown | Counts down a cart reservation and empties the cart when it ends. |