# Cart

> The cart, the mini cart and the free-shipping and countdown bars.

Status: Ready (Smootify 2.0)  
URL: https://www.smootify.io/docs/astro/reference/elements/cart  
Updated: 2026-10-21

| Element | What it does |
|---|---|
| [`bundle-item`](https://www.smootify.io/docs/astro/reference/elements/bundle-item) (template) | Template of one item of a bundle line, cloned per item. |
| [`button[data-is="direct-add-to-cart"]`](https://www.smootify.io/docs/astro/reference/elements/button-data-is-direct-add-to-cart) | Button that adds the product’s current variant to the cart without a form. |
| [`cart-item`](https://www.smootify.io/docs/astro/reference/elements/cart-item) (template) | Template of one cart line: the first is cloned per line, the others are removed. |
| [`free-shipping-bar`](https://www.smootify.io/docs/astro/reference/elements/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`](https://www.smootify.io/docs/astro/reference/elements/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`](https://www.smootify.io/docs/astro/reference/elements/modal-backdrop) | Backdrop and animated panel of a `<details>` modal. |
| [`smootify-cart`](https://www.smootify.io/docs/astro/reference/elements/smootify-cart) | Renders the cart and opens or closes it as a mini cart. |
| [`urgent-cart-countdown`](https://www.smootify.io/docs/astro/reference/elements/urgent-cart-countdown) | Counts down a cart reservation and empties the cart when it ends. |