Use color and option swatches

Space: Using color and option swatches

Summary

---

Swatches are used to make variant selections easier and more intuitive for customers when they are selecting an option with color. Swatches appear throughout your theme in various places and can be used with custom images or hex code colors.

Using swatch options

---

In order to display swatches on a product page or within a product card we can use metafield connected variant options. This might sound complicated but it's super easy to setup and works great out of the box.

1. Find a product you want to update.
2. Update the "Category" field to match your product.
3. Add a new option like "Color" or "Material".
4. Ensure the option is connected to a metafield.

From here you'll be able to change the hexcode or image of each swatch by clicking into it.

Using swatch filtering

---

Your collection page filtering can be customized from the Shopify Search and Discovery app. Using this app you can add new filters and customize how they appear on your theme.

Add swatch filter from metafield

Shopify has recently made a number of improvements to metafields and how they work with swatches. This is great news for us because now swatches are much easier to manage and update.

Create metaobject for your swatch

1. Navigate to your Shopify settings page then click "Custom data".
2. Scroll down to Metaobject definitions then click "Add definition".
3. Add a name and description to your metaobject.
   • You can use any name or description. E.g. "Swatch"
4. Add three fields to your metaobject.
   • Label, color and image.
   • Label should be a required field using "Single line text" - Make sure to select "List of values" after clicking single line text.
   • Color is not required and uses "Color".
   • Image is not required and uses "File" with "Accepts specific file types - Images" selected.

Create metafield to link to metaobject

We now have to assign values so data is populated for our new metafields.

1. Navigate to your Shopify settings page then click "Custom data".
2. Find and click "Product".
3. Click "Add definition".
4. Add a name and description to your new metafield.
   • You can use any name or description. E.g. "Swatch"
5. Click "Select type" then pick "Metaobject". Make sure to select "List of values" after clicking Metaobject.
6. In the reference field enter the Metaobject you have just created.

Assign values to each product

From here you can click into each product and make sure the new metafield is updated to correspond to the relevant options.

1. Find a product you want to update.
2. Scroll down to "Product metafields" and add all the colors you'd like to highlight for this product.

Connect to filter

Once all your data is place the only thing left is to connect this to your filters.

1. Open the Search and discovery app.
2. Navigate to filters and click "Add filter".
3. Click "Select source" then look for the new product metafield you just created
4. Add a label .
   • You can use any name or description. E.g. "Color" or "Material"
5. Click save.

Caveats of metafield filtering

If you use metafield swatch filtering you'll have to ensure you update your metafields for all products that you want to appear on this filter - this will NOT happen automatically even if category metafields and variant options are displaying swatches.

Add swatch filter from 'color' option

You can add filters using color product options. This is a easy way to add filters but will require swatch files to be uploaded in a specific format. Swatches will only appear using this approach when the product option matches "color" - or a translation of color.

Add filter using Search and discovery

1. Open the Search and discovery app.
2. Navigate to filters and click "Add filter".
3. Click "Select source" then look for the product option "Color".
   • This is the same approach you would take if you wanted to filter by any other product option like size.
4. Add a label.
   • You can use any name or description. E.g. "Color"
5. Click save.

Upload missing swatch files

You may notice that not all of your color filters are appearing with swatches. If this is the case you may have to upload custom swatch files.

Swatches will only appear automatically if the color name matches a default CSS color.

1. Identify all swatches that are missing
2. Upload a 64x64 jpg file for each swatch you want to replace.
   • Swatches must be named all lowercase and prepended with “swatch-”. For example, if your color variant is “Electric blue” you would name your file “swatch-electric-blue.jpg”