Webflow E-commerce: Adding variants to products

Discover our Webflow tutorial to learn how to add variants (colours, sizes, storage, etc.) to the products of your E-commerce site in Webflow!

Key points to remember

In an e-commerce site, product variants are important. They allow you to select variants of the product in question on the same page, product sheet. These variants can be defined according to colour, storage capacity (for computer equipment), size (shoe size for example), etc. These variants make it possible to avoid having too many pages on your website and slowing down performance. Today, we are going to teach you in this Webflow tutorial how to add variants to the products of your Webflow e-commerce site.

Please note: in order to respect good SEO practices for e-commerce, there must be a unique URL per product and not per variant (variants of a product must have the same URL as the basic product).

Step 1 - Add or Modify a product in Webflow

Go to the E-commerce part of the Webflow interface and to the Products collection.

From here you will either create a new product or modify an existing one. If you have not already done so, fill in the information in each field.

Fill in the Webflow E commerce product fields

Step 2 - Create new product options

At the very end of the form, you will see a section called "Options".

In this section you can add an option set.

Once you have clicked on the button to add an option, you will need to define a name for the option and some options.

For example:

For smartphones: we could have option names such as Storage and Colour. Storage options could be 16GB, 32GB, 64GB, 128GB, etc. and colours: Black, White, Grey, Pink, etc.
For shoes: we could have a size option for example with options: 38, 39, 40, 41, 42, 43, etc.

Adding Webflow E commerce variant options

Step 3 - Fill in the information for the product variants

Now that you have defined all your options, you can enter all the information, all the empty fields for each variant.

Filling in the fields for Webflow E Commerce product variants

Step 4 - Choose a default variant

Next, you can choose a default variant. The default variant is the product that will automatically appear, by default, on the product sheet, in the categories and more generally on the online shop. The variants will be displayed by checking the options, but will not be visible at first glance. To define a default variant, select the one you want and click on the button with a star in the upper left corner: "Set as default".

Choose a default Webflow E commerce product variant

Hang in there, you don't have many steps left!

Step 5 - Insert the option to choose variants in the product pages

Now you need to go to the "Product template" page. This is the template that will be used for all your product pages. On this page, where you want it, you can drag and drop the ECommerce element "Add to cart". A dropdown menu with options and variants will be generated automatically (in addition to the quantity selection, the add to cart button and the buy now button).

All you have to do is customize this variant functionality with the Style tab of Webflow. Here is an example of what it looks like in Webflow (The design is really very simplistic in this Webflow tutorial).