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
At a glance
variant-swatches
Every part, on each button
- ✓Color and image
option="bg-color""image" - ✓Name
option="title" - ✓Description
option="description" - ✓Other metaobject fields
option-metafield="key" - ✓Variant photo
option-variant="image" - ✓Price or difference
smootify-priceoption="price-difference"
variant-dropdown
Every part, on each link of the list
- ✓Color and image
option="bg-color""image" - ✓Name
option="title" - ✓Description
option="description" - ✓Other metaobject fields
option-metafield="key" - ✓Variant photo
option-variant="image" - ✓Price or difference
smootify-priceoption="price-difference"
variant-popover
Every part, on each link or button of the panel
- ✓Color and image
option="bg-color""image" - ✓Name
option="title" - ✓Description
option="description" - ✓Other metaobject fields
option-metafield="key" - ✓Variant photo
option-variant="image" - ✓Price or difference
smootify-priceoption="price-difference"
variant-selector
Text only: the browser draws the list
- –Color and image
- ✓Namewritten by Smootify
- –Description
- –Other metaobject fields
- –Variant photo
- ✓Price or difference
data-format="{{value}} {{difference}}"
More in the guide.
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 |