Variant picker!!!
In this section, you can decide on the product variants design for the entire store.
Show the single-value option
Decide whether to display the product swatch on the product listing if the product has the only product variant by enabling or disabling the current option.
Note! There are a few requirements that should be completed for the "Round color" and "Square picture" styles to work correctly:
Remove the same option names from the other input fields that do not meet your needs.
For the correct work of the following styles on collection pages make sure to use the "Button" type in Theme settings -> Product -> Variant picker type (Collection item).
To display the required style option on product pages, use the "Button" type in Products -> Product information -> Variant picker.
"Round color" style options
If you want to display the color variants as round options for products on the whole store, use the given input field. Here you can paste the product option name (for example "Color") to add a style:
"Square picture" style options
Paste the product option name (for example "Color") into the input field to change the style of product variants to square colors or images:
"Square picture" border radius
The border radius of color variants can be adjusted on a scale of 0 to 40 pixels, where 0 means to display variants as square options, and 40 is an ellipse.
In the following examples, you can view the boundary values:
Tip: To display the color variants as images instead of the color options, assign a corresponding product image for each color variant in your Shopify admin:
Tip: To replace images and colors for product variants with the color names, remove the product option name (for example "Color") from the input fields ("Round color" style options and "Square picture" style options):
Tip: If you use several product option names (for example "Color", "Pattern", "Material", etc.) for various products in your store, add each option name to the required input field using the line brake as a separator:
Option colors (Filters and variant picker)
The "Option colors" feature works with the color options only.
This option can be helpful in several cases:
if you need to assign a color/image to a missing product variant that is not displayed by default;
to reassign a product variant with a different color/image for an existing color option.
In the following example, you can view how to customize the option:
Image
Last updated