Option buttons
The values of `option` inside `variant-swatches` or `variant-dropdown` or `variant-popover` or `addon-swatches` or `smootify-product [product="option-values"]`.
On this page
Where it can go
- Inside any of:
variant-swatches,variant-dropdown,variant-popover,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 |