Back to the index

Swatches

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

Here’s how Ira’s color swatches feature works:

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 Shopify’s Files (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 Ira, 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 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.

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:

• Windows: How to use Windows Snipping Tool
• macOS: Take a screenshot on your Mac

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 swatches renamed and ready for upload, head to your Shopify Admin page.

In the Search field, look up “files” to go to the Files page.

In the top-right corner, click Upload Files.

This opens an upload form that allows you to upload the swatch PNGs from your computer.

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:

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.

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 Ira’s theme settings.

1. From your theme’s “Customize” screen, choose Product pages from the pages drop-down menu at the top of the screen.

   

2. Choose the Product pages section of the settings.

3. Locate the Show swatches checkbox and check it.

4. Use the Save button in the top-right corner when you are finished editing.

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 Ira 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.