addon-swatches

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

v2.0 beta

On this page

At a glance

A Webflow Checkbox

A Select field

A Webflow Dropdown

Adds: The variant chosen in the dropdown.
Template: The first Dropdown link. show-price adds the price after each name.
No add-on: With allow-unselect, a "None" entry comes first. Without it, the first variant is chosen from the start.

An element with a popover

Adds: The variant chosen in the popover.
Template: The first link or button in the popover. show-price as in the dropdown.
No add-on: With allow-unselect, a "None" entry comes first. Without it, the first variant is chosen from the start.

Custom elements with the tag button

Adds: The value or variant of the chosen button. It gets is-active.
Template: The first button: one per value with one option, one per variant with more.
No add-on: A click on the chosen button. allow-unselect="false" prevents it and chooses the first value.

Inside smootify-add-to-cart smootify-product. A selector with a space is a chain: a b is b inside a.
Not inside .w-condition-invisible: a Webflow condition that hides the element takes it out.
Must contain button:not([popovertarget]).
Out of place, Smootify removes it from the page.

Nothing beyond Smootify: it works on every plan.

Group	Attribute name	Values
Option buttons	`option`	14
Option metafield	`option-metafield`	3

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