Debut Theme - Make "hover over product" action reference the LAST photo in product images?

New Member
27 0 0

Hi everyone,

I really appreciate everyone's assistance on here thus far. Your coding skills rock! My website is now 98% finished and ready for content. Just have one or two last details to sort out. So thank you for that!

I recently added some code to my Debut theme that adds a hover function to the product images. When you mouse over the product, the photo will change to whatever the SECOND photo is in that product's images. I would like to tweak the code so it references the LAST photo instead. When I start uploading my product photos (i.e. not the ones ripped from Aliexpress), my aim is to have the first 4-5 photos be high-quality studio shots of the product in question...and the LAST photo be of a woman wearing/carrying whatever that product is. It would look odd to have the first photo be a studio photo, the second a lifestyle photo, then 3-4 more studio photos.

Below is the code I inserted for the hover function. I tried switching out all instances of the word "secondary" for "last" (which I saw referenced in a bit of code elsewhere for a different theme) but it didn't make the changes I desired. Thanks once again for any help you gurus can bestow!

This first section of code was added to product-card-grid.liquid...

...

{% unless grid_image_width %}
  {%- assign grid_image_width = '600x600' -%}
{% endunless %}
<div class="grid-view-item{% unless product.available %} product-price--sold-out grid-view-item--sold-out{% endunless %}">
  <a class="grid-view-item__link {% if product.images.size > 1 %} has-secondary{% endif %}" href="{{ product.url | within: collection }}">
    <img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: grid_image_width }}" alt="{{ product.featured_image.alt }}">
    {% if product.images.size > 1 %}
     <img class="secondary" src="{{ product.images[1] | img_url: grid_image_width }}" last="{{ product.images[1].last | escape }}">
    {% endif %}
    <div class="h4 grid-view-item__title">{{ product.title }}</div>
    {% if section.settings.show_vendor %}
      <div class="grid-view-item__vendor">{{ product.vendor }}</div>
    {% endif %}
    <div class="grid-view-item__meta">
      {% include 'product-price' %}
    </div>
  </a>
  
  <form method="post" action="/cart/add" align="center"> <input type="hidden" name="id" value="{{ product.variants.first.id }}" /> <input type="submit" value="Add to Cart" class="btn" /> </form>
</div>

...

And the code below was added to the bottom of theme.scss.liquid:

...

.has-secondary.grid-view-item__link img.secondary{
 display:none;
}

.has-secondary.grid-view-item__link:hover img.secondary{
 display:block;
}

.has-secondary.grid-view-item__link:hover img.grid-view-item__image{
 display:none;
}

@media screen and (min-width:767px){
.has-secondary.grid-view-item__link img.secondary{
 display:none;
}

.has-secondary.grid-view-item__link:hover img.secondary{
 display:block;
}

.has-secondary.grid-view-item__link:hover img.grid-view-item__image{
 display:none;
}
}

@media screen and (max-width:767px){
.has-secondary.grid-view-item__link img.secondary{
 display:none;
}
}

0 Likes
Shopify Partner
6 0 2

Hello,

You only have to modify the <img> tag to be like this:

<img class="secondary" src="{{ product.images.last | img_url: grid_image_width }}">

Tell me if that works for you.

1 Like
New Member
27 0 0

Hi Tarek,

That did the trick. Thank you so much!

0 Likes
New Member
1 0 0

I am also using Debut theme and in a need of hover effect for product images just like you. Can you please share your code?

0 Likes
New Member
2 0 1

the code works but it removes my product prices. how can I fix this?

0 Likes