# smootify-magic-box

> Build-a-box: the add-to-cart forms inside it add to the box instead of the cart. 2.0: its pieces stay through a reload or another page until the box goes to the cart (a week at most); the card (smootify-product) of a picked product takes is-in-box and data-in-box (how many of it); the total takes the box's discount only once the box can be bought.

Status: Ready (Smootify 2.0)  
Add-on: Magic Box  
URL: https://www.smootify.io/docs/reference/elements/smootify-magic-box  
Updated: 2026-10-13

## At a glance

- **A fixed size.** `data-min="6"` and `data-max="6"`: exactly 6 products.
- **Sizes you choose.** `data-min="6"`, `data-max="12"`, `data-step="6"`: 6 or 12, nothing in between.
- **A free mix with a limit.** `data-max="10"` alone: from 1 to 10 products.
- **Sizes that do not share the step.** With `data-min="10"`, `data-max="25"` and `data-step="15"`, the box can be bought with 15 products only: 10 and 25 are not multiples of 15. A box of 10 or 20 needs `data-step="10"`.

- `data-unique-per-category="true"`: one product per category. A second pick in the same category shows an error in the Error message of the product's form.
- `data-auto-remove-category="true"`, with the one above: a new pick replaces the old one in its category instead of showing an error. Use it for a configurator.
- `data-all-categories="true"`: the box can be bought only when every category has a product. Until then, the add button stays disabled.

More in [the guide](https://www.smootify.io/docs/features/magic-box).

## Where it can go

- **Anywhere** on the page.
- **Must contain** [`smootify-magic-box-cart`](https://www.smootify.io/docs/reference/elements/smootify-magic-box-cart).
- **Out of place,** Smootify removes it from the page: also when the data-handle metaobject does not exist.

## What it requires

- The **Magic Box** extension (the extension activated in the Smootify dashboard, on every plan). Without it, the element does nothing.

## Attributes on the element

- **It reads** `data-handle`, `data-title`, `data-image`, `data-min`, `data-max`, `data-step`, `data-unique`, `data-unique-per-category`, `data-all-categories`, `data-auto-remove-category`, `data-only-one`, `data-only-one-per-category`, `data-full-error`, `data-too-many-error`.

## Attributes inside it

| Group | Attribute name | Values |
|---|---|---|
| [Magic box category (condition)](https://www.smootify.io/docs/reference/conditions/magic-box-category) | `box-condition` | 2 |