Hello everyone, Is it possible to render a second image in each product grid item on InstantSearch page? (or an alternative way to do this?)
We’re trying to replicate the same UI with our default Impulse theme search result page using the Algolia app.
You can absolutely do this! You have full control over the look and feel of how your items (we call them hits) are rendered in the results.
Here’s a complex example that includes an animation in React.
You could follow a similar pattern to swap out the image on mouse over. You can store the images in your index records either by making the image attribute an array (image and image) or storing the images as multiple attributes (image and `activeImage’ for instance).
At the moment, we have installed the algolia app/plugin and the initial files are added on our theme. Now, we’re looking to make the design of the Instantsearch similar with the collection page on our Impulse theme (with the hover functionality that changes the image to another image per product).
Based on the documentation about indexing on Shopify here - Index Schema | Shopify | Algolia
It seems only the variant image is available to output on the template?
Reached out to some of our Shopify experts and their recommendation was to use a metafield to store the image:
Whilst encountering this issue at my previous job, the only way to get this data into Algolia was to add a Metafield (Metafields | Shopify | Algolia) and then we had a custom backend job which which would grab the specific image that we wanted in the gallery (second in the list) for each variant and sync it up to Algolia
Noted on this Chuck, thanks for the help.
I think we’ll have to rediscussed this on our team as I think setting up a metafield for a list of products will need an extra work but we’re glad to find out that it’s possible and there’s an option to take Thanks again