User Guide

Search limit to:

How to show color swatches?

by Admin on Jun 26, 2024

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 ( Product page).