How to add product variants in Webflow (sizes, colours, options)

T-shirts in four sizes. Chocolate in three box sizes. Prints in two finishes. Variants let you sell all of them as one product with a dropdown, rather than a separate product for each. Here’s exactly how Webflow does it, and where people get stuck.

What are options, option sets and variants?

Webflow’s terms trip people up, so quickly:

• An option set is a type of choice, like Size or Colour.
• Options are the values in it: S, M, L or Black, White.
• A variant is one combination, like M / Black. Webflow treats each variant as a separate product item with its own fields.

How do I add variants to a Webflow product?

1. Open the Ecommerce panel › Products in the Designer or Editor and click the product.
2. Scroll to Options and click + Add an option set.
3. Name it (e.g. Box size), then type each option and press Enter after each: 3, 6, 12.
4. Add a second or third option set if you need one (e.g. Selection: Dark / Milk).
5. Webflow creates the variants automatically, one for every combination.
6. Click each variant to set its price, SKU, images, measurements and stock.
7. Save, then publish.

To rename or delete an option, hover over it and click the arrow, or double-click to rename.

How many variants can I have?

Webflow sets two hard limits:

The 50 cap limits combinations, not just options. Webflow’s own example: with 5 options in set one, you can’t add more than 10 in set two (5 × 10 = 50).

Variants eat your item limit

Every product includes a default SKU, and every variant is a SKU. They all count toward your plan’s ecommerce item limit:

• 1 product, no options = 2 items (product + default SKU)
• 1 product with Colour: Black / White = 3 items (product + 2 SKUs)
• 1 product with Box size × Selection (3 × 2) = 7 items

Plans allow 500 (Standard), 5,000 (Plus) or 15,000 (Advanced) items. A 500-item store with lots of variants fills up faster than you’d think. Check the numbers with our Webflow Ecommerce limits reference.

What do variants inherit from the main product?

This is where most mistakes happen. When you create variants, the main image, more images, SKU, price, compare-at price and measurements on the main product are copied to every variant. Quantity, if set, only goes to the first variant.

Which variant shows on my product page?

The first variant created becomes the default, marked with a ⭑ star in the variants list. After you save, the main product’s image, price, SKU, quantity and measurement fields are replaced by the default variant’s values. Anywhere your design shows those fields (collection lists, the product page) shows the default variant until the shopper picks an option.

To change it, open another variant and click Make default.

If you delete all option sets, the product’s original fields come back.

How do I stop people buying a combination I don’t sell?

Say you don’t do the 12-box in Milk. Open that variant, turn on Track inventory and set the quantity to 0. Webflow makes that combination unselectable in the option dropdown.

How do options look on the site?

On products with variants, the Add to Cart element gets an extra option list wrapper so shoppers can choose before adding to the cart. As they pick, anything bound to the default variant (price, image) updates to match. You can change the default “Select” text in the dropdown settings.

Chosen options then show in the cart, checkout and order confirmation, in an option list you can style like any collection list.

Can I bulk-import variants with a CSV?

Yes, from the Designer only (not the Editor). Webflow’s product CSV template has columns for:

• Option1 name / value, Option2 name / value, Option3 name / value
• Variant price (required), compare-at price, variant inventory (which also turns on tracking)
• Variant SKU, weight, length, width, height
• Main variant image (a URL Webflow downloads and hosts)

Full CSV walkthrough in our Webflow product management guide.

Working around the 50-variant limit

If you hit the ceiling:

• Split by one option. Make Linen Shirt – Blue and Linen Shirt – White separate products, each with sizes.
• Move cosmetic choices to custom fields. If a choice doesn’t change price, stock or image (like a gift note), it might not need to be a variant. Use a checkout Additional info field instead.
• Question the long tail. If 20 of your 60 combinations never sell, drop them.

Variant checklist

• Cleared main-product fields that differ per variant before adding options
• Every variant has its own price, SKU and image
• Weights set per variant if you use weight-based shipping
• Unsold combinations set to 0 stock with tracking on
• Right variant marked default
• Item count still within your plan

Next: managing stock across all those variants, in Webflow product management: the complete guide.