Variant picker
In this section, you can decide on the product variants design for the entire store.
Last updated
In this section, you can decide on the product variants design for the entire store.
Last updated
By using the provided option, arrange whether to display the product swatch on the product listing if the product has the only product variant.
Note! There are a few requirements that should be completed for the "Round color" and "Rectangular picture" styles to work correctly:
Remove the same option names from the another input field that does 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 -> .
To display the required style option on product pages, use the "Button" type in Products -> Product information -> .
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 the style:
Paste the product option name (for example, "Color") into the input field to change the style of product variants to rectangular colors or images:
The corner angles of product 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 product 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 "Rectangular 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 break as a separator:
This option can be helpful in several cases:
if you need to assign a color/image to a missing color variant or filter item that is not displayed by default;
to reassign a product variant or filter item with a different color/image for an existing color option.
Tip: Use the line break as a separator when adding a new value.
To set the desired colors or images for filter items and product variants, you can use such values:
color codes
If you want to add the hex code of color, use the format "color|css code".
Eg.: Green Pearl|#134D24
links
To display an image for a filter item or product variant, you should follow the next steps:
Step 1
Go to your Shopify admin -> Content -> Files and upload a new file.
Step 2
Copy the link and place it into the "Option colors (Filters and variant picker)" input field. The format of the used custom option should match the value: color|url.
Eg.: Multicolor|Shopify link
To display settings applied to the "Option colors (Filters and variant picker)" for the product variants, convince to place the product option name into the desired input field.
In the following example, you can view how to customize the option:
