Use swatches to showcase Variants on both the Product page and Product grid. This handy visual tool allows customers to compare Variants and give a quick overview of all the product options.

You can show swatches in 3 different ways:

1. Text
   When you set up variants and enable Swatches on your Variant picker block, swatches will be displayed as text.

   

2. Color swatches
   If you set up Category metafields and connect them to Variants you can assign HEX values or use a color picker to show color swatches.
   
   

3. Image swatches
   Using Category metafields or connecting your Product media to your Variants you can show images as swatches.
   
    

1. Creating the swatches on your products

There are 2 ways you can assign colors or images to your variant swatches. 

Note: The theme also still supports the use of HEX values and PNG uploads when using the option name of 'Color' to ensure a smooth upgrade path for our existing merchants but we recommend using Category metafields for more flexibility and easier updates.

1. Using Category metafields
   Set up category color and images that can be used across product categories. For example a black swatch for clothing may need to look different than a black swatch for footwear.
   
   
2. Using Product media
   Pulls through the images assigned to those variants and displays them as swatches
   

Using Category metafields

1. Follow the Shopify guide below on how to set up Category metafields for your swatches: