In an e-commerce site, product variants are essential. They allow customers to select different variants of the product on the same product page. These variants can be defined based on color, storage capacity (for tech devices), size (such as shoe size), etc. By using variants, you can avoid having too many pages on your website, which can slow down performance. Today, in this tutorial, we will teach you how to use Webflow in French to add variants to the products on your Webflow e-commerce site.
Note: To adhere to good SEO practices for e-commerce, there should be a unique URL per product and not per variant (the variants of a product should share the same URL as the base product).
Step 1 - Add or Modify a Product in Webflow
Navigate to the e-commerce section of the Webflow interface and go to the product collection (Products).
From this point, you can either create a new product or modify an existing one. If you haven't done so already, fill in the information for each field.
Step 2 - Create New Product Options
At the very end of the form, you will see a section named “Options.”
In this section, you will be able to add an option set (add option set).
Once you click the button to add an option, you will need to define a name for this option as well as the specific options.
For example:
- For smartphones: you might have option names like Storage and Color. The Storage options could be 16GB, 32GB, 64GB, 128GB, etc., and the Color options could be Black, White, Gray, Pink, etc.
- For shoes: you might have a size option with choices like 38, 39, 40, 41, 42, 43, etc.
Step 3 - Fill in the Product Variants Information
Now that you have defined all your options, you can enter all the information, completing every empty field for each variant.
Step 4 - Choose a Default Variant
Next, you will be able to choose a default variant. The default variant is the product that will automatically appear, by default, on the product page, in categories, and more generally on the online store. Variants will be displayed by selecting options, but they won't be immediately visible. To set a default variant, select the one you want and click the star button in the top left: “Set as default.”
Hang tight, you have just a few more steps to go!
Step 5 - Insert the Variant Selection Option in Product Pages
Now, you need to go to the “Product template” page. This template will be used for all your product pages. On this page, wherever you like, you can drag and drop the ECommerce element “Add to cart.” A dropdown menu with options and various variants will automatically generate (along with, of course, the quantity selection, the add to cart button, and the immediate purchase button).
All that’s left is to customize this variant functionality using the Style tab in Webflow. Here’s an example of how it looks in Webflow (the design is quite simple for the purposes of this Webflow tutorial).
There you go, you now know how to add customized variants to the products on your Webflow e-commerce site.
If you wish to launch your online store on Webflow, our team would be delighted to assist you with your project!
