Solved

How can I enable second image hover on mobile product cards?

agori
New Member
5 0 0

Hi! I want the product cards to show their second image on hover, I have checked the option and it works on desktop, but it doesn't work on mobile... I need it to work on mobile too. Any help please?

 

Here's the store https://agori-jewellery.com/

I'm using Dawn 7.0.1

Accepted Solution (1)

EBOOST
Shopify Partner
835 229 256

This is an accepted solution.

Hi @agori 

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code
2. Assets/component-card.css
3. Add code below to bottom of file

.card-wrapper:hover .media.media--hover-effect>img:first-child:not(:only-child) {
    opacity: 0;
}
.card-wrapper:hover .media.media--hover-effect>img+img {
	opacity: 1;
    transition: transform var(--duration-long) ease;
    transform: scale(1.03);
}
Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤

View solution in original post

Replies 117 (117)

GemPages
Shopify Partner
5589 1261 1218

Hi @agori,

 

Glad to support you today.

 

To can show second image on Mobile, you can check out my suggestion below to make it:

 

1. Go to Edit code on Online Store:

GemPages_0-1673273393719.png

 

2. add my code  above the </body> tag on Theme.liquid: 

<style>

	@media max-width(767px) {
		.card-wrapper:hover .media.media--hover-effect>img+img {
			opacity: 1 !important;
		}
	}
</style>

 

I hope you find the answer helpful.

Kind & Best regards,
GemPages Support Team.

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
agori
New Member
5 0 0

I tried it like this, but still doesn't work

agori_0-1673275000271.png

 

eneskbm
New Member
51 0 0

Hi I've tried this one. However, it didn't work for me 😞

EBOOST
Shopify Partner
835 229 256

This is an accepted solution.

Hi @agori 

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code
2. Assets/component-card.css
3. Add code below to bottom of file

.card-wrapper:hover .media.media--hover-effect>img:first-child:not(:only-child) {
    opacity: 0;
}
.card-wrapper:hover .media.media--hover-effect>img+img {
	opacity: 1;
    transition: transform var(--duration-long) ease;
    transform: scale(1.03);
}
Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤
agori
New Member
5 0 0

yep! It worked!! Thank you so much!

eneskbm
New Member
51 0 0

Hello. In the edit code i cannot find this "Assets/component-card.css" 

 

Do you have another solution for this?

DarrenLeslie
Visitor
1 0 0

I have used this, hover over image now works but when you have stopped touching that image it does not revert back to the first image, it is stuck on the hover image. Any advice?

EBOOST
Shopify Partner
835 229 256

Hi @DarrenLeslie!

I suggest add more code below

.card-wrapper:not( :hover ) .media.media--hover-effect>img:first-child:not(:only-child) {
    opacity: 1;
}
.card-wrapper:not( :hover ) .media.media--hover-effect>img+img {
	opacity: 0;
    transition: transform var(--duration-long) ease;
    transform: scale(1);
}
Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤
eneskbm
New Member
51 0 0

Hi,

 

As I mentioned you before I cannot find "Assets/component-card.css" 

I use theme called Flex by Out of the Sandbox.

Could you please help me out as well?

Thanks,

EBOOST
Shopify Partner
835 229 256

Hi @eneskbm ,

You can add code below to layout/theme.liquid file before </body> tag.

 

<style>
.card-wrapper:not( :hover) .media.media--hover-effect>img:first-child:not(:only-child) {
    opacity: 1;
}

.card-wrapper:not( :hover) .media.media--hover-effect>img+img {
    opacity: 0;
    transition: transform var(--duration-long) ease;
    transform: scale(1);
}
</style>

 

You can refer the screenshot below:

ecstyletheme-·-Edit-Refresh-·-Shopify.png

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤
eneskbm
New Member
51 0 0

Hi @EBOOST ,

 

Thank you for your reply. Unfortunately, it didn't work 😞

 

By the way, I use Flex Theme 3.0.0 by Out of the Sandbox.

EBOOST
Shopify Partner
835 229 256

Hi @eneskbm ,

With your theme. We can't use this code.

You can follow screenshot below to update code.

1. Go to Assets/utilities.js

2. Find showVariantImage function

3. Update 'mouseenter' to 'mouseover'  and 'mouseleave' to 'mouseout'

EBOOST_0-1687338910826.png

 

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤
eneskbm
New Member
51 0 0

Hi again,

I much appreciate your effort again but it didn't work either 😞

As you can see I applied exactly what you asked me. I really don't get it why it's not working at all 😞

Screen Shot 2023-06-21 at 1.58.07 PM.png

EBOOST
Shopify Partner
835 229 256

Hi,

Sorry. I missed a screenshot.

EBOOST_0-1687360686342.png

 

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤
eneskbm
New Member
51 0 0

Hi again,

 

First of all, thanks a bunch that you've been trying to help me.

 

It partly worked. That's a big step to be honest. You can check by entering our website on mobile to see the way it works. You need to push the image little bit hardly not just hovering so that you can see the second image.

 

What I want it's to be worked: you can refer to Messika's website on mobile in the link below to see the difference between ours and theirs. It would be amazing if we can set it up and works such way. You don't need to push just hover and browse around the image and it switchs to the 2nd image immediately in Messika website. Hope you understand me.

 

https://www.messika.com/en/jewelry/categories/diamond-ring

 

Hope we can revise and fix it 🙂

Cheers,

hanihachache
New Member
9 0 0

Hello @EBOOST 

I am having the same issue.

The hover effect worked perfectly on desk top, but partially on mobile.

My theme is Dawn 12.0.0.

Can you please support.

Thank you

 

 

EBOOST
Shopify Partner
835 229 256

Hi,


May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code

EBOOST_1-1672356985580.png
2. Assets/base.css

3. Add code below to end of file

body .card-wrapper:hover .media.media--hover-effect>img+img {
    opacity: 1;
    transition: transform var(--duration-long) ease;
    transform: scale(1.03);
}

body .card-wrapper:hover .media.media--hover-effect>img:first-child:not(:only-child) {
    opacity: 0;
}

 

 

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤
hanihachache
New Member
9 0 0
Hello. Thank you.

Unfortunately, it is still the same status: I need to push hard on the first
picture to see the second picture, and most of the time, it opens the item
page instead of just seeing the second picture.

Can you please support.

Thank you
EBOOST
Shopify Partner
835 229 256

Hi,

If you don't want touch on image to redirect to PDP after that you can use code below to replace the code above that I suggested.

body .card-wrapper:hover .media.media--hover-effect>img+img {
    opacity: 1;
    transition: transform var(--duration-long) ease;
    transform: scale(1.03);
} 
body .card-wrapper:hover .media.media--hover-effect>img:first-child:not(:only-child) {
    opacity: 0;
}
@media(max-width: 749px){
  .card--standard > .card__content .card__information {
    position: relative;
  }
  .card--standard .card__inner .card__media + .card__content {
    display: none;
  }
}
Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤
hanihachache
New Member
9 0 0
Thank you so much. We are almost there. The new coding respond to 90% of
what I was looking for.

In fact, with the new coding, I need to press on the image slightly to see
the second image. Whereas, on other web site, you just need to touch the
picture to have the second image to appear.

Can you please check the below site on your mobile so you can understand
exactly what I mean:

* efcollection.com

Once again, thank you for all your support.

Best Regards,

Hani
EBOOST
Shopify Partner
835 229 256

Hi,

With your theme. You can add more code below

@media(max-width: 749px){
	.productitem--image-link {
		pointer-events: none;
	}
}
Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤
hanihachache
New Member
9 0 0
Hello,

I need again your help.

When the client click on the picture, he can see the second picture.
However, if he wants to buy it, it does work if he clicks on the picture
again. He needs to click the price or description. He can we fix that
please.

Once again, this is on the mobile only. On the desk top,we are not facing
such issue.



Thank you in advance,



Hani


eneskbm
New Member
51 0 0

Hi again @EBOOST ,

 

Looking forward to hearing from you 😞

EBOOST
Shopify Partner
835 229 256

Hi @eneskbm ,

You

<style>
.has-secondary-image-swap.product__grid-item .product-wrap .image-element__wrap img.swap--visible,
.has-secondary-image-swap.product__grid-item .product-wrap .image-element__wrap img{
    opacity: 0;
    visibility: hidden;
    height: 0!important;
}
.has-secondary-image-swap.product__grid-item .product-wrap .image-element__wrap:first-child img.swap--visible,
.has-secondary-image-swap.product__grid-item .product-wrap .image-element__wrap:first-child img{
    opacity: 1;
    visibility: visible;
    height: auto!important;
}
.has-secondary-image-swap.product__grid-item .product-wrap:hover .image-element__wrap:first-child img.swap--visible,
.has-secondary-image-swap.product__grid-item .product-wrap:hover .image-element__wrap:first-child img{
    opacity: 0;
    visibility: hidden;
    height: 0!important;
}
.has-secondary-image-swap.product__grid-item .product-wrap:hover .image-element__wrap + noscript + .image-element__wrap img{
    opacity: 1;
    visibility: visible;
    height: auto!important;
}
</style>

try to add code below to layout/theme.liquid and before </body> tag

 

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤
eneskbm
New Member
51 0 0

Yess!!! It worked perfectly!!

 

Thank you sooo much. I really appreciate it!!

 

Best,

deary626
Visitor
1 0 0

Hi EBOOST,

 

This is not working for me. I've tried the code and it only work when you click and hold and not hover. this is my site www.syftapparel.com Been trying everything besides this 1. Go to Assets/utilities.js as I don't see it anywhere in edit codes. 

elsaelsa
Tourist
6 0 2

Hi, 

does anyone know how to do this on impulse theme? Hover works on desk but not on mobile. Thank you. 

EBOOST
Shopify Partner
835 229 256

Hi @elsaelsa ,

May I suggest to update code these steps:

1. Go to Store Online-> theme -> Edit code

EBOOST_1-1672356985580.png

2. Layout/theme.liquid

3. Add code below to end of file and before </body> tag. You can refer screenshot.

<style>
.grid-product__image-mask .grid-product__secondary-image {
  display: block !important;
}
</style>

EBOOST_0-1688523684583.png

 

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤
elsaelsa
Tourist
6 0 2

Works perfectly, thank you SO much!!

Tasos
Tourist
6 0 2

That was a great answer for me and you provide me a solution I couldn’t find for a long time! Thank you very much! Could you go one step further and provide a code to change the images only when sliding left or right and not on hover? 

Jbabb
Excursionist
30 0 2

Hello!  Thank you for the support!  I use Impulse too, and this worked great in regular collectio view, but in the homepage I have a "featured collection" but displayed as carrousell, I selected the "enable swipe on mobile" option in the theme. Can you help me too?

shoplauracantu.com

Thanks!!

Jacqu6s
Visitor
2 0 0

Hello there, this method worked for me when I was using Dawn. I purchased Streamline now and wonder how I can update the code in Streamline as things are a bit different. Thanks

EBOOST
Shopify Partner
835 229 256

Hi @Jacqu6s ,

Could you share your store url and protect password?

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤
Jacqu6s
Visitor
2 0 0
EBOOST
Shopify Partner
835 229 256

Hi,

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code
2. Assets/base.css

.grid-product__content:hover  .product-slide .flickity-slider {
        position: static!important;
    }
    .grid-product__content .product-slider .product-slide {
        display: none!important;
        opacity: 1!important;
    }
    .grid-product__content .product-slider .product-slide:nth-child(1) {
        display: block!important;
    }
    .grid-product__content:hover  .product-slider .product-slide:nth-child(2) {
        display: block!important;
        top: 0;
        left: 0;
        position: absolute;
        z-index: 2;
        width: 100%;
        height: 100%;
     
    }
    .grid-product__content .product-slider .product-slide,
    .grid-product__content .flickity-slider {
        transform: none!important;
    }
    .grid-product__content .product-slider .product-slide .image-wrap {
        animation: none!important;
   }
Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤
yds41
New Member
14 0 0

I put that code but then it stays on the second image 

EBOOST
Shopify Partner
835 229 256

Hi,

Could you share your store url and protect password? We will help to check it.

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤
yds41
New Member
14 0 0
EBOOST
Shopify Partner
835 229 256

Hi,

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code
2. Assets/base.css

.card-wrapper:hover .media.media--hover-effect>img+img {
        opacity: 1!important;
    }
Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤
yds41
New Member
14 0 0

It still stays on the second image. nothing changed

EBOOST
Shopify Partner
835 229 256

You didn't want show second image on mobile when hover? code above only show second image on mobile when hover.

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤
yds41
New Member
14 0 0

I did want it to show the second image on hover but then it stays on the second image rather then you go on the computer when you hover over it goes on the second image but when you let go on the picture it goes back to the first image you know what I’m saying?

EBOOST
Shopify Partner
835 229 256

Hi,

I am not sure. However, I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code
2. Layout/theme.liquid

3. Add code below to end of file and before </body> tag

<script src=//ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".card-wrapper").on('mouseout touchend', function(){
    $(this).addClass('card-wrapper-leave');
  });
  $(".card-wrapper").on('mouseover touchstart',function(){
    $(this).removeClass('card-wrapper-leave');
  });
});
</script>

4. Assets/component-card.css

5. Add code below to end of file

.card-wrapper.card-wrapper-leave .media.media--hover-effect>img:first-child:not(:only-child) {
   opacity: 1;
 }
   .card-wrapper.card-wrapper-leave .media.media--hover-effect > img + img {
     opacity: 0;
     transform: scale(1);
   }

 

EBOOST_0-1690538936591.png

 

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤
yds41
New Member
14 0 0

it didn't work if you go on Dior.com you'll see it works for them

gabebm
Visitor
1 0 0

Hi can you help me please I have tried everything you suggested on this post but nothing works for my store.

Here is the link of it https://thediscountcounter.com/

Mandrew
Tourist
7 0 0

Hi @EBOOST , thank you for your sharing

 

My website is https://www.snaptips.shop/ with the theme broadcast 5.1.3.

I'm try to show the second image (or more) of our products without click into the product.

It works on website, but not working on moblie. Could you take a look please?

 

Thank you very much!

 
EBOOST
Shopify Partner
835 229 256

Hi,

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code
2. Assets/theme.css
3. Add code below to end of file

body main .double__image .product-item__bg__under, 
body main .product-item--overlay-text .product-item__bg__under {
    opacity: 0;
    display: block!important;
    visibility: visible!important;
}
body main .double__image:hover .product-item__bg__under, 
body main .product-item--overlay-text:hover .product-item__bg__under {
    opacity: 1;
     display: block!important;
    visibility: visible!important;
}
Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤
Mandrew
Tourist
7 0 0

It works. thanks a lot!

ogsensei
Visitor
1 0 0

hi , i use dawn 12.0.0 and i used this code and second image appears after long press , i want it to change automatically after certain time (ex:2 or 3 sec), can you help me with it . My store -https://ogsensei.com/