Variant picker
In this section, you can decide on the product variants and color filter design for the entire store.
Product card
Tip: For the "Button" type, decide the button style in Products -> Product information -> Variant picker.
Control the display of variant pickers for product cards by activating the "Show variant picker" option. The option activates additional settings related to this feature.
Type
The current option allows you to choose the product variant type on collection pages and for collections in sections using "Dropdown" or "Button" settings.
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.
Picker button styles
Enable tooltip
Enable this option to display a tooltip with a color name when hovering the mouse over the color variant on product cards and product pages. This feature helps enhance user experience by providing additional information about each color variant, ensuring a more informed selection process.
Note! There are a few requirements that should be completed for the "Round color" and "Rectangular picture" types to work correctly:
Remove the same option names from the other input field that do not meet your needs.
For the correct display of the following styles on collection pages, ensure to select the "Button" type in the current global section above.
To display the required style option on product pages, use the "Button" type in Products -> Product information -> Variant picker.
Round color
To display color variants as round options for products in the entire store, use the given input field. Here you can paste the product option name (for example, "Color") to add the style:
Rectangular picture
Paste the product option name (for example, "Color") into the input field to change the style of product variants to rectangular colors or images:
Corner radius
The corner angles of product variants can be adjusted on a scale of 0 to 40 pixels, where a value of 0 displays variants as squares, while 40 pixels renders them as ellipses.
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" and "Rectangular picture":
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:
The following color settings help to colorize the variant pickers:
Apply the "Background" color to change the base color of the text variant pickers, such as "Size".
Change the border color of unselected product variants by specifying a color in the "Border" picker. This configuration can be applied to the text variant pickers.
Use the "Hover background" and "Hover border" items to change the colors of the selected product variant, as well as the product variants that are hovered over with the mouse.
Picker buttons and Filters
This option can be helpful in several cases:
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:
Add the hex code of a color by using 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
Tip: To display the settings that apply to "Option colors" for product variants, enter the product option name into the "Round color" input field.
Copy the link and place it into the "Option colors" input field. The format of the used custom option should match the value: color|url.
Eg.: Multicolor|Shopify link
Last updated