variant-swatches
One button per value of a product option.
Where it can go
- Inside
smootify-product. - Not inside an element with
hiddenat boot: it does not mount. - Must contain
button:not([popovertarget]). - Out of place, Smootify removes it from the page: also when its option is missing or Default Title.
What it requires
Nothing beyond Smootify: it works on every plan.
Attributes on the element
- It reads
data-option,data-option-name. - Smootify writes
role,aria-labelon it: do not set them yourself.
Attributes inside it
| Group | Attribute name | Values |
|---|---|---|
| Option buttons | option | 14 |
| Selected value | selected-option | 5 |
| Option metafield | option-metafield | 3 |
Loading
Its code loads only on pages that have variant-swatches.