2.0 Beta

Smootify 2.0 is in public beta. Your 1.x store keeps working. Move when you want.

variant-selector

Native select whose options are the values of a product option.

v2.0 beta

On this page

At a glance
Where it can go
What it requires
Attributes on the element
Attributes inside it
Loading

At a glance

variant-swatches

Buttons, one per value

Built with: A Custom element
Inside: One Custom element with the tag button: the template of every value.

variant-dropdown

A Webflow Dropdown

Built with: A Custom element around a Dropdown
Inside: One Dropdown link: the template of every value.

variant-popover

A panel that opens over the page

Built with: A Custom element with a popover inside
Inside: Links or buttons inside the popover element.

variant-selector

The browser's own select

Built with: A Custom element around a Select field
Inside: Only the Select field: Smootify writes its options.

variant-swatches

Every part, on each button

✓Color and imageoption="bg-color""image"
✓Nameoption="title"
✓Descriptionoption="description"
✓Other metaobject fieldsoption-metafield="key"
✓Variant photooption-variant="image"
✓Price or differencesmootify-priceoption="price-difference"

variant-dropdown

Every part, on each link of the list

✓Color and imageoption="bg-color""image"
✓Nameoption="title"
✓Descriptionoption="description"
✓Other metaobject fieldsoption-metafield="key"
✓Variant photooption-variant="image"
✓Price or differencesmootify-priceoption="price-difference"

variant-popover

Every part, on each link or button of the panel

✓Color and imageoption="bg-color""image"
✓Nameoption="title"
✓Descriptionoption="description"
✓Other metaobject fieldsoption-metafield="key"
✓Variant photooption-variant="image"
✓Price or differencesmootify-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 differencedata-format="{{value}} {{difference}}"

More in the guide.

Where it can go

Inside smootify-product.
Not inside .w-condition-invisible: a Webflow condition that hides the element takes it out.
Must contain select.
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.
It reads allow-unavailable on smootify-add-to-cart.
Smootify writes role, aria-label on it: do not set them yourself.

Attributes inside it

Group	Attribute name	Values
Selected value	`selected-option`	5

Loading

Its code loads only on pages that have variant-selector.