2.0 Beta

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

What changed
Log inStart free

configurator-popover

The configurator dropdown with its options in a popover.

v2.0 betaServer planAdd-on: Product configurator
Open .md
On this page
  1. At a glance
  2. Where it can go
  3. What it requires
  4. Fields in the form
  5. Attributes on the element

At a glance

configurator-input
Put inside
A Text field or a Text area.
On while
It holds a valid value.
Formula
data-formula, with length.
configurator-checkbox
Put inside
A Checkbox.
On while
It is checked.
Formula
data-formula.
configurator-radio
Put inside
Radio buttons.
On while
A radio is chosen. Clicking it again unchecks it.
Formula
After a | in each radio's Choice value.
configurator-select
Put inside
A Select field.
On while
A choice with a value is chosen.
Formula
After a | in each option's value.
configurator-dropdown
Put inside
A Webflow Dropdown and a Select field.
On while
A choice is made.
Formula
After a | in the options of the Select field.
configurator-popover
Put inside
A popover and a Select field.
On while
A choice is made.
Formula
After a | in the options of the Select field.
configurator-dimension
Put inside
Text fields with the Type Number.
On while
Every one holds a valid number.
Formula
data-formula, with each field's Name.
configurator-file-input
Put inside
An upload area.
On while
At least one file is uploaded.
Formula
data-formula, with file.
configurator-field
Put inside
Configurator fields, to group them.
On while
Never: it only groups.
Formula
A data-formula on it does nothing.

Formula builder

Pick a field and a rule in words, try it with a price, and copy the formula. It is checked with the same calculator Smootify runs on your site.

Formula builder

Product configurator

The field
The choices

A choice that keeps the price needs no formula.

The Names of the number fields

As set in each field's settings: one plain word each.

The rule
% (negative for less)

Try it

More in the guide.

Where it can go

  • Inside smootify-add-to-cart.
  • Must contain select, [popover] :is(a, button:not([popovertarget])).
  • Out of place, Smootify removes it from the page: also when the add-to-cart has no smootify-product ancestor.

What it requires

  • The server plan: on other plans Smootify removes the element from the page.
  • The Product configurator extension (server plan, the extension activated in the Smootify dashboard, the licensed domain). Without it, its markup is removed from the page.

Fields in the form

Each field’s Name setting in Webflow tells Smootify what the field holds. It is a setting of the field, not a custom attribute.

NameFieldWhat it does
the data-name, else the name, of the first named elementany fieldThe step name the formulas use.

Attributes on the element

  • It reads data-formula.
  • Smootify writes data-formula on it: do not set them yourself.

    ↑ ↓ to moveEnter to openEsc to close