Solution: Display Alternate Product Image on Hover

Brittany_Witt
Explorer
52 0 17

Hey guys, I've noticed this seems to be a big issue in the community. I know Shopify has put out a tutorial for this but it just doesn't work for a lot of people, myself included.

Here's the solution that worked for me. I was able to find these solutions from a couple of different people within this thread. I just wanted to post the full, cleaned-up versions here to hopefully make it easier for folks to find and implement.

I use the Debut theme but I've seen others say it worked for them using other themes as well. I don't know anything about code so I won't be able to help you troubleshoot things but hopefully others will. 

*Please be sure to duplicate your theme and try this code out on a copy of your theme before you implement it on your live theme just so you can see that everything works as it should.

Step 1

Copy and paste this at the end of your theme.css.liquid (or .scss.liquid) file: 

/* ===============================================
// Reveal module
// =============================================== */
.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;
}
}
.grid-view-item__title {
margin-top: 10px;
}

Step 2 

Next, replace all the code in product-card-grid.liquid file with this:

{% 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.last | img_url: grid_image_width }}" alt="{{ product.images.last.alt | 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', variant: product %}
    </div>
  </a>
</div>

 This will display your last image on hover, you can replace product.images.last with product.images[1] if you want the second photo to display instead.

Thanks guys! 

Brittany Witt
Replies 8 (8)

Messa57fr
New Member
4 0 0

Hi,

 

I don't find product-card-grid.liquid ? My theme is Venture.

 

Thanks,

Sam

 

Brittany_Witt
Explorer
52 0 17

@Messa57fr , from the Shopify tutorial I linked to in my original post:

If your theme doesn't have a product-grid-item.liquid file, then look for one of the following:

  • product-card.liquid
  • product-card-grid.liquid
  • product-loop.liquid

Hopefully, this will help you out!

Brittany Witt

tstudioco
Visitor
1 0 0

works like a charm! thanks!

ItsShibui
Visitor
2 0 2

Hello

 

I followed your instructions and for some reason it changes my grid view. My pictures are now a lot bigger and the prices are gone.

 

Can someone help me with this please?

 

Thanks

KetanKumar
Shopify Partner
36839 3635 11972

@ItsShibui 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ItsShibui
Visitor
2 0 2

Here you go.

 

https://itsshibui.com/

 

 

KetanKumar
Shopify Partner
36839 3635 11972

@ItsShibui 

thanks for url

yes please add tutorial code if doesn't work so let me know i will check code

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

Brendan-Zuza
Shopify Partner
8 0 3

In step 2: 

"Next, replace all the code in product-card-grid.liquid file with this:"

I had an issue with the product vendor duplicating. It was showing the product vendor twice as I believe it was conflicting with the product vendor (on/off button) in the theme customiser. 

To resolve the issue I removed the line (shown below) from the code.

<div class="grid-view-item__vendor">{{ product.vendor }}</div>
    {% endif %}

After doing this it worked perfectly, hope this may help others. Thanks Brittany 🙏

Brendan
onlinegrowthgroup.com.au