Variant picker
In this section, change the design of the product variants and color filter for the entire store.
Product cards
Tip: For the "Button" type, decide the button style in Products -> Product details -> Variant picker.
Show variant picker Control the display of variant pickers for product cards by activating the option. This option enables additional settings related to this feature.
Type Set the product variant type displayed on store-wide product cards using the "Dropdown" or "Button".
Show single-value options Controls whether swatches are displayed on product listings for products that have only a single option value or variant. Enable this setting to show swatches for all products, regardless of the number of available variants.
Picker button styles
The settings are applied to product cards and product pages store-wide.
Show tooltips for colors and images Enable this option to display a tooltip with a color name when hovering 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 options" and "Rectangular swatch options" types to work correctly:
Remove the same option names from the other input field that do not meet your needs.
To apply the provided styles for collection pages, ensure the global setting is set to "Button".
To display the required style option on product pages, use the "Button" type in Products -> Product details -> Variant picker.
Round color options Paste the product option name into the input field to display color variants as round swatches. Example: Color
Rectangular swatch options
Tip: To display swatches as images instead of colors, assign a corresponding product image for each product variant in your Shopify admin.
Paste the product option name into the input field to change the product swatches style to rectangular colors or images. Example: Color
Corner radius
Adjust the corner radius of product swatches from 0 to 40 pixels. A value of 0 displays square corners, while 40 pixels creates a pill-shaped appearance.
In the following examples, you can view the boundary values:
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 options" and "Rectangular swatch 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.
The following color settings help to colorize the text swatches:
Background / Border Change the base and border colors of unselected product variants.
Background on hover / Border on hover Applied to the selected or hovered over product variant.
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.
Option color mappings
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, use the described values:
Color codes. Add the color hex code using the format "color|css code".
Example: Purple|#9F2B68
Links. To display an image for a filter item or product variant, follow the 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 color mappings" for product variants, enter the product option name into the "Round color options" input field.
Copy the link and paste it into the "Option color mappings" input field. The format of the used custom option should match the value: color|url.
Example: Black|Shopify link
Last updated