How to Create Color Swatches

We use a metaobject to group together products. Any product within a group will display the a color swatch for itself and the other products in the group. When you click on a color swatch, it will redirect you to the corresponding product. Follow the steps below to configure the product groups and swatch color/image used.

Step 1: Create the product groups in the metaobject. Enter the Name & select the products that should be grouped together.

https://admin.shopify.com/store/fdm-media/content/metaobjects/entries/color_swatches?order=updated_at&orderDirection=DESCENDING&selectedColumns=DISPLAY_NAME%2CFIELDS.PRODUCTS%2CADDED_BY%2CUPDATED_AT%2CREFERENCES

Step 2: Add swatch color and/or swatch image to Product Metafields. NOTE: image will be used if both metafields have settings. If both metafields are blank, the swatch will not show on the product page or collection page for that product.

Step 3: Style the swatches. Select the swatch shape and poisitoning in the theme settings of the theme customizer