Automatically show color variant image

Im using instantsearch.js to build a custom collection/search pages for a shopify integration. When I used the refinement list for the options.color attribute, algolia would automatically pull in the image from the variant with that color option.

The problem with this approach is that the intended behavior is to show color swatches as groups for the individual options.color values. (i.e. Green => Olive, Kiwi, Seafoam, Forest). To achieve this, I have tagged the products with a named tag color-group.

The refinement list now works as intended, but the product images no longer reflect the selected color. So, if someone selected Green, and a product has a variant of Kiwi, that variant image doesnt seem to be shown unless that happened to be the first image in the product images array.

Is there anyway to assign something other than options.color to be used for this feature?


Thanks for reaching us.

The problem with tags is that it will be applied to the product as well as all its variants.
The simplest solution would be to have one product per color. Use named tag color-group for each of them and you should have the result you expect.

However, the metafields can be set on specific variants. So if you want to still have variants in your back-office, I would recommend you to use metafields editor; apply color-group for only the relevant variants of a product and make a facet for this.

That having said, I just saw this morning a topic about some issue with metafields so this may not work. We will work on it to fix this issue.

Does that help ?


Thanks for the reply Alex. Unfortunately we specifically combined products to have multiple colors for this project. We went with the color-group tag approach and it worked nicely