Product -> Variants
In this section, you can configure the product variants design.
Last updated
In this section, you can configure the product variants design.
Last updated
Theme settings -> Product -> Variants
If you enable this option, the advanced design for the product variants (color and size) will be shown:
Please note, this section will be available only with the active “Enable advanced design for variants”.
This option enables you to add a “Product variants” global section, where you can add and customize additional product content. Once you enable it, go to Sections and you will find this block:
How to customize this section, you can find here.
This option allows you to hide the product variants from the product and collection pages if they are out of stock or to show them as unavailable. E.g., if a jacket is available in sizes: 30, 32, 34, 36, and 38, and all the jackets with the sizes 32 and 34 are sold out, these size variants will be hidden on the jacket's product page, and the product listing, or shown as unavailable if you deactivate the option.
This option allows you to auto-select product variants. If you select the option “Enable”, the “Add to cart” button will be shown for all products.
Once you select one of the options: “Only first option selected”, “First and second options selected” or “Disable”, the “Add to cart” button will be changed to the “Select options” button for the products that have more product variants. E.g., if the product has Color, Size, and Material product variants and you selected the option “First and second options selected”, the “Add to cart” button will be changed to the “Select options” button because this product has one more product variant.
You can also decide what product variants to select automatically by filling in this field:
By default, the product images are displayed in the same sequence as they were added in the backend. If you enable this option, the product images on the collection page will be listed according to the product variant. For e.g., if you have the first product variant as unavailable (out of stock), it will be displayed the next product image for the product variant that is in stock.
By default, the product images are displayed in the same sequence as they were added in the backend. If you enable this option, the product images on the product page will be listed according to the product variant. For e.g., if you have the first product variant as unavailable (out of stock), it will be displayed the next product image for the product variant that is in stock.
Here you can decide which product variants should be shown on the collection page. Here are three options available:
Show all options (Here all product options will be shown on the collection page, like color, size, and material);
Show only the first option (Here only a first product option will be shown on the collection page, e.g.: color. Once you choose this option, the button “Add to cart” transforms to the button “Select options”);
Show first and second options (Here only a first and a second product option will be shown on the collection page, e.g.: color and size. Once you choose this option, the button “Add to cart” transforms into the button “Select options”).
Example of “Show only first option”:
This option allows you to change a product image when hover the mouse cursor over the product's swatch.
In this section, we will show you, how you can configure the option types for the product. You can show such product options as 'Text', 'Large Text', 'Circle color', 'Circle image', 'Square color', 'Square image', or 'Select' - a dropdown list.
If you prefer the product´s color options to be shown as a circle color, choose this option. Please, use a separator '|' if needed.
IMPORTANT! Make sure, that the option name has a CSS color value.
You can configure custom values in the “Product variants” section. More information you can find here.
In our example, we have used “Select color|Color|Color” to show you how the different option names can be written in one field using a separator “|”. This might be irrelevant for you if your product´s variant doesn't have different names for each product. In this case, you can simply write “Color” (your option name). In order to enable the option type “Circle color”, simply write “Color” in the field for Option type ‘Circle color’ and you will get this:
If you prefer the product's color options to be shown as a circle image, choose this option. Please use a separator '|' if needed. You should configure images per each product variant. In our example, we have used “Select color|Color|Color” to show you how the different option names can be written in one field using a separator “|”. This might be irrelevant for you if your product´s variant doesn´t have different names for each product. In this case, you can simply write “Color”. In order to enable the option type “Circle image”, simply write “Color” in the field for Option type ‘Circle image’ and you will get this:
If you prefer the product's color options to be shown as a square color, choose this option. Please use a separator '|' if needed. Make sure, that the option name has a CSS color value. You can configure custom values in the “Product variants” section. In our example, we have used “Select color|Color|Color” to show you how the different option names can be written in one field using a separator “|”. This might be irrelevant for you if your product´s variant doesn't have different names for each product. In this case, you can simply write “Color”. In order to enable the option type “Square color”, simply write “Color” in the field for Option type ‘Square color’ and you will get this:
If you prefer the product´s color options to be shown as a square image, choose this option. Please use a separator '|' if needed. You should configure images per each product variant. In our example, we have used “Select color|Color|Color” to show you how the different option names can be written in one field using a separator “|”. This might be irrelevant for you if your product´s variant doesn´t have different names for each product. In this case, you can simply write “Color”. In order to enable the option type “Square image”, simply write “Color” in the field for Option type ‘Square image’ and you will get this:
Here you can decide which option type will be shown as a Combobox. In our example, we will use the option “Size”:
This option allows you to show the product's variants not as images, but as text. In our example, we show you how it works for “Color”. Just write “Color” in the proper field and save the changes:
