Reveal second image on hover - Debut theme

Solved
iamcurious
Excursionist
21 0 12

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

Replies 109 (109)
masuimimax
Tourist
3 0 2

Got it working on Debut theme but when a product only has one image it shows a white square with No-Image. How do I change that so it just shows the main image when a product only has one image?

KetanKumar
Shopify Partner
32443 3258 10828

@masuimimax 

yes please show me issue images

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
masuimimax
Tourist
3 0 2
KetanKumar
Shopify Partner
32443 3258 10828

@masuimimax 

i have check its working fine doesn't issue

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
Godzhand
Tourist
39 0 2

Having problem with stacked image on mobile only. I manage to make it work on desktop/laptop version but for mobile it has stacked images.

Store url: godzhand.myshopify.com

theme.css:

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

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>

 

KetanKumar
Shopify Partner
32443 3258 10828

@Godzhand 

sorry for that issue but on mobile device doesn't work hover its was convert to hover to touch event 

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
Godzhand
Tourist
39 0 2

okay, but at the very least can you help me so it does not show 2 stacked images on mobile? So it just go back to the default one.

KetanKumar
Shopify Partner
32443 3258 10828

@Godzhand 

can you please show me issue so i will check and guide 

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
Godzhand
Tourist
39 0 2

Hi,

So basically on desktop/laptop version it works fine, but when it's on mobile, it will look like this.

Godzhand_0-1638995562897.png

How can I make it to be able to just be 1 picture without hover/default, but if you can make it to hover too that would be awesome.

BeresMedia
Tourist
7 0 3

@KetanKumar Can you please help me? When on my products on mobile, the menu bar is disabled and the logo in the header has a weird box around it - can you please take a look? www.ballooncouture.com.au (from your phone)

EllaFS
Excursionist
21 0 6

Hi Ketan, 

 

Tried adding this code but the hover didn't work.

 

We'd like it so that if you hover on the first image, it shows the second image please. Can we have it on the homepage products but also on each product page itself too?

 

Thanks,

Ella

nicky11
Excursionist
19 0 9

Hey Ketan, I somehow managed to make it work with the previous mentioned steps from this post however I have one little problem. My images are literally doubled. 
Can you give it a look and tell me how can I remove non-rotatable pictures of my products? 

Here's the photo to better understand what I am asking for.

https://hustlebabe-shop.myshopify.com/    - password:009900mas.png

KetanKumar
Shopify Partner
32443 3258 10828

@nicky11 

this only singale image 

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
nicky11
Excursionist
19 0 9

The upper row that I've marked, I want to remove it and have only rotatable product images to stay.

KetanKumar
Shopify Partner
32443 3258 10828

@nicky11 

yes, please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.

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

 

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
nicky11
Excursionist
19 0 9

This didn't help at all. I assume you didn't understand what I'm trying to achieve. There are duplicated pictures at the moment, right? One is static and the other is rotatable (hover over display second image), right? I want to remove all static product images and have ONLY rotatable ones displayed.

KetanKumar
Shopify Partner
32443 3258 10828

@nicky11 

yes but what about a single image? at that time show only one

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
nicky11
Excursionist
19 0 9

None of the products are single image, they are just displayed like that on site therefore I want to remove them and leave only double images.

 

nicky11
Excursionist
19 0 9

https://hustlebabe-shop.myshopify.com/collections/woman - 009900

Go to this link. The images I have crossed, I want to remove because they DON'T rotate. The others that rotate, I want to keep them. Can I achieve that somehow?


12345.png

nicky11
Excursionist
19 0 9

I will create separate post and try to explain as best as I can what I am looking for. Thank you once again for your willingness to help !