Color swatches is a feature which allows admin to show products’ color variants as swatches on product cards and product information sections.
1. How to set up color swatches
Step 1:
First, go to Theme settings > Product swatches
Step 2:
On configuration "Swatches type on product card" > select Color
Step 3:
Fill in the name of the product option that you've set as color variant in all existing languages in Color option name.
For example, in the product detail page you have the “Color” option as color variants, fill “Color" into the Color option name field. If your site uses multiple languages and the option name is different for each language, input names in all languages in the field (e.g. “Colour” for French, “Farbe” for German…).
Step 4:
After Step 3, Shopify by default provides the basic colors to show as swatches (e.g. Blue, Black…). In case the product's colors are different from those basic colors, the color swatch will be shown as blank swatch.
To cover this, Eurus enables merchants to have all ranges of colors to be color swatches. In the Color swatch values field, input values based on this format: <option value>:<color code>
For example, you have the colors: Azul, Rosado, Beige, Fucsia
You need to fill in:
- Azul:#A3D1ED
- Rosado:#E4C6C7
- Beige:#E0CEB8
- Fucsia:#B85996
Especially, we also support custom images to be color swatches. Simply go to Content > Files and upload the color swatch image(s). Then in Theme editor > Theme settings > Product swatches > Color swatch values, input values based on this format: <option value>:<image name>, with <image name> being the name of the image file you have uploaded to Content > Files.
For example:
- Azul:azul-image.png
-
Rosado:rosado-color.jpg
2. How to show color swatches on product cards
After having finished the setup above, check the checkbox Enable on product cards. Color swatches will then be enabled on all product cards on all pages and sections.
How to show color swatches on product page and product information sections
To enable color swatches on each of the product section/page, go to the section/page and look for the Enable color swatches checkbox in the section’s setting (e.g.in Product page).
