How to Enable Color Swatches

Automatic Method (With HEX Color Codes)

Step 1: Set Your Variants Up Correctly

In Envy, when your variant names exactly match colors from the HEX range of color names (e.g. 'Deja Vu Blue'), the theme will automatically pull these swatches onto your product pages.

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.

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, scroll down the left-hand menu until you reach Theme settings.

  2. Scroll down to select Products.

  3. Go to the Enable 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.

Manual Method (With .png Files)

Step 1: Set Your Variants Up 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 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 2: 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 wish to upload, and select Open.

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

Still need help?

Email our friendly support team with your query: [email protected].

So that we can best help, please ensure you provide key details including:

  • What your query is about

  • Which theme you are using

  • Your .myshopify.com URL

  • Your .myshopify.com password (if the shop is locked for visiting customers)

  • Any screenshots that may help us resolve your query as quickly as possible.