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.
When the product with its variants is created and customized the customer can select the preferred variant of the product during the purchase.
Managing Product Variants
You can manage each product variant (rename, attach a photo, indicate quantity in the stock, price, and compared price). To do so:
- Tick the checkbox next to the corresponding product variant.
- Click the corresponding action in the top-right corner of the variants to make the necessary changes.
Tip: To delete the product variant, select the product from the list, click the Dotted Menu, and choose Delete.
Editing Product Variants
To edit product variants:
- Click the Dotted Menu and select Edit.
2. Set up the measurement, price, and dimension values in the popup to optimize shipping calculation.
Note: You can assign separate dimensions to each variant when the measurement type is set to Item.
3. Click Save.
Tip:
- Click + New in the popup to add a new measurement, price and dimension values.
- Click the star icon in the top-right corner of the page to set the measurement unit as the default.
- Click the remove icon to delete the measurement unit.
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 Visual Editor by selecting Advanced mode from the mode switcher on the Dashboard top panel, or navigate to Dashboard > Channels > Advanced.
- Open Page on the top panel and navigate to the corresponding Ecommerce page.
- Click the Widgets list on the 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.