Re: Second image on hover for mobile

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
1314 330 398

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
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips

View solution in original post

Replies 140 (140)

GemPages
Shopify Partner
5625 1262 1269

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
Tourist
51 0 1

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

EBOOST
Shopify Partner
1314 330 398

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
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
agori
New Member
5 0 0

yep! It worked!! Thank you so much!

eneskbm
Tourist
51 0 1

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
1314 330 398

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
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
eneskbm
Tourist
51 0 1

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
1314 330 398

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
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
eneskbm
Tourist
51 0 1

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
1314 330 398

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
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
eneskbm
Tourist
51 0 1

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
1314 330 398

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
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
eneskbm
Tourist
51 0 1

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
1314 330 398

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
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
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
1314 330 398

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
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
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
1314 330 398

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
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
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
Tourist
51 0 1

Hi again @EBOOST ,

 

Looking forward to hearing from you 😞

EBOOST
Shopify Partner
1314 330 398

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
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
eneskbm
Tourist
51 0 1

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. 

mohan610
Shopify Partner
32 3 5

Hi 
Why are you including the jQuery CDN file for this feature? This can be easily implemented using Shopify's native code. Adding a jQuery CDN may impact your store's speed. If you're still facing any issues, feel free to contact me.

➜ Solved it? Hit Like and Accept solution!
➜ Optimize/Customize your Store with Volume/Tier Discount
➜ Need a Shopify developer? Hire me at Upwork OR Everythinginhand
KatTix
New Member
8 0 0

Hi, if I’m on the Sense theme, where should I enter this code? I don’t see a body tag when I search in theme.liquid

EBOOST
Shopify Partner
1314 330 398

Hi @KatTix ,

- It's been set at end of file

EBOOST_1-1723159404341.png

 

Or  you can  Go to Store Online-> theme -> edit code -> Assets/base.css -> add code to end of this file ( rmb remove <style> and </style>)

EBOOST_2-1723159521866.png

 

EBOOST_0-1723159276119.png

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
KatTix
New Member
8 0 0

Thank you so much! I found it and tried that code and it didn’t work. I think I’ve tried all the codes on this thread it their respective places and none of them have worked so far.

 

Do you have any suggestions for the Sense theme?

EBOOST
Shopify Partner
1314 330 398

Hi,

You try code below:

<style>
  .card .media.media--hover-effect > img:only-child,
  .card-wrapper .media.media--hover-effect > img:only-child {
    transition: transform var(--duration-long) ease;
  }

  .card:hover .media.media--hover-effect > img:first-child:only-child,
  .card-wrapper:hover .media.media--hover-effect > img:first-child:only-child {
    transform: scale(1.03);
  }

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

  .underline-links-hover:hover a {
    text-decoration: underline;
    text-underline-offset: 0.3rem;
  }
</style> 
- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
KatTix
New Member
8 0 0

Hi, before I saw your response I asked Shopify for help and they put in the code in the screenshot. It’s working now but only when I long press. Is there a way to make it so the second photo will show just from touching it normally during scrolling? Thank you again

Screenshot 2024-08-09 at 12.35.09 PM.png

KatTix
New Member
8 0 0

Hi, just checking in to see if you saw my last message and hopefully can help? Before I saw your answer, Shopify customer service added code that works but only if I long press. Is there anything I can add so it just appears as I touch it while swiping?

KatTix
New Member
8 0 0

Hi, just checking in to see if you saw my last message and hopefully can help? Before I saw your answer, Shopify customer service added code that works but only if I long press. Is there anything I can add so it just appears as I touch it while swiping?

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
1314 330 398

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
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
elsaelsa
Tourist
6 0 2

Works perfectly, thank you SO much!!

Tasos
Shopify Partner
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
34 0 3

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
1314 330 398

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
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
Jacqu6s
Visitor
2 0 0
EBOOST
Shopify Partner
1314 330 398

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
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
yds41
New Member
14 0 0

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

EBOOST
Shopify Partner
1314 330 398

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
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
yds41
New Member
14 0 0
EBOOST
Shopify Partner
1314 330 398

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
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
yds41
New Member
14 0 0

It still stays on the second image. nothing changed

EBOOST
Shopify Partner
1314 330 398

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
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips