An option is a choice the customer makes, such as Color or Size, with its values; a variant is one combination of those values, the version that is actually bought, with its own price, SKU and stock.
Options and variants are the two words people mix up most in Shopify. They are two sides of the same thing:
- an option is a question the product asks: Color, Size, Material. Each option has values: Sand and Navy, S, M and L;
- a variant is one answer to all the questions at once: Sand / M. It is the version that goes into the cart.
A product has up to three options. Shopify makes one variant per combination of their values, and you can delete the combinations you do not sell:
Options: what the customer picks
Variants: what the customer buys
LS-SAN-S$4912LS-SAN-M$490, sold outLS-SAN-L$494LS-NAV-S$558LS-NAV-M$553Price, SKU, stock, weight and image belong to the variant. The product holds what all of them share: title, description, vendor, the photos.
An option is not a property. An option makes variants, each with its own price, SKU and stock. Something that only records the customer’s answer, such as the text to engrave, is not an option: it is a property of the cart line.
In Webflow terms
There is nothing quite like it in Webflow. The closest picture: the options are the fields of a filter, and the variants are the items it can land on. One template page shows every product, so the page needs a picker for each option a product may have.
In Smootify
A picker shows the values of one option and changes the variant: swatches, a dropdown, a popover or a native select, with data-option="1", "2" or "3". A picker removes itself when the product does not have that option.
Buttons, one per value
- Built with
- A Custom element
- Inside
- One Custom element with the tag button: the template of every value.
A Webflow Dropdown
- Built with
- A Custom element around a Dropdown
- Inside
- One Dropdown link: the template of every value.
A panel that opens over the page
- Built with
- A Custom element with a popover inside
- Inside
- Links or buttons inside the popover element.
The browser's own select
- Built with
- A Custom element around a Select field
- Inside
- Only the Select field: Smootify writes its options.
More in The product page, Swatch colors and images and, for answers that are not options, Dynamic properties.