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 only one 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 other input field 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 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 rectangular 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 "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:
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 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 a 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, place the product option name into the desired input field.
In the following example, you can view how to customize the option:
Enable tooltip
Enable this option to display a tooltip with a color name when hovering the mouse over the color variant on the Product page. This feature helps enhance user experience by providing additional information about each color variant, ensuring a more informed selection process.
Last updated