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. 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.
To get this data, you can call the Shopify storefront API. Fetch all product variants with the Shopify storefront API.
Then you can add this data on your variants 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.