Color Swatch
Use the current global section to customize swatches on the entire store.
Swatch mode
In the Swatch mode drop-down menu, choose how swatches will be displayed in your store. The theme provides three design options: buttons, colors, or variant images.
Below are examples illustrating how each mode may be displayed in a store:
Select the swatches mode. If you pick the image or color mode but see the text value, you should check if product variant has an image. Or if the 'Colors configuration' field has the configuration for this value.
Now, let's go over how to set up each design option variant:
Default
To display buttons with color names, choose Default. Selecting this option hides the color swatches on collection pages and Theme sections.
Ensure the button colors in the theme match the colors specified in the Option values fields in your Shopify admin.
Flat color
Enable the Flat color option to show color swatches for each product variant.
Enter the list of hex color codes in the Colors configuration input field.
Set a comma-separated list of colors. Each entry should be a pair of color name and color HEX code, separated by a ':' character. For example, black:#000000,white:#FFFFFF,blue:#2196F3. Note: The syntax is sensitive, so ensure correct usage of commas and colons to avoid errors. Add as many colors as needed.
To customize colors in the Theme Editor, follow these steps:
Variant's image
To display product images as swatches, use the Variant's image.
Option name(s)
Set the option name to apply color swatches configuration. You may set multiple options with a coma-separate list (example: color,colour,choose color). Please note, that color swatches may be applied only to one product option.
To display a product image for each option, assign images in your Shopify admin:
Colors configuration
Set comma-separated list of colors. Split items with ',' sign. Each item should be a pair of color text and color HEX code separated by ':' sign, like colorText:colorHEXcode. In my example I showed the configuration for three colors, you may set as many as you need. Example: black:#000000,white:#FFFFFF,blue:#2196F3 Please note, that this field is very sensitive to the syntax, one missing coma or semicolon may cause an error.
Show on thumbnails
Tick the option to enable/disable the function.
IMAGE
The available options: Image hover effect, Image ratio.
Last updated