Reveal second image on hover - Debut theme

Solved
iamcurious
Excursionist
21 0 11

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

Accepted Solution (1)

Accepted Solutions
KetanKumar
Shopify Partner
31496 3139 10530

This is an accepted solution.

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

 

 

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

View solution in original post

Replies 90 (90)
KetanKumar
Shopify Partner
31496 3139 10530

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-yo...

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
iamcurious
Excursionist
21 0 11

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 %}
<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>

 

 

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!

KetanKumar
Shopify Partner
31496 3139 10530

@iamcurious 

Thanks for store details 

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

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
iamcurious
Excursionist
21 0 11

@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!

KetanKumar
Shopify Partner
31496 3139 10530

This is an accepted solution.

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

 

 

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
iamcurious
Excursionist
21 0 11

Thank you very much! This worked!

KetanKumar
Shopify Partner
31496 3139 10530

@iamcurious 

Thanks for update and your compliment.

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
Twooogirlsco
Excursionist
11 0 6

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!

KetanKumar
Shopify Partner
31496 3139 10530

@Twooogirlsco 

Thanks 

can you please try this

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

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
Twooogirlsco
Excursionist
11 0 6

Sure, thank you!

Twooogirlsco
Excursionist
11 0 6

Hi Ketan Kumar,

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

KetanKumar
Shopify Partner
31496 3139 10530

HEllo, @Twooogirlsco 

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

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
Twooogirlsco
Excursionist
11 0 6

noted. how much do you charge for this hover?

KetanKumar
Shopify Partner
31496 3139 10530

i have send PM

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
Chero
Tourist
7 0 3

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

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

 

GMco
Tourist
5 0 3

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!

KetanKumar
Shopify Partner
31496 3139 10530

@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-yo...

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
GMco
Tourist
5 0 3

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?

KetanKumar
Shopify Partner
31496 3139 10530

@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

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