How to use the second product image for a collection product tile?

Retired Boards Appdev Store Design
1

Hello!

On our product pages, a common thing for us to do is to use the video in the first position, because testing has shown that having video, over a product image is better for conversion.

However, only on specific collection pages, we don’t want the video tile preview to show. Which is happening because the video is in the first position on the actual product page. So, how do we make it, so only on certain collection pages which match a URL, use the next tile in the array (i.e - the second media) which is a product picture?

I have kind of a solution and it feels SO close, but for some reason I can’t get it to quite work.

Here’s the full code for the whole

in question which controls the image preview section for catalogue items (I think) our template:

<div{% if add_image_padding %} class=“card__media-full-spacer”{% endif %}>

{{ product_card_product.featured_media.alt | escape }}

{%- if product_card_product.media[1] != nil and show_secondary_image -%}
<img
srcset=“{%- if product_card_product.media[1].width >= 165 -%}{{ product_card_product.media[1] | img_url: ‘165x’ }} 165w,{%- endif -%}
{%- if product_card_product.media[1].width >= 360 -%}{{ product_card_product.media[1] | img_url: ‘360x’ }} 360w,{%- endif -%}
{%- if product_card_product.media[1].width >= 533 -%}{{ product_card_product.media[1] | img_url: ‘533x’ }} 533w,{%- endif -%}
{%- if product_card_product.media[1].width >= 720 -%}{{ product_card_product.media[1] | img_url: ‘720x’ }} 720w,{%- endif -%}
{%- if product_card_product.media[1].width >= 940 -%}{{ product_card_product.media[1] | img_url: ‘940x’ }} 940w,{%- endif -%}
{%- if product_card_product.media[1].width >= 1066 -%}{{ product_card_product.media[1] | img_url: ‘1066x’ }} 1066w,{%- endif -%}
{{ product_card_product.media[1] | img_url: ‘master’ }} {{ product_card_product.media[1].width }}w”
src=“{{ product_card_product.media[1] | img_url: ‘533x’ }}”
sizes=“(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)”
alt=“{{ product_card_product.media[1].alt | escape }}”
loading=“lazy”
class=“motion-reduce”
width=“{{ product_card_product.media[1].width }}”
height=“{{ product_card_product.media[1].height }}”

{%- endif -%}

I’ve tried doing something with a mix of code fragments I’ve see on other threads to do something like:

{% if collection.url contains ‘/personalise’ %}

<img srcset="{%- if product_card_product.media[1].width >= 165 -%}{{ product_card_product.media[1] | img_url: ‘165x’ }} 165w,{%- endif -%}

{%- if product_card_product.media[1].width >= 360 -%}{{ product_card_product.media[1] | img_url: ‘360x’ }} 360w,{%- endif -%}

{%- if product_card_product.media[1].width >= 533 -%}{{ product_card_product.media[1] | img_url: ‘533x’ }} 533w,{%- endif -%}

{%- if product_card_product.media[1].width >= 720 -%}{{ product_card_product.media[1] | img_url: ‘720x’ }} 720w,{%- endif -%}

{%- if product_card_product.media[1].width >= 940 -%}{{ product_card_product.media[1] | img_url: ‘940x’ }} 940w,{%- endif -%}

{%- if product_card_product.media[1].width >= 1066 -%}{{ product_card_product.media[1] | img_url: ‘1066x’ }} 1066w,{%- endif -%}

{{ product_card_product.media[1] | img_url: ‘master’ }} {{ product_card_product.media[1].width }}w"

src=“{{ product_card_product.media[1] | img_url: ‘533x’ }}”

sizes=“(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)”

alt=“{{ product_card_product.media[1].alt | escape }}”

loading=“lazy”

class=“motion-reduce”

width=“{{ product_card_product.media[1].width }}”

height=“{{ product_card_product.media[1].height }}”

{% endif %}

Which I think will target the specific collection URL we want and ask to utilise the product.media[1]. I’ve pasted this into the relevant .liquid file already, but it doesn’t seemingly do anything looking at the preview. But it doesn’t seem to break the page which is good… But could also indicate the code doesn’t work.

Can anyone help with which bits to amend here so that we can get this to work?

The example URL is:

https://www.briiv.co.uk/collections/personalise-your-briiv-pack

And we’ll know it works because those product tiles should all show a different second image.

Any help would be massively appreciated!

Thanks,

James

2

I’ve been doing some more digging… I’ve realised this could also be doable using the JSON settings…

I have a unique template set up for this collection page, so there’s no need for an ‘if’ condition. But I can’t see in the Shopify Dev documentation, what setting to adopt in order to select the second image.

https://shopify.dev/themes/architecture/settings#access-settings

Here’s the current settings:

{
“sections”: {
“banner”: {
“type”: “main-collection-banner”,
“settings”: {
“show_collection_description”: true,
“show_collection_image”: false
}
},
“product-grid”: {
“type”: “main-collection-product-grid”,
“settings”: {
“products_per_page”: 8,
“image_ratio”: “square”,
“show_secondary_image”: true,
“add_image_padding”: false,
“show_image_outline”: false,
“show_vendor”: false,
“show_rating”: false,
“enable_filtering”: false,
“enable_sorting”: false,
“collapse_on_larger_devices”: false
}
}
},
“order”: [
“banner”,
“product-grid”
]
}

So I’m thinking there should be a setting I can put in “product-grid”: {…}, which will allow me to simply ask to use the second image.

Right now, on hover the second image will show. But we want that to be the first image and no hover other than a usual slight zoom is necessary.

3

So I think I’ve ended up finding a solution to this using CSS.

In the collection liquid file I’ve written this code:

{% if collection.url contains ‘/personalise’ %}

.media.media--hover-effect > img + img { opacity:1!important; }

{% endif %}

So if you have the hover effect selected to show the second image on hover, then this will override that to show the second image natively.

Not exactly functional, but it works I guess.

There should absolutely be an easier way than this… (looking at you Shopify devs). :wink: