Products with variants are products that have different available versions or options, each with its own unique set of features, specifications, or attributes. They are based on the same model but differ in some aspects from one another. For example, if you sell a T-shirt, you can offer various variants of a T-shirt, such as different sizes, colors, and styles. Each combination of size, color, and style is considered a product variant and each has its name, price, and quantity. Product variants allow you to cater to various customer preferences, or specific requirements without creating an entirely new product from scratch. This helps increase product availability, customization options, and customer satisfaction. Product variants make the purchasing process more flexible, as customers can easily find and select the exact product they desire.
Creating a Product Variant
To create a product variant:
- Go to Commerce > Fields to create a field with its options for the corresponding product (e.g. Color with the following options: black, red, and blue).
- Go to Commerce > Product Types, select the product type (e.g. Physical Product), and create a new product type (e.g. Clothes). In the product form that opens create a field group and assign the field to the newly created field group.
Note: Once you have assigned the field group to the corresponding product type, all the product items under the product type can have the assigned variants. For example, all the items under Clothes (such as dresses, T-shirts, skirts, etc.) can have a Color variant with options.
3. Go to Commerce > Products to create or edit a product (e.g. T-shirt).
4. Activate Variants and click Manage Variants in the product form if the product has more than one variant (e.g. the T-shirt is available in various colors).
5. Click + Manage Options and select the available options from the popup that opens.
Once you have selected the variants, your product with its variants is generated in the Variants field. You can manage each product variant (rename, attach a photo, indicate quantity in the stock, price, and compared price).
Tip: To delete the product with its variant, select the product from the list, click the Dotted Menu, and choose Remove.
When the product with its variants is created the customer can select the preferred variant of the product during the purchase.
Adding Product Variant Widgets
Once you have created a product variant, a variant-related widget is automatically generated in the Visual Editor. For example, if you have created a Color variant, a widget of the same name is generated. You need to add the widget to display the variant on the website.
To do so:
- Go to the Visual Editor from the Sales Channels on the Dashboard Left Panel.
- Go to Ecommerce pages on the Top Panel and select the corresponding page.
- Navigate to the Widgets list on the Visual Editor Left Panel.
- Type the widget name in the search bar.
- Drag and drop the widget from the list onto the desired crafting area of the Layout Canvas.
Configuring Product Variant Widgets
Once you have added the widget, you can configure its Style and Settings according to your preferences on the Property Panel.
To configure the widget:
- Go to Styles to make the necessary configuration of principal styling features (see Global Styles).
- Go to Settings to modify the visibility of the widget on your website. Select who can view the widget according to the customer’s location, session status, type of used device, browser, language preference, etc. (see Visibility Settings).
💡 If you have questions or concerns, contact us directly via the Live Chat box, in the lower right corner. Our Support Team will provide you with top-notch quality support 24/7.