Color swatches
Old way to add color swatches:
Color swatches are colorful buttons that can be placed on a product page. They replace the traditional drop-down menu and allow customers to ‘click’ on the color button to see the product color.
You can preview color swatches on the Product detail page in the Customizer of the theme. For this, on the Product detail page choose the “Product information” section and click on the “Variant picker” block, then slide the button “Enable color swatches for variant color”, save your changes.
Old way to add color swatches to the product page and featured product section
*To use this feature, you must have variants of product colors. To add more options for buttons, go to the store admin panel and select the page of some product. Then in options, add a new variant and click Save.
In Theme settings, find “Color Swatches” to select different color shades. Check the settings below this screenshot.
1. Enable color swatches (mark checkbox)
To change the standard color for color swatches, mark this checkbox.
2. “Color swatches” rules
Set up the color of your product by typing the correct format.
Explanation: Format: <Color option>: <value>(separated by lines). The color name must match the variant color option name. Example: Rose Gold: #b76e79.
3. Color variant name
In this field, you have the flexibility to replace “color” with various alternatives such as "colour", “palette”, “hue”, “shade”, “tint”, or “tone”, or even write it in another language of your choice.
To ensure functionality, the name in the field must match the name displayed on the product detail page within the variants section. You have the option to edit and add the desired name. The chosen name should remain consistent across all product detail pages within the variants section.
4. Color picker
Click on the “Color picker” circle to choose different color shades. For example, you can use different shades of red or black colors. Then copy the color number and put it into “Color swatches rules” in the correct format.
New way to add color swatches:
Exceptions: Only for Quick view
For correct work of custom quick view popup layout, fill color swatches rules:
Color swatches tab — Theme settings
Check the screenshot without determining color for color swatches in color swatches rules (some swatches do not have a right color, as you can see):
Check the screenshot with determining color for second color swatch in color swatches rules:
Add Color Swatches in a new way — Product Page
In the Shopify admin, assign a category with a Color metafield to a product. Alternatively, the category can appear by default based on the product name.
Navigate to variants and click on Add options...
When the popup appears, select a Color
Click on dynamic source Color
You will see default entries — colors. You can add them, marking the checkboxes and save changes,
or
You can also create new ones by clicking “Add New Entry.”
You can edit default entry after adding
or
Create new entries. Edit the HEX value of the color in the variant and fill appropriate values.
- Do the same for each variant.
- Save the changes.
Preview the applied changes:
You can preview color swatches on the Product detail page in the Customizer of the theme. For this, on the Product detail page choose the “Product information” section and click on the “Variant picker” block, then slide the button “Enable color swatches for variant color”, save your changes.
Instead of color in color swatches can be added product images
For this, do all steps described in a new way of adding color swatches, but instead of color choose select image:
Preview changes on Product page, Featured product and product cards in sections, Collection with products and Search pages
