Show alternate (secondary) product images

shopify image
I want to use this image

{{ product.images[0].src }}

but algolia is using
{{ product.images[1].src }}

in algolia_instant_search_product.hogan.liquid

<div class="ais-hit--picture" style="background-image: url('[[# helpers.mediumImage ]][[/ helpers.mediumImage ]]')"></div>

helpers.mediumImage returns product.images[1].src

file: Assets/algolia_helpers.js.liquid
function: algolia.helpers[size + ‘Image’] = (function (_size) {
returns: this.image
but it the method does not look to have access to product.images[0].src

Related: magento issue

This is because we index only one image per variant.
The way we do this is by taking either:

  1. The image of the variant as set in the admin if it exists
  2. product.images[0].src as a fallback

So in your case, the reason it is returning product.images[1].src is (I think) simply because your variant is set to use the second image of your product.

1 Like

Swap CSV images - workaround

Algolia uses the image from col “Variant Image”, in the shopify CSV. Rather than images from “Image Src”. As a workaround - I will swap the images in the CSV and upload again.

Indeed, that’s what I was trying to explain in my previous message, sorry if it was unclear.
The “Image Src” columns contains the product default image, and the “Variant image” column contains the picture of the specific variant!

That behavior seemed to me the most logical, as it is also the behavior implemented in the default Shopify theme, Launchpad Star:

{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}