Eight Themes Support Documentation

How to add color swatches

Color swatches - Introduction

Color swatches are used to represent all available color variants of a product. This handy visual tool allows customers to compare colors, and easily switch between them, without leaving the product page.


Flow Color Swatches 1.png

Color swatches can be added using two methods:

  1. Automatically (using Hex color codes and names)
  2. Manually (using .png files)

For most stores, the automatic method is ideal - provided you know the Hex color. Overall, it takes less time and effort to set up color swatches this way. 

The manual method requires more steps but allows for more flexibility. Firstly, you'll need to create .png files to represent your color swatches. Secondly, you'll have to add the files as assets to your theme's code. 

Let's take a look at each method below.

Method 1: Automatically (using Hex colors)

When your color variant names or codes exactly match colors from the hexadecimal (Hex) range of colors, your theme will automatically pull the correct swatches onto your product pages.

This means that your variants must be labelled either:

  • The exact name that matches a Hex color code (e.g. Navy)

Color Swatch HEX Names.png

Flow Color Swatch Names.png


  • Or the Hex color code (e.g. #000080)

Variants with HEX Codes.png

Color Swatches Hex Codes.png

However, please be aware that the Hex codes will display on your store - which isn't always the most suitable choice for audiences.

Tip: For a list of Hex color names and codes, click here.


Part 1. Setting up your variants correctly

As mentioned above, it's essential that variant colors are correctly set up on your product. To add your color variants:

Step 1: Within your Shopify admin settings, go to Products.

Step 2: Select the product you wish to enable your color swatches on.

Step 3: Scroll down to Variants, and ensure that the names of your variants exactly match either the color codes or the Hex color names.


Part 2. Enabling color swatches

To display your color swatches on your product page, you need to ensure Swatches is enabled. This is done via the Product page template:

Step 1: Within your Theme Editor, select a Product page template.

Step 2: Click the Options block within the Product section.

Step 3: Change your Variant style to Swatches.

Enable Swatches Product Options Block.gif

Step 4: Save your changes. Your color swatches will now be visible on your product page!

Method 2: Manually (using .png files)

If you prefer to have more control over your color swatches, or you have mixed colors, you can upload your own swatches using the steps below:

Part 1. Format your color swatch file

In order to successfully upload your own color swatches, your files must follow some rules. Use the steps below as a guide:

Step 1: Create an image that is 100x100 pixels in size to ensure an even aspect ratio.

Step 2: Ensure that your file is in .png format.

Step 3: Name your file the exact same title as the name of your variant, but replace spaces with hyphens (-).

Step 4: Remove all capital letters from your file name.

For example:
  • If your color is called ‘Sky Blue’, name your image sky-blue.png

  • If your color is ‘Blue/Gray’, name your image blue-gray.png

  • If your color is ‘Black’, name your image black.png

    Custom Swatch File.png


Part 2. Add your variant to your product

Use the steps outlined in Method 1 to add your variant and ensure swatches are enabled on your product template. However, because you're adding a custom swatch, you won't need to use a Hex color name or code. You can label your variant whatever you want. E.g. Sky Blue.

Custom Swatch Variant Name.png


Part 3. Go to your Theme's code files

Step 1: Within your Shopify admin dashboard, go to your Online Store and click Themes.

Step 2: Locate the theme version you use.

Step 3: Click the button containing three dots and select Edit code.

Flow Edit Code.png

Part 4. Upload your color swatch file as an asset

Finally, you can upload your desired color swatches to your theme's code:

Step 1: Within your theme's code, scroll down to Assets.

Step 2: Select Add a new asset.

Step 3: Click Add file and choose the swatch file you wish to upload.

Upload New Asset.png

Step 4: Click Done when you're finished. Your color swatches will then be displayed on your product page!

Custom Swatch Example.png

Was this article helpful?