# smootify-cart

> Renders the cart and opens or closes it as a mini cart.

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

## At a glance

| Way | Build it with | Opens with | Good to know |
|---|---|---|---|
| A cart page | nothing: the Form Block sits right inside `smootify-cart` | always shown, on a page of its own | open and close buttons do nothing here |
| Webflow Dropdown | a Dropdown, with the Form Block in its list | the Dropdown toggle | opens again when the lines change |
| Dialog | a Custom element with the tag `dialog`; its first child is the panel | an open-cart button | a click on the backdrop and Escape close it |
| Details | a Custom element with the tag `details`, with a `summary` | the `summary` | a click outside closes it |
| Popover | Webflow's Popover element, or a Div block with the attribute `popover` | its trigger, or an open-cart button | stays open while the visitor types |
| Your own interaction | two elements with `data-trigger="open"` and `data-trigger="close"` | your Webflow interaction | Smootify clicks them to open and close the cart |

- **Form**: the lines, the totals and the checkout button. Hidden while the cart is empty.
- **Success message**: the empty cart, shown when there are no lines. Never used as a success message.
- **Error message**: Shopify's errors, written in its text and shown for 5 seconds. Screen readers read them out.

More in [the guide](https://www.smootify.io/docs/build/cart).

## 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.

## Fields in the form

Each field’s **Name** setting in Webflow tells Smootify what the field holds. It is a setting of the field, not a custom attribute.

| Name | Field | What it does |
|---|---|---|
| `note` | Text area, input | The order note, saved before checkout and prefilled; a field whose name is `Note` becomes `note` (1.x read only a textarea). |
| `coupon` | Text field | A discount code, applied by `button[data-action="coupon"]` or Enter, cleared after; a field whose name is `Coupon` becomes `coupon`. |
| `gift-card` (or `Gift Card`) | Text field | A gift card code, applied by `button[data-action="gift-card"]` (Enter only with `gift-card`). |
| `email` | Text field, Type Email | With a quote (`draft-order`): the email of the draft order (the logged-in customer otherwise); without a quote a cart attribute. |
| `quantity` | number field | Inside a cart line: that line’s quantity. |
| `draft-order` (submit button) | button | Sends the cart as a quote (draft order) instead of the checkout. |
| any other name | any field | A cart attribute named as the field’s `data-name`, saved before checkout; refilled for text, textarea, select, radio and checkbox; a multiple select is joined with `,`. |

## Attributes on the element

- **It reads** `data-open`, `data-draft`.

## Attributes inside it

| Group | Attribute name | Values |
|---|---|---|
| [Cart](https://www.smootify.io/docs/reference/attributes/cart) | `cart` | 10 |
| [Discount](https://www.smootify.io/docs/reference/attributes/discount) | `discount` | 2 |
| [Gift card](https://www.smootify.io/docs/reference/attributes/gift-card) | `gift-card` | 2 |
| [Cart form and buttons](https://www.smootify.io/docs/reference/attributes/cart-form) | `data-name` | 13 |
| [Loading](https://www.smootify.io/docs/reference/attributes/loading) | `skeleton` | 5 |
| [Cart (condition)](https://www.smootify.io/docs/reference/conditions/cart) | `cart-condition` | 2 |

## State classes

Smootify toggles `loaded`, `is-rendered`, `is-empty-cart`, `has-taxes`, `has-empty-quote` on it: style them in Webflow for each state. See [State classes](https://www.smootify.io/docs/reference/state-classes).

## Loading

Defined at boot on every page.