“How do I set up ‘Color swatches’ on my product and collection pages?”

Color swatches are tiny, clickable buttons on your products. Each swatch links to one of your color variants.

On collection pages, the color swatches are not clickable—but they let customers see what color variants they can expect to find when they visit a given product page.

Feature summary

The way Context’s color swatches feature works is as follows:

  1. It looks for all products with a special variant option for swatches.
  2. It tries to match the defined color (like Heather Gray) with an existing swatch image in Context’s assets (called heather-gray.png).
  3. It displays the swatch images as color swatch buttons.

This article goes deeper into what all of that means, and how you can add any swatch that you want.

Setup

Setting color swatches up requires some setup and planning. Everything you need to know is described in the following sections of this article:

  1. Choose a variant option name for your swatches
  2. Create swatch thumbnails
  3. Rename your swatch images
  4. Upload your swatches to Shopify
  5. Add color variants to your products
  6. Enable the “Show color swatches” settings

If you have already added color swatches and want to upgrade to a new version of Context, jump down to the Theme upgrades section of this article.

Choose a variant option name for your swatches

Before anything else, you need to choose which variant option name should be associated with swatches. The name you choose will be special – and it will used to display color swatches if you have them enabled.

If you don’t change the name now, the default name will be used. The default name is Color.

We recommend using a keyword that describes the swatches. For example, if all of your color swatches are colors, use Color. If all your color swatches are materials, use Material or Texture.

From your store’s Customize theme page, go to your Theme settings and select the Product swatches menu.

From here, you can enter your keyword.

After you’ve saved your changes, you are ready for the next step.

Create swatch thumbnails

For each color variant you sell, you need PNG image. We recommend a square, 50 pixel by 50 pixel image, but any small image filled with the color will do.

Create color swatches, step 1

If you already know how to crop photos using a photo editing application (like Photoshop), you should have no trouble creating swatches as PNGs.

If you are less confident with photo editing tool, you can use your Windows or macOS device’s built-in screenshot tool to quickly capture swatches from your existing product images:

Rename your swatch images

Now that you have all of the swatch images you need, you need to rename them to match your color variant names.

For example, if you have a color variant called Gray, you should have a matching swatch called gray.png.

Color variant Swatch filename
Gray gray.png

For colors or patterns with with multiple words, like Heather Gray, your swatch should be called heather-gray.png, where hyphens replace the spaces.

Color variant Swatch filename
Heather Gray heather-gray.png

Here’s some more examples just to be clear:

Color variant Swatch filename
Argyle argyle.png
Blue blue.png
Cotton cotton.png
Harris Tweed harris-tweed.png
Yellow yellow.png

So, whether you’re referencing the color of a fabric, a plastic, a metal – or even the texture and color of a product – you could potentially make swatches for it.

Upload your swatches to Shopify

Now that you have all of the swatch renamed and ready for upload, head to your store’s Customize theme page.

You need to select the Theme actions menu and choose the Edit code option, as shown in the image below.

Customize 'Edit code' menu item

You’ll see a list of folders. Find and select the one called Assets.

Edit code "Assets" folder

This is the folder where we will upload our color swatches to.

The folder should open and reveal a button that says Add a new asset. It opens an upload form that allows you to upload the swatch PNGs from your computer.

Edit code "Add a new asset" action

Once you’ve uploaded all of the swatches, you’re ready for the next step.

Add color variants to your products

The swatches are almost ready to be used. The next step is making sure that any products you want color swatches to appear on have a variant option type that matches the special variant option name you set up earlier. (If you didn’t set it up, the default name is Color.)

More more information about creating and editing product variants, see Shopify’s Variants documentation.

If you’re creating variants on a product for the first time, you should end up with something that looks like this in your product editor, when you scroll down to the Variants section:

Variants, first-time configuration

Once these new variants are created, you will want to edit them individually and assign a correctly colored product image for each one.

If you already have color variants set up, ensure that the color names will match one of the swatches that you uploaded.

Variants, already configured

Don’t forget to Save the product after editing.

Note that if it cannot locate a matching swatch image for a color variant, a swatch is still shown. The color of the swatch is just White.

Enable the “Show color swatches” settings

Now that you’ve set up your products to use color swatches, the last step is to enable the color swatches feature in Context’s theme settings.

Product pages

To enable color swatches on product pages, head to the Customize theme screen and locate the Product pages settings. Ensure that the Show color swatches checkbox is checked.

For more information, see the Product pages article.

Collection pages

To enable color swatches on collection pages, head to the Customize theme screen and locate the Collection pages settings. Ensure that the Show color swatches checkbox is checked.

For more information, see the Collection pages article.

Color swatch pack

To help get you started with color swatches, we’ve put together a pack of over 120 color swatches, ready for you to upload.

📂 Download the Color Swatch Pack

Theme upgrades

If you are upgrading from Context (version 1.1 or greater) and you use the color swatches feature, you need to transfer all of the color swatches to the new version.

Instead of manually re-uploading all of them, you can use Shopify’s ability to download your themes to your computer. Then, you can drag-and-drop all of the swatch files you want to transfer from the current version to the new version.

The Shopify tutorial Add multiple files to your theme assets outlines how you can download the theme and add many assets to it (in this case: those assets are color swatch files).

To quickly summarize the process:

  1. Download your current and new themes from Shopify.
  2. Unzip both themes from their .zip archives.
  3. Move all of the color swatches in the assets folder of the current theme to the assets folder in the new theme. This step is shown in the video below.
  4. Re-zip the themes.
  5. Re-upload the new theme to Shopify.