Welcome to the Eight Themes Docs

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.

 

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, select the Product page.
  2. Find the Product section on this page. 
  3. Click on the Product options block.
  4. Change your Product variant style to Swatches.

Screen_Shot_2022-05-11_at_1.34.12_PM.png

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

 

Manual Method (With .png Files)

Step 1: Enter Your Code's Theme Files

 

  1. Within your Shopify admin settings, go to Online Store > Themes.
  2. Select your Flow theme version.
  3. Within the Actions drop-down menu, select Edit code.

 

Screen_Shot_2022-05-11_at_9.51.56_AM.png

 

Step 2: Format Your Color Swatch File

 

In order to successfully upload your own color swatches, the file must have a handleized name which reflect 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 ‘Blue/Gray’, name your image blue-gray.png.

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

Step 3: Upload Your Color Swatch File as an Asset

 

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

 

  1. Within your theme's code, scroll down to Assets.
  2. Select Add a new asset.
  3. Select Choose file, and choose the swatch file you wish to upload.
  4. Select Upload asset.

 

Screen_Shot_2022-05-11_at_10.31.01_AM.png

 

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

Was this article helpful?