# addon-swatches

> One button per value or variant of the nested product as add-ons.

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

## Where it can go

- **Inside** `smootify-add-to-cart smootify-product`. A selector with a space is a chain: `a b` is `b` inside `a`.
- **Not inside** an element with `hidden` at boot: it does not mount.
- **Must contain** `button:not([popovertarget])`.
- **Out of place,** Smootify removes it from the page.

## What it requires

Nothing beyond Smootify: it works on every plan.

## Attributes on the element

- **It reads** `quantity`, `allow-unselect`, `id`.
- It reads `single-addon-swatch` on [`smootify-add-to-cart`](https://www.smootify.io/docs/astro/reference/elements/smootify-add-to-cart).

## Attributes inside it

| Group | Attribute name | Values |
|---|---|---|
| [Option buttons](https://www.smootify.io/docs/astro/reference/attributes/option) | `option` | 14 |
| [Option metafield](https://www.smootify.io/docs/astro/reference/attributes/option-metafield) | `option-metafield` | 3 |

## Loading

Its code loads only on pages that have `addon-swatches`.