# smootify-add-to-cart

> Product form that turns the selection into cart lines.

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

## Where it can go

- **Inside** [`smootify-product`](https://www.smootify.io/docs/reference/elements/smootify-product).
- **Must contain** `form`.
- **Out of place,** Smootify removes it from the page.

## 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 |
|---|---|---|
| `quantity` | number field (`quantity-input`) | The quantity of the line. |
| `sellingPlanId` | Radio button, Select field (written by `subscription-swatches`) | The selling plan of the line. |
| `option1`, `option2`, `option3` | Select field | A bare `select[name="optionN"]` picks that option; never a line property. |
| `Recipient email` | Text field, Type Email | Gift card: Shopify sends the card to this address. |
| `Recipient name` | Text field | Gift card: the recipient’s name, in the email Shopify sends with the card (with a filled `Recipient email`). |
| `Message` | Text field, Text area | Gift card: the message in that email. |
| `Send on` | date field | Gift card: the day the card is sent (Smootify sets today as the minimum). |
| `buy-now` (submit button) | button | The line goes straight to checkout. |
| any Name on a field of an add-on widget (`addon-checkbox`, `addon-select`, `addon-dropdown`, `addon-popover`, `addon-swatches`, the add-on’s `quantity-input`) | any field | Never a property of the main line, whatever the Name (Webflow needs one). From mount the widget names its fields `##ignore-addon`, left out of the line; once the add-on’s product loads they get the names of the add-on line (2.0). |
| any other name, or `properties[Name]` | any field | A line item property named as the field’s `data-name`; a checkbox with `data-name` sends its `data-value`, else `✓`; a file is sent as JSON; empty values are not sent; a name starting with `_` is hidden at checkout and in the cart. |

## Attributes on the element

- **It reads** `use-magic-box`, `box-title`, `box-image`, `single-addon-swatch`, `allow-unavailable`, `avoid-option-update`.

## Attributes inside it

| Group | Attribute name | Values |
|---|---|---|
| [Add to cart](https://www.smootify.io/docs/reference/attributes/add-to-cart) | `bundle` | 8 |
| [Add to cart (condition)](https://www.smootify.io/docs/reference/conditions/add-to-cart) | `condition` | 3 |

## Loading

Defined at boot on every page.