# Option buttons

> The values of `option` inside `variant-swatches` or `variant-dropdown` or `variant-popover` or `addon-swatches` or `smootify-product [product="option-values"]`.

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

## At a glance

| Swatch part | Written as | `variant-swatches` | `variant-dropdown` | `variant-popover` | `variant-selector` |
|---|---|---|---|---|---|
| Color and image | `option="bg-color"`, `"image"` | yes | yes | yes | no |
| Name | `option="title"` | yes | yes | yes | yes, written by Smootify |
| Description | `option="description"` | yes | yes | yes | no |
| Other metaobject fields | `option-metafield="key"` | yes | yes | yes | no |
| Variant photo | `option-variant="image"` | yes | yes | yes | no |
| Price or difference | `smootify-price`, `option="price-difference"` | yes | yes | yes | in the text, with `data-format="{{value}} {{difference}}"` |

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

## Where it can go

- **Inside any of:** [`variant-swatches`](https://www.smootify.io/docs/reference/elements/variant-swatches), [`variant-dropdown`](https://www.smootify.io/docs/reference/elements/variant-dropdown), [`variant-popover`](https://www.smootify.io/docs/reference/elements/variant-popover), [`addon-swatches`](https://www.smootify.io/docs/reference/elements/addon-swatches), `smootify-product [product="option-values"]`.

## Values

| Attribute and value | What it is | Notes |
|---|---|---|
| `option="title"` | Value | on text |
| `option="image"` | Image | on image |
| `option="color"` | Text in its color | on text |
| `option="bg-color"` | Background in its color | on container, text, button, link |
| `option="description"` | Description | on text |
| `option="price-difference"` | Price difference | Hidden on the cheapest value; not in add-ons; on text; inside variant-swatches, variant-dropdown, variant-popover |
| `option="title"` | Choice label | In a dynamic property’s swatch button: the choice’s label; on text; inside dynamic-property |
| `option="image"` | Choice image | on image; inside dynamic-property |
| `option="option1"` | Add-on option 1 | on text; inside addon-swatches |
| `option="option2"` | Add-on option 2 | on text; inside addon-swatches |
| `option="option3"` | Add-on option 3 | on text; inside addon-swatches |
| `option-variant="image"` | Variant image | The variant the button stands for; on image; inside variant-swatches, variant-dropdown, variant-popover, addon-swatches |
| `data-format="+ {{price}}"` | Price format | on text; inside variant-swatches, variant-dropdown, variant-popover; with [option=“price-difference”] |
| `data-format="{{value}} {{difference}}"` | Option text format | On the `<select>`: {{value}} is the value, {{difference}} what it costs more (empty on the cheapest); on input; inside variant-selector |