Reveal second image on hover - Debut theme

Store Design
1

Hi, would really appreciate some help with this – been trying to follow some threads on this topic but to no avail.

I would like to have the second image of each product revealed on hover. Am using Debut theme.

Thanks very much!

My site is www.curiouslah.com

1 Like
2

Hello,

Welcome to the Shopify community!
and Thanks for your Good question.

https://community.shopify.com/c/Shopify-Design/Collection-Add-a-hover-effect-to-product-images-on-your/td-p/614960

1 Like
3

Hi, thanks for the link - I tried following some of the suggestions there but it didn’t work.

Then I used this: https://www.youtube.com/watch?v=9uxSrOxxZpY which did work, but now there are some issues..

Code used for Reveal Module in theme.scss.liquid :

/* ===============================================
// 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;
}
}

Code used in product-card-grid.liquid :

{% unless grid_image_width %}
  {%- assign grid_image_width = '600x600' -%}
{% endunless %}

  
    
    {% if product.images.size > 1 %}
     
    {% endif %}
    
{{ product.title }}

    {% if section.settings.show_vendor %}
      {{ product.vendor }}

    {% endif %}
    
      {% include 'product-price', variant: product %}

The issues are: (see www.curiouslah.com home page for reference)

  1. No padding/spacing between the product images and product titles, that was with the original code

  2. For products with a vendor, the vendor name is shown twice

Any ideas how to fix this? Thank you!

1 Like
4

@iamcurious

Thanks for store details

sorry but I can see this code do you have added?

1 Like
5

@KetanKumar

Sorry, I changed it back to the original code again just now.

Have switched the code to the one mentioned above, so you can see the issues with the padding and vendor title.

Thanks!

6

@iamcurious

Thanks for update code

also, please add the below code.

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.grid-view-item__title {
margin-top: 20px;
}
.grid-view-item__vendor, .price__vendor {
    display: none;
}
2 Likes
7

Thank you very much! This worked!

1 Like
8

@iamcurious

Thanks for update and your compliment.

9

Hi, what do I do if I want to reveal the second image as well but I do not have a theme.scss.liquid?

I can only see theme.css.liquid or theme.scss

Thank you!

1 Like
10

@Twooogirlsco

Thanks

can you please try this

https://community.shopify.com/c/Shopify-Design/Collection-Add-a-hover-effect-to-product-images-on-your/td-p/614960

11

Sure, thank you!

12

Hi Ketan Kumar,

I tried the link and the steps do not work for me… is there a reason why

13

HEllo, @Twooogirlsco

It can be done by doing some code customization. Please take the help of a developer and hire Shopify Expert or me

14

noted. how much do you charge for this hover?

15

i have send PM

16

Hi @iamcurious nice to know it works on your website.

however, how did you manage to get it work for all the rows?

17

Hi! I am also using the Debut theme and would like to have the second image revealed on hover. Is it possible to have the full code displayed and exactly where to add it? Thank you so much!

1 Like
18

@GMco

Thanks for post

yes can you please flow this step

https://community.shopify.com/c/Shopify-Design/Collection-Add-a-hover-effect-to-product-images-on-your/td-p/614960

1 Like
19

Thank you for your quick reply. However, I followed the directions step by step and it is not working for me. Not sure what I did wrong. Any other advice?

1 Like
20

@GMco

Thanks for it

It can be done by doing some code customization. please send me a personal message and we can discuss what you’d like

1 Like