# smootify-add-to-cart

> Product form that turns the selection into cart lines.

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

## Where it can go

- **Inside** [`smootify-product`](https://www.smootify.io/docs/astro/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` attribute tells Smootify what the field holds.

| Name | Field | What it does |
|---|---|---|
| `quantity` | `input type="number"` (`quantity-input`) | The quantity of the line. |
| `sellingPlanId` | `input type="radio"`, `select` (written by `subscription-swatches`) | The selling plan of the line. |
| `option1`, `option2`, `option3` | `select` | A bare `select[name="optionN"]` picks that option; never a line property. |
| `Recipient email` | `input type="email"` | Gift card: Shopify sends the card to this address. |
| `Recipient name` | `input type="text"` | Gift card: the recipient’s name, in the email Shopify sends with the card (with a filled `Recipient email`). |
| `Message` | `input type="text"`, `textarea` | Gift card: the message in that email. |
| `Send on` | `input type="date"` | 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. 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). The add-on’s `quantity-input`: the quantity per unit of the main product, so the add-on’s line and the form’s total take it times the main quantity and follow it (2.0); with `quantity="total"` on the picker the add-on’s total, not multiplied (2.0). Without one the add-on follows the main quantity. 1.x’s `addon-type` is ignored (the debugger points it out). Any add-on widget puts the form in box mode (`use-magic-box`, as 1.x): main line and add-ons go in as one box, and the box’s quantity is not changed in the cart; separate add-on lines (a `default` line of its own, a `bundle` grouped and scaled by `_bundledQuantity`) come only from `#addon\|…` fields written by hand, without widgets. |
| 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/astro/reference/attributes/add-to-cart) | `bundle` | 8 |
| [Add to cart (condition)](https://www.smootify.io/docs/astro/reference/conditions/add-to-cart) | `condition` | 3 |

## Loading

Defined at boot on every page.