How to show last image on product card hover?

Store Design
1

Hi everyone,

I’m using the Ritual Shopify theme. By default, when you hover over a product card, the theme shows the second image of that product.

I’d like to change it so that the last image shows on hover instead of the second. Has anyone done this before or knows the best way to make this change?

Thanks!

2

Hey @grtag!

Yes, you’re right that by default it shows the second image. But in order to make sure our last image show, then it requires to do some advance customization in it.

Or can you share your store url so that I can provide you the solution code accordingly.

3

You can do this on your theme. For this you have to update your product grid codes where the condition located. Please share your store link I will try write the code for you.

4

Hey! Here’s the link: All – ENTROPH

5

@grtag In Ritual theme, look for one of these files:

  • snippets/product-card.liquid

  • snippets/card-product.liquid

  • snippets/product-grid-item.liquid

(Search in Edit code for media[1] or second_image)

You’ll see something like this:

{% if product.media[1] %}
  <img
    src="{{ product.media[1] | image_url: width: 800 }}"
    class="product-card__hover-image"
  >
{% endif %}

This is what shows the second image.

Correct fix: show LAST image instead

Replace the above logic with this :backhand_index_pointing_down:

{% assign last_media_index = product.media.size | minus: 1 %}

{% if product.media.size > 1 %}
  <img
    src="{{ product.media[last_media_index] | image_url: width: 800 }}"
    class="product-card__hover-image"
    loading="lazy"
  >
{% endif %}
6

Hey! Here’s the link: All – ENTROPH

I found this:

{%- if image_hover and resource.media.size > 1 -%}
          {{
            resource.media[1]
            | image_url: width: image_width
            | image_tag:
              loading: 'lazy',
              class: 'resource-card__image resource-card__image--secondary',
              widths: widths,
              sizes: 'auto',
              transitionToProduct: settings.transition_to_main_product,
              data-media-id: resource.media[1].id
          }}
        {%- endif -%}
      {%- else -%}

Not sure if this is the right one. It looks a bit different from yours.

7

Hi @grtag

Replace the above code with this:

{%- if image_hover and resource.media.size > 1 -%}
  {%- assign last_media_index = resource.media.size | minus: 1 -%}
  {{
    resource.media[last_media_index]
    | image_url: width: image_width
    | image_tag:
      loading: 'lazy',
      class: 'resource-card__image resource-card__image--secondary',
      widths: widths,
      sizes: 'auto',
      transitionToProduct: settings.transition_to_main_product,
      data-media-id: resource.media[last_media_index].id
  }}
{%- endif -%}
8

Hmm, it didn’t work.

9

Instead of

use resource.media.last

10

Hi @grtag

Ok, please send me the collaborator code. I’ll do it.

11

Hi, @grtag
This requirement requires code modification. I can check it for you.