Add hover effect to product images - Debut Theme

New Member
2 0 1

Hi,

This is the first store Ive setup via Shopify. I have a very basic understanding of HTML.

I have followed this tutorial down the a T:

https://help.shopify.com/themes/customization/collections/add-hover-effect-to-product-images#demos

I am using the Debut theme and it doesnt seem to work. 

Does anyone have any suggestions or can suggests an app or maybe a different theme that has it preset?

Thank you in advance.

 

1 Like
Shopify Staff
Shopify Staff
93 0 12

Hey Daniella,

Mike here from Shopify, I am pretty sure the DEBUT theme you are already using has this feature available, for instance here is my video of my test store using DEBUT

http://recordit.co/WgSEAES7ns

Make sure this is active in Customizing your theme. Product pages to be exact.

https://screenshot.click/22-43-rq0hu-olgiw.jpg

However, you also mentioned other themes that may offer this sort of function and here is a list here

The following themes come with a product image zoom:

* [Debut](https://themes.shopify.com/themes/debut) (free theme) * [Minimal](https://themes.shopify.com/themes/minimal) (free theme) * [Pop](https://themes.shopify.com/themes/pop) (free theme) * [Simple](https://themes.shopify.com/themes/simple) (free theme) * [Supply](https://themes.shopify.com/themes/supply) (free theme) * [Providence](https://themes.shopify.com/themes/providence) * [Blockshop](https://themes.shopify.com/themes/blockshop) * [Editions](https://themes.shopify.com/themes/editions) * [Fashionopolism](https://themes.shopify.com/themes/fashionopolism) * [Icon](https://themes.shopify.com/themes/icon) * [Mr Parker](https://themes.shopify.com/themes/mr-parker) * [Parallax](https://themes.shopify.com/themes/parallax) * [Responsive](https://themes.shopify.com/themes/responsive) * [Testament](https://themes.shopify.com/themes/testament) * [Vantage](https://themes.shopify.com/themes/vantage) * [ShowTime](https://themes.shopify.com/themes/showtime) * [Mobilia](https://themes.shopify.com/themes/mobilia) * [Retina](https://themes.shopify.com/themes/retina) * [Sunrise](https://themes.shopify.com/themes/sunrise) * [Weekend](https://themes.shopify.com/themes/weekend) * [Focal](https://themes.shopify.com/themes/focal) * [Canopy](https://themes.shopify.com/themes/canopy) * [Kagami](https://themes.shopify.com/themes/kagami) * [Kingdom](https://themes.shopify.com/themes/kingdom) * [Launch](https://themes.shopify.com/themes/launch) * [Pacific](https://themes.shopify.com/themes/pacific) * [Startup](https://themes.shopify.com/themes/startup)

Hope that helps you out, and no need for the link you had worked with above. Cheers,

Mike A.

Shopify Employee

 

 

 

 

 

 

0 Likes
Tourist
4 0 3

Mike, I think you misunderstood the question.  Daniella wants to change the image hover on her product collections, she's not talking about the image zoom on the product page.

I've also followed the tutorial (https://help.shopify.com/themes/customization/collections/add-hover-effect-to-product-images) and can't get it to work with the Debut theme.

 

2 Likes
Tourist
3 0 1

This is also something I have been having an incredible time with. Debut theme has preset hover effects on the homepage collections. So following any torials online is useless without being able to disengage the presets. 

Can anyone help? I am sure I am not the only one with this problem.

Need a mouseover to change to second product image on Debut. PLLLLLLLLEEEEEEAAAASSSSEEEE

valley-uprising.com

1 Like
New Member
2 0 8

I just used this code and it worked perfectly on the debut theme.  

You have to replace the product-card-grid.liquid in Snippets with the code below.  If you just do that step, you will see the alt image appears in the collection page below your item, so you know you aren't finished yet.  Go to step two.  Once you add that code to your theme.scss.liquid as described in step 2, it'll be working perfectly.

1. update the product-card-grid.liquid in Snippets with the following code.

{% 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 }}" alt="{{ product.images[1].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' %}
    </div>
  </a>
</div>

2. Add these CSS to the very 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;
}

 

8 Likes
Tourist
4 0 5

Thank you for this!! Unfortunately though, it affects the mobile end..so now I have to double tap an image to get to the product. Any workaround?

0 Likes
New Member
2 0 8

Ack! You're right.  I have no idea what the workaround for that is, but I kind of am ok with it.  It's not the worst thing in the world.  

0 Likes
Tourist
4 0 5

I was determined to fix the mobile issue because the majority of shoppers use mobile these days and little annoyances like having to double click for each thing could easily send them off the site.

The solution was just adding code to specify screen size for the hover actions.

So -- using nadinelk's code in step 1., but then using this code for step 2 (adding at the end of the theme.scss.liquid) ensures you'll get the rollover effect on desktop without interfering with mobile touch events. Yay!

@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;
}
}

 

3 Likes
New Member
1 0 0

Would it be possible to use this code to add hover text to a promote?

0 Likes
New Member
3 0 0

I've also been trying to get this to work on my debut theme...however I want a hover zoom on the main image instead. Can anyone suggest anything? Hopefully the already posted code can just be tweaked slightly

0 Likes