How to implement swatches in Shopify?

With Shopify, variant images and/or swatches can be shown with the main image, however it will require some customization.

The first thing to do is ensure that "Show products instead of variants" is selected in the Algolia app configuration.

https://www.algolia.com/doc/integration/shopify/sending-and-managing-data/schemas/?client=ruby#displaying-by-productmost-relevant-variant

This will group the products by product_id and only the most relevant product will be returned.

Next, in order to implement color/size/etc. variants or multiples images in search results, you would need to store the required data for all variants on each variant’s record. You could do this using metafields, for example:

"meta": {
   "color_filters": {
     "images": "Rose%%%https://cdn.shopify.com/s/rose.jpg,Black%%%https://cdn.shopify.com/s/black.jpg,Burgundy%%%https://cdn.shopify.com/s/black.jpg" 
     },
   "algolia": {
     "grouping": "4380099805277:Black"
   }
 },

Finally, you would need to customize the front-end to use the relevant properties from the meta-fields. (e.g. meta.color_filters.)

Last reviewed 07-10-22.