2.0 Beta

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

addon-dropdown

Webflow dropdown listing the nested product's variants as add-ons.

v2.0 beta

On this page

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

At a glance

A Webflow Checkbox

Adds: The add-on's current variant, while checked.
Label: Stays as you write it.
No add-on: The box unchecked.

A Select field

Adds: The variant chosen in the select.
Options: Smootify writes one per variant.
No add-on: An option you add without a value, such as "No thanks".

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.

More in the guide.

Where it can go

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 .w-dropdown, .w-dropdown-link.
Out of place, Smootify removes it from the page.

What it requires

Nothing beyond Smootify: it works on every plan.

Attributes on the element

It reads addon-type, show-price, allow-unselect, id.

Loading

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