Before we get started you will need:

a) Shopify Search and Discovery app installed on your store, if it is not installed head over to Shopify app store and install it: https://apps.shopify.com/search-and-discovery

b) Secondly, make sure you're using the latest version of our themes (Xtra, Next, Xpert and Xclusive). All our themes have the compatibility to display visual filters.

Let's start creating the visual filters:

Shopify uses metaobjects to assign and store the color information. So the first thing we need to create a metaobject:
​

Go to store settings > head over to custom data > metaobject > add new definition. The following tutorial covers all the steps involved in creating a metaobject.

Next up is to assign this metaobject to variant metafields, this will allow us to assign this object to any variant in our store.

Now that we have created metaobject and metafield we can start storing the swatch data, head over to your products and start assigning values to the metafield.

Lastly open the Search and discovery app > filters > add filter > select the metaobject we created and check the live page. 🫡