Eight Themes Support Documentation

Search

How to Upload Color Swatches

Automatic Method (With HEX Color Codes)

Step 1: Set Up Your Variants Correctly

 

When your variant names exactly match colors from the HEX range of color names, the theme will automatically pull these swatches onto your product pages.

This means that your variants must be named either:

 

  • A HEX color code (e.g. '#35608A')
  • The exact name that matches a HEX color code (e.g. 'Deja Vu Blue')

 

To edit your variants:

 

  1. Within your Shopify admin settings, go to Products.
  2. Select the product you wish to enable your color swatches on.
  3. Scroll down to Variants, and ensure that the names of your variants exactly match either the color codes or the HEX color names.

 

Example A

Screen_Shot_2022-05-11_at_12.04.22_PM.png

 

Example B

Screen_Shot_2022-05-11_at_12.07.31_PM.png

 

Step 2: Enable Color Swatches

 

When your color swatch settings have been left blank, your color swatches will not appear on your product page.

Screen_Shot_2022-05-11_at_11.55.52_AM.png

To pull the colors that you have referenced within your Variants settings over to swatches on your product page, edit your product theme settings.

 

  1. Within your theme editor, scroll down the left-hand menu until you reach Theme settings.
  2. Scroll down to select Products.
  3. Go to the Show color swatches entry field.
  4. Enter the name of the type of Variant you wish to add swatches to - e.g. Color.

 

Your color swatches will now be visible on your product page.

 

Screen_Shot_2022-05-11_at_11.54.14_AM.png

 

Manual Method (With .png Files)

Step 1: Set Up Your Variants Correctly

 

  1. Within your Shopify admin settings, go to Products.
  2. Select the product you wish to enable your color swatches on.
  3. Scroll down to Variants, ensure that the correct variants are in place, and take note of what you have named them.

Step 2: Format Your Color Swatch File

 

In order to successfully upload your own color swatches, the file must have a handleized name which reflects the color it represents.

 

  1. Use an image that is 100 x 100px to ensure an even aspect ratio.
  2. Ensure that your file is in a .png format.
  3. Name your file the exact same title as the name of your variant, but replace spaces with hyphens.
  4. Remove all capital letters from your file name.

 

Example:

  • If your color is called ‘Déjà Vu Blue’, name your image deja-vu-blue.png.

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

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

Step 3: Upload Your Color Swatch File

 

You can upload your desired color swatches in a .png format.

 

  1. Within your Shopify admin, go to Settings.
  2. Go to Files.
  3. Select Upload files, choose the swatch file you want to upload, and select Open.

 

Screen_Shot_2022-05-11_at_11.48.41_AM.png

 

Your color swatches will then be displayed on your product page.

Was this article helpful?