Where is Code in Theme to change picture for on hover in catalog page

Store Design
, , , , ,

Topic summary

A developer seeks to customize which product image displays on hover in Shopify collection pages, specifically wanting to use the 4th image instead of the default 2nd image.

Initial Problem:

  • Successfully changed the thumbnail image on catalog pages
  • Wants hover functionality to show a specific image (4th) rather than the default second image
  • Plans to hide certain images on product pages using CSS while keeping them visible on collection pages

Solution Provided:
For the Impulse theme, modify card-product.liquid by changing the hover image index from product.media[1] to product.media[3] (arrays are zero-indexed, so [3] = 4th image). An alternative approach using custom metafields was also suggested for manual control per product.

Final Resolution:
The original poster clarified they’re using the Dawn theme. They found the solution in card-product.liquid (lines 64-104), where they modified card_product.media[4] to point to their desired hover image. The key is ensuring the array index matches the intended image position and that corresponding <img/> tags align properly.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Hello, I am some experience as a developer but need help finding the code to change

  • Change which product image is used on hover

I want to change which pictures are shown as the thumbnail and :hover for the catalog page.
I was lucky enough to find this answer to help me change the thumbnail on catalog page:
https://community.shopify.com/c/shopify-design/different-first-image-of-collection-page-than-product-page/td-p/2329962

However I want to have the setting ticked to change to the second picture on hover however for it not to be the second picture but the 4th or whichever I choose.
I can’t seem to find the code in the theme that chooses which image is used for hover and I would prefer to change the theme code than applying a CSS fix if possible.
In addition I’ll be hiding these two images on the product page with the following CSS so that they are only used as thumbnails on catalog & landing page but not seen on product page
CSS to hide last 2 images on product page:

ul.product__media-list li.product__media-item:nth-child(4) {
  display: none;
}
ul.thumbnail-list li.thumbnail-list__item:nth-child(4) {
  display: none;
}

in this case its just the 4th message being changed but say I want more I want control to remove the last two adding (n+4) or whatever to the :nth-child() portion

2

Hi @Gab2424 ,

To change the hover image in the Impulse theme, edit card-product.liquid and update the hover image logic.

1. Change Hover Image to 4th (or any)

Find this code:

{%- if product.media.size > 1 -%}
  <img src="{{ product.media[1] | img_url: '400x' }}" class="hover-image">
{%- endif -%}

Change product.media[1] to product.media[3] for the 4th image:

{%- if product.media.size > 3 -%}
  <img src="{{ product.media[3] | img_url: '400x' }}" class="hover-image">
{%- endif -%}

Change the index (e.g., 3 for 4th, 4 for 5th) as needed.

2. Hide Images on Product Page

To hide the 4th image:

ul.product__media-list li.product__media-item:nth-child(4) {
  display: none;
}

To hide the last 2 images dynamically:

ul.product__media-list li.product__media-item:nth-last-child(-n+2) {
  display: none;
}

3. Use Meta Fields for Manual Control- Add a custom product metafield (hover_image).

  • Update the code:
{%- assign hover_image = product.metafields.custom.hover_image -%}
{%- if hover_image -%}
  <img src="{{ hover_image | img_url: '400x' }}" class="hover-image">
{%- elsif product.media.size > 3 -%}
  <img src="{{ product.media[3] | img_url: '400x' }}" class="hover-image">
{%- endif -%}
3

I’m sry I should have mentioned I am on the dawn theme.
But thanks to your post and looking again the code I was looking for was literally directly under what the first post gave me, guess i was tired or dumb idk

anyway for others here is the accepted solution thats working for me starting from line 64 - 104 in dawn theme card-product.liquid file


              {% comment %}theme-check-enable ImgLazyLoading{% endcomment %}

              {%- if card_product.media[4] != null and show_secondary_image -%}

Make sure the card_product.media[#] is pointing to the picture you want and make sure your tags line up for those who don’t have much code exp