Color swatches are visual indicators of the color or visual nature of your product's variants. This could be anything from a simple 'red, green, or blue' to something more complex like a visual finish to your product e.g. 'matte, glossy, iridescent' or 'fishes, tractors, unicorns'.

There are a few ways the theme supports color swatches depending on your needs. These are:

Default colors

This applies to any variant Option enabled as a swatch and will be populated by web standard color references if they match your Option values, saving you time. This method only works with the current web standard color names and may not match your product color exactly. You can see a list of names and their corresponding colors here.

File uploads

File uploads give you the control of exactly how the swatch will look allowing you to show real-life color swatches, patterns, metals, or any reference you want by uploading imagery to your Settings > files area.

Metafields

Allows you to create a field on your product admin pages so you can manage the color code directly from the product details. This is currently restricted to color values but will support images soon.

See below for guides on how to use each method.

Setting up your swatches

1. Set Up 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 add your Option name and values.
   
   Note: When your Option values match the web standard color references exactly, the theme will automatically pull these swatches onto your product pages. Any swatch that doesn't match will be left blank for you to upload a file or metafield (See below).

Example

2. Enable Color Swatches

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, select the Product page.
2. Find the Product form section on this page.
3. Go to the Product options block.
4. Add the name of your Variant to the Color swatch list.

Your color swatches will now be visible on your product page.

Swatches using file uploads

1. Set Up Your Variants 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.

2. Format Your Color Swatch File

In order to successfully upload your own color swatches, the file must have a handlized name that reflects 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.

3. 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 want to upload, and select Open.

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

Swatches using metafields

1. Define your metafield

You can also add metafields to your product variants that can be used as color swatches.

1. Within your Shopify admin, go to Settings.
2. Go to Metafields.
3. Select Variants and click Add definition.
   
   
   
   
4. Provide a name and key for your metafield. In our example, we went for:
   Name: swatches-color
   Namespace and key: swatches.color
5. From the content type select Color.
   
   
   
   

2. Assign metafields to your products

You can now assign your metafields to your product variants

1. Within your Shopify settings, go to Products.
2. Select the relevant product, then click on one of the color variants.
3. Scroll down to the metafield option and select the metafield you defined above.
4. From here, you can either select the correct shade from the color picker or enter your hex reference.

Your color swatches will now be visible on your product page.