How do I show color swatches?

You can use

Simple color swatch

You can use color names for swatches. For example, you can use black, white, red, yellow etc.

  1. Go to Shopify admin -> Theme customization -> Theme settings -> Product -> Style configuration -> Swatch type for colors. Set this field to Color swatch and save.
  2. Go to Shopify admin -> Online Store -> Products
  3. Open a product you are going to add color variants.
  4. Go to variants block and enable This product has multiple options, like different sizes or colors option.
  5. Input Color(or Colour) in the option name. If your language is not English, then append [color] at the end of the option name. For example, in French, the option name can be: Couleur[color]
  6. Add variant names by separating comma(,).

Color names are limited in web. Please use web color names that are supported by the web.
If you have to use a color name which is not supported in web, or if you need a custom color then refer the next swatch styles in this documentation.

Custom images for the color swatches

You can upload your custom images and then use them for product color swatches.

  1. Go to Shopify admin -> Theme customization -> Theme settings -> Product -> Style configuration -> Swatch type for colors. Set this field to Custom image swatch and save.
  2. Go to Shopify admin -> Settings -> Files
  3. Upload your custom images(Must be .png file extension, Name of the files should be exactly the same as color names and downcased. For example if you want to show "Light Gray" or "Big-blue", then name the file as "lightgray.png" or "big-blue.png" and then upload it)
  4. Go to the product edit page.
  5. Find variants block and enable This product has multiple options, like different sizes or colors option.
  6. Input Color(or Colour) in the option name. If your language is not English, then append [color] at the end of the option name. For example, in French, the option name can be: Couleur[color]
  7. Add color name in the option value and then append "[image]". For example if you uploaded "lightgray.png", then name the color as "Light Gray[image]" or "light gray[image]".

Variant images for the color swatches

You can use variant images for product color swatches.

  1. Go to Shopify admin -> Theme customization -> Theme settings -> Product -> Style configuration -> Swatch type for colors. Set this field to Product variant image and save.
  2. Go to the product edit page.
  3. Find variants block and enable This product has multiple options, like different sizes or colors option.
  4. Input Color(or Colour) in the option name. If your language is not English, then append [color] at the end of the option name. For example, in French, the option name can be: Couleur[color]
  5. Add color name in the option value. Assign images for each variants.