Overview

Shopify Product Variants allow you to offer different versions of a single product, such as different sizes, colors, materials, or styles. This enables customers to choose the specific version they want, all from a single product page.

What are Product Variants?

Product variants are different options for a product that share the same core attributes but have variations. For example, a t-shirt could have variants based on:

• Size: Small, Medium, Large, Extra Large
• Color: Red, Blue, Green, Black
• Material: Cotton, Polyester, Blend

Variants allow you to:

• Consolidate product listings, making it easier for customers to browse.
• Manage inventory for each specific variation.
• Set different prices for different variants.
• Display unique images for each variant.

How Variants Work in Shopify

• When creating a product, you can choose to add variants.
• You can define up to three variant options (e.g., Size, Color, Material).
• Shopify automatically generates all possible combinations of the variant options.
• You can then customize each variant with:
  • Price
  • SKU (Stock Keeping Unit)
  • Barcode
  • Inventory quantity
  • Weight
  • Images
• Customers can select their desired variant from dropdown menus or swatches on the product page.

Creating Product Variants

1. Go to Products: In your Shopify admin, go to "Products."
2. Create or Edit a Product: Create a new product or select an existing product.
3. Add Variants: In the "Variants" section, click "Add options like size or color."
4. Define Options: Enter the names of your variant options (e.g., Size, Color).
5. Enter Option Values: Enter the values for each option (e.g., Small, Medium, Large; Red, Blue, Green).
6. Edit Variants: Shopify will generate the variants. You can then edit each variant to set its price, inventory, and other details.
7. Add Images: Upload images that correspond to each variant.
8. Save: Save your product.

Benefits of Using Variants

• Improved Customer Experience: Customers can easily find the specific product they want.
• Simplified Inventory Management: Track inventory for each variation separately.
• Increased Sales: Offer a wider range of product options.
• Enhanced Product Pages: Consolidate multiple similar products into a single listing.
• Accurate Reporting: Track sales and inventory for each variant.

How to use Variants in Webflow

Variants are not imported inside Webflow CMS as we already discussed inside the Product section of this documentation, you can use Variants in 2 ways:

1. Inside the Add to Cart element using the variants selectors, and this is the main usage of Variants that you will have in all your stores;
2. Some stores, for a tailored browsing experience, can choose to display each product variant as an individual card on certain pages. This allows customers to see specific variations at a glance and directly access the product page with their chosen variant pre-selected.