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

Momentum supports color swatches in a few ways. Choose one that best meets your needs.

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 let you control 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

Metafields let you 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 variants

Follow these steps to create product page swatches with default colors.

1. Within your Shopify admin settings, go to Products.
2. Select a product.
3. Scroll down to Options.
4. Click the Option name field and select Color on the drop-down menu.
5. Enter a value (e.g. Navy).
6. Repeat steps to add more colors.
7. Click Done.
   
   
   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 is left blank, which means you can upload a file or use a metafield (see below).

Example

Scroll down to the Variants heading. The theme automatically adds color variants to the list. 

2. Enable color swatches

To pull the color from the Options/Variants settings over to swatches on the product page, edit your product theme settings.

1. Within your theme editor, select the Products page.
2. Click the Product form section.
3. Click the Product options block.
4. Go to the side panel on the right.
5. Add the name of your variant to the Color swatch list.
6. Click Save.

• The product page displays the color swatch(es).

Swatches using file uploads

1. Set up variants

Follow these steps to create product page swatches with a file.

1. Within your Shopify admin settings, go to Products.
2. Select a product.
3. Scroll down to Options.
4. Click the Option name field and select Color on the drop-down menu.
5. Enter a value (e.g. purple)
6. Repeat steps to add more options.
7. Click Done.

2. Format the swatch file

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 100 px to ensure an even aspect ratio.
2. Ensure that your file is in a .png format.
3. Name the file after the color.
4. Replace spaces with hyphens (if required).
5. Remove all capital letters from the file name.
   
   

3. Upload the file

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 click Open.

• The product page displays the color swatch(es).

Swatches using metafields

1. Define a metafield

Follow these steps to create product page swatches with metafields.

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

2. Assign metafield to a product

You can now assign the metafield to a product variant.

1. Within your Shopify settings, go to Products.
2. Select a product.
3. Scroll down to the Variants heading and click Add variant.
4. On the next page, fill in the Options fields. In this case, we enter Pink an S (for small).

5. Scroll down to the Metafields heading.
6. Locate the color field.
7. Use the color picker to select a color or enter a hex reference.
8. Click Save variant.
9. Repeat steps to add variants (e.g. different sizes with the same color).

• The product page displays the color swatch(es).