One version of a product that a customer can buy, such as the Sand shirt in size M, with its own price, compare-at price, SKU, barcode, stock, weight and image.
A variant is one combination of a product’s option values: Sand / M. It is what the cart and the order hold. Each variant has its own:
- price and compare-at price (the crossed-out “was” price);
- SKU, your own code for it, and barcode (GTIN, EAN, UPC);
- stock, per location, and whether it can be sold when it runs out;
- weight, for shipping;
- image, one of the product’s photos;
- unit price, where the law asks for one.
A product can have up to 2,048 variants. A product without options has exactly one, called “Default Title”, which Shopify hides in the admin.
In Webflow terms
A variant has no Webflow equivalent: the Products collection holds one item per product, not per variant. That is on purpose. Stock and prices change too often for the CMS, so Smootify reads them live from Shopify, for the variant the visitor has picked.
In Smootify
Inside smootify-product, the variant="…" attributes show the selected variant: variant="sku", variant="stock", variant="unit-price". They change as the customer picks options. A link with ?variant= and a variant id opens the product on that variant, and the address follows the customer’s picks.
When the picked combination does not exist, or is sold out, the add-to-cart button is disabled and gets the class is-disabled.
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.
More in The product page and the variant attributes.