Help Center

How do I set up color swatches?

Updated

To set up color swatches, enable the swatch setting in the area where you want swatches to appear, then make sure your variant option is named Color or Colour. If you use a different option name, update the Color swatch trigger in the language editor. If a color name does not match a standard HTML color, upload a custom .png swatch image in Shopify Files.

Color swatches display product color options as small clickable color chips or images, making it easier for customers to choose a variant visually.

swatches on product page

Note: If you are using a newer theme version that supports Shopify’s native swatch feature, refer to the updated guide for a simpler setup process.

Where can I enable color swatches?

You can enable color swatches in three different areas of the theme:

  • product page
  • collection pages and search results
  • collection filters

How do I enable color swatches on the product page?

To show color swatches on the product page:

  1. Open the Theme editor.
  2. From the page selector, go to Products > Default product.
  3. In the left sidebar, open the Product section.
  4. Click the Variant picker block.
  5. Enable Enable color swatches.

How do I enable color swatches on collection pages and search results?

To show color swatches on collection pages, search results, and sections such as Featured collection:

  1. Open the Theme editor.
  2. Click Theme settings.
  3. Select Product tiles.
  4. Enable Enable color swatches.

How do I enable color swatches in collection filters?

To show color swatches in collection filters:

  1. Open the Theme editor.
  2. From the page selector, go to Collections > Default collection.
  3. In the left sidebar, click the Product grid section.
  4. Enable Enable color swatches.

How do color swatches work?

Once enabled, the theme looks for a variant option named Color or Colour.

If your store uses a different option name, such as Shade or Pattern, you need to update the Color swatch trigger in the language editor so the theme knows which option should display as a swatch.

How do I change the color swatch trigger?

To change the color swatch trigger:

  1. Click the ••• button beside your theme.
  2. Select Edit theme content.
  3. Open the Products tab.
  4. Under General, find Color swatch trigger.color swatch trigger in the language editor
  5. Replace the default word with the term you use for your color options, such as Shade or Pattern.
  6. Save your changes.
     

If you are using a theme trial, Shopify may limit access to the language editor until the theme is purchased. For testing, it is best to keep the variant option name as Color.

When do color swatches appear automatically?

The theme compares your variant names to standard HTML color names.

If the variant name matches a standard HTML color name, the swatch can appear automatically.

Examples:

  • Green can display automatically as a swatch
  • Heather grey usually requires a custom swatch image

How do I add custom color swatches?

If a color name does not match a standard HTML color name, the theme looks for a custom swatch image in your Shopify files.

To add a custom color swatch:

  1. Create the swatch image as a .png file.
  2. Upload it to Content > Files in Shopify.
  3. Name the file based on the variant name using the correct filename format.

How should custom swatch files be named?

Use these naming rules for custom swatch files:

  • use lowercase letters
  • replace spaces or symbols with hyphens
  • save the file as a .png

Examples:

  • Green becomes green.png
  • Heather grey becomes heather-grey.png

Because Shopify can have issues with special characters in filenames and URLs, this feature supports English characters only. Using standard English alphabet characters is recommended.

Important: Custom swatch images must be uploaded as .png files. .jpg files will not display as swatches.

Why are my color swatches not showing?

If your color swatches are not appearing, check the following:

  • Is Enable color swatches turned on in the exact area where you want swatches to display?
  • Is your variant option named Color or Colour?
  • If not, did you update the Color swatch trigger in the language editor?
  • Does the variant name match a standard HTML color name?
  • If not, did you upload a custom .png swatch image with the correct lowercase, hyphenated filename?

What are the limitations of color swatches?

Variants that share the same name are treated as the same value by the theme. This means they will use the same swatch and the same linked variant image.

For example, if multiple variants are all named green, the theme cannot display different swatches or images for each one.

To show different swatches or images, each variant must have a unique name.

Instead of repeating green, use more specific names such as:

  • Forest Green
  • Mint Green
  • Green Leather
  • Matte Green
  • Green Linen

FAQ about color swatches

What variant option name is required for color swatches?

  • By default, the theme looks for Color or Colour.

Can I use a different option name for swatches?

  • Yes. Update the Color swatch trigger in the language editor to match the option name you use, such as Shade or Pattern.

What file type should I use for custom swatches?

  • Use a .png file.
  • Will .jpg swatch files work?
  • No. .jpg files are not supported for custom swatches in this setup.

Why do multiple variants show the same swatch?

  • If multiple variants use the same name, the theme treats them as the same value. Each variant needs a unique name to display a different swatch or image.

Why do some colors show automatically while others do not?

  • Standard HTML color names can display automatically. Custom color names usually need a custom swatch image.

Related articles