Variant picker
In this section, you can decide on the product variants design for the entire store.
Show the single-value option
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 "Square picture" styles to work correctly:
Remove the same option names from the other 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 -> 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 the style:
"Rectangular 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:
"Rectangular picture" border radius
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 "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)
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 brake 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".
Ex.: beige|#EED9C4
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
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.
Ex.: green|https://cdn.shopify.com/s/files/1/0613/7534/8972/files/fav_1.png?v=1688812500
Note! The "Option colors" feature works only for the "Round color" style options" of the variant picker.
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 "Round color" style options" input field.
In the following example, you can view how to customize the option:
Last updated
