Color Swatch Images

Overview

Within your theme settings, you can choose for color variants to be displayed as color swatches on your product page.

Steps

  1. Within your Shopify admin, go to Sales Channels > Online Store > Themes.

  2. Click your theme, and select Customize.

  3. On the left-hand menu, select Theme settings.

  4. Scroll down to select Product.

Theme setttings > Products

How to Upload

The method for upload will depend on the theme version you're currently working with.

This is only available for Envy v.26.0.1 and older theme versions.

Please navigate to:

  1. Admin

  2. Online Store

  3. Envy

  4. Actions

  5. Edit code

  6. Assets

  7. Use the 'Add a new asset option' here:

Once on this menu, upload your .png image.

For later theme versions

Go to:

  1. Settings → Files → Upload files

  2. Upload your .png image

Refresh your Product page and you should now see your custom color pulling through!

Show Swatches

Under Product, you can choose to add swatches to your product pages by going to Show swatches.

Theme settings > Products > Show swatches

Disabling Swatches

The Show swatches entry field is only available for Envy v.27.0.1 and above.

If the Show swatches entry field is left blank, a product's variants are not displayed as swatches.

Show swatches entry field.

Instead, the variants are displayed as a drop-down menu.

Before swatches have been enabled; variant drop-down menu.

Enabling Color Swatches

By entering the name of a product option (e.g. 'Color') into the Show swatches entry field, you can turn your variants into color swatches.

Product option labelled 'Color'.

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.

For versions older than Envy v.27.0.1, swatches referencing the HEX range of color names will only be pulled onto your product page is the title of your options is 'Color' (in the American spelling).

Example of color swatches.

Uploading Custom Color Swatches

If you would like to use a custom image as your color swatch you can do so by uploading an image to your store.

We recommend using images that are 100x100px, and keeping them the same to ensure the aspect ratio is the same.

Your image must have a handleized name reflecting the color it represents, and have a .png extension.

For example, if you have a color called ‘Déjà Vu Blue’, then name your image deja-vu-blue.png.

Another example, if your color is ‘Blue/Gray’, then name your image blue-gray.png.

A more simple example, if your color is ‘Black’, then name your image black.png.

Your swatch file names must be lower case - they will not register as swatches in any capital letters are present.