Dawn Theme - Show Last Image on Product Hover

Store Design
, ,
1

I’m using Dawn 7.0.1 and would like to show the last product image on hover. I have seen similar code snippets that allow you to determine which image to show, however, I have a varying amount of images per product so I would like to automatically show the last one every time. Thanks in advance!

2

  1. Locate the product grid template: In the theme editor, navigate to the Sections folder and find the product-grid-item.liquid file. This file controls the display of individual product grid items.

  2. Find the product image code: Within the product-grid-item.liquid file, locate the code responsible for displaying the product image. It typically looks like <img src="{{ product.featured_image | img_url: '500x' }}" alt="{{ product.title }}">.

  3. Replace the product image code: Replace the existing code with the following code snippet:

{% assign last_image = product.images | last %}
{% if last_image %}
  
    
  

{% endif %}

This code retrieves the last image of the product using the last_image variable. If there is a last image available, it will be displayed within a <div> container with the class product-image-wrapper.

3

I appreciate your response! I was able to locate src=“{{ featured_media | image_url: width: 416 }}” within the main-products.liquid file. However, it doesn’t seem like the code you provided is working. Any ideas? Thanks!

4

{% assign last_image = product.iamge | last %}

{% assign image_to_show = last_image | minus:1 %}
{% assign ezfy_image_on_hover = card_product.media[image_to_show] %}

{%- if ezfy_image_on_hover != nil and show_secondary_image -%}

<img
srcset="
{%- if ezfy_image_on_hover.width >= 165 -%}{{ ezfy_image_on_hover | image_url: width: 165 }} 165w,{%- endif -%}
{%- if ezfy_image_on_hover.width >= 360 -%}{{ ezfy_image_on_hover | image_url: width: 360 }} 360w,{%- endif -%}
{%- if ezfy_image_on_hover.width >= 533 -%}{{ ezfy_image_on_hover | image_url: width: 533 }} 533w,{%- endif -%}
{%- if ezfy_image_on_hover.width >= 720 -%}{{ ezfy_image_on_hover | image_url: width: 720 }} 720w,{%- endif -%}
{%- if ezfy_image_on_hover.width >= 940 -%}{{ ezfy_image_on_hover | image_url: width: 940 }} 940w,{%- endif -%}
{%- if ezfy_image_on_hover.width >= 1066 -%}{{ ezfy_image_on_hover | image_url: width: 1066 }} 1066w,{%- endif -%}
{{ ezfy_image_on_hover | image_url }} {{ ezfy_image_on_hover.width }}w
"
src=“{{ ezfy_image_on_hover | image_url: width: 533 }}”
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=“”
class=“motion-reduce”
loading=“lazy”
width=“{{ ezfy_image_on_hover.width }}”
height=“{{ ezfy_image_on_hover.height }}”

{%- endif -%}