Output the second image of a product in a hogan function

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.

Thank you!

Hi @nikko and welcome.

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.

InstantSearch supports templating via pure HTML (for the vanilla JavaScript library) or your framework of choice.

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[0] and image[1]) or storing the images as multiple attributes (image and `activeImage’ for instance).

Hi chuck, thanks for the help on this.
As I understand, the process that you suggested to edit hits is related to the Custom Instantsearch implementation here? - Custom InstantSearch Implementation | Shopify | Algolia. Thanks

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?

I found one topic that’s similar with my inquiry - Second Product Image on Hover - Open Q&A - Algolia Community, it’s been answered last 2019 but not sure if there’s changes now that it’s 2022. Thank you!

Hey Nikko!

I didn’t catch that you were using our Shopify integration. Let me see if I can find someone with some deeper experience on this particular integration that can help you out!

Chuck

1 Like

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

1 Like

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 :slight_smile: Thanks again

1 Like