How to Add and Manage Product Variants in Webflow

Step 1: Access Your Webflow Project
Log into your Webflow account and select the project where you want to manage your products. If you don't have a project yet, create a new one by clicking on New Project.

Step 2: Open the E-commerce Dashboard
With your project open, navigate to the E-commerce tab on the left-hand side of the Webflow Designer. This will take you to the E-commerce dashboard to manage all your products, orders, and settings.

Step 3: Create a New Product
Click on the Products section within the E-commerce dashboard. To create a new product, click the New Product button.

Step 4: Enter Basic Product Information
On the new product setup page, fill in essential details like the product name, description, and price. Upload images of the product to give it a visual identity.

Step 5: Enable Variants
Locate the Variants section on the product setup page and toggle the switch to On. This enables the variants feature, allowing you to specify different attributes like size and color.

Step 6: Define Product Attributes
Click on Add Attribute to define the types of variants you want to add. For instance, label an attribute as Size if your product comes in different sizes. Click Add after defining each attribute. You can add more attributes like Color or Style.

Step 7: Enter Variant Options
For each attribute, provide specific options. If you added a Size attribute, enter the sizes available like Small, Medium, and Large. For Color, include options like Red, Blue, and Green. Once done, click Add.

Step 8: Set Prices and Inventory for Each Variant
Set different prices and inventory levels for each variant. You'll see a grid showing all product combinations. Enter unique prices, SKUs, and inventory counts for each. This helps manage stock efficiently.

Step 9: Add Variant Images (Optional)
Enhance each variant's appearance by adding specific images. For example, add different images for each color variant if you have a shirt in multiple colors. Click on the variant to edit and upload the relevant image.

Step 10: Save Your Product
After completing all the necessary setup, save your changes by clicking on the Save Product button.

Step 11: Preview Your Product
Ensure all settings are correct by previewing your product in designer mode. Click the Preview button to see how the product with variants will look on your live site. Verify that all options are visible and functioning correctly.

Step 12: Publish Your Changes
When satisfied, click the Publish button to make your changes live. Customers can now view and select the product variants.

Step 13: Managing Product Variants
To manage your variants, return to the E-commerce dashboard at any time. You can edit prices, update inventory, change images, or add new variants as needed. Navigate to the product, click on it, and make the necessary changes.

Offering product variants can greatly enhance the shopping experience by providing customers with multiple options. Keep your inventory updated and continually refine your product offerings to maintain a fresh and appealing online store. Happy selling!