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

[EBOOST]

Hi @KatTix ,

• It’s been set at end of file

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

[KatTix]

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]

Hi,

You try code below:

[KatTix]

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

[KatTix]

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]

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?

[pochesetfils]

I’m a looking to do the same thing on mobile in the new version of the IMPACT theme. Any help? @EBOOST

[EBOOST]

Hi @pochesetfils ,

For Impact theme new version.

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

.product-card--show-secondary-media .product-card__figure:hover .product-card__image--primary {
		opacity: 0;
	}
	.product-card--show-secondary-media .product-card__figure:hover .product-card__image--secondary {
	    opacity: 1;
	}

[KatTix]

Hi @EBOOST ,

Right now the second image only shows if I long press. Any code I can add so it works just by touching while scrolling? I’m on the ssense theme.

[pochesetfils]

That doesn’t show the second image, it shows a white/empty 2nd image

[EBOOST]

Hi,

You can add more code below:

body .product-card__image--secondary {
display: block;
}

[brokenyolk]

Hi, your information has been extremely helpful! I tried this on my Broadcast theme and it works perfectly on mobile. However, it created an issue on desktop, here is what is happening open my Shopify website with the Broadcast theme on the collection page:
-product photo is image 1
-hover with cursor and image 2 is displayed
-remove cursor and image 1 is displayed
-hover again over the same image and no image is displayed (blank white)

Also important to note that it works perfectly on mobile, this only happens on desktop. This problem only started after I applied the following css code to enable the mobile hover:

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

[Mymrtbone]

Hey @EBOOST ,
I used following code to have a “hover” effect on mobile as well, but it doesn´t revert back, maybe because I use a gif to have a video as the second image. Is there a way to have it revert back after a certain time? I use a free theme, so probably based on DAWN and here is the store: My Store (15dfba-e3.myshopify.com) pw: YesYes [it’s about the chasen at the bottom of the page just as a reference]

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

[SmartO]

Each theme needs specific coding to make this work for mobile. I engaged eboost to write this code and make some other changes to my website smartopals.com.au - like listing products “new to old” by default on the products page.

Well worth the money.

[EBOOST]

Thank you so much. Love to work with you and Looking forward to work with
him again very soon!!

[EBOOST]

Hi @SmartO ,

Thank you so much. Love to work with you and Looking forward to work with you again very soon!!

[margaretstick1]

Hi EBOOST

I need help doing this with the trade theme. I have been thorugh all the lines of code in the thread and nothing works! Please help

[EBOOST]

Hi @margaretstick1 ,

You try to get code here https://github.com/eboost10/2640367/blob/main/fix-hover-second-image-ios.liquid

Then go to Go to Store Online-> theme → edit code → layout/theme.liquid → Add code above to end of file ( before tag)

[Adelina888]

Hi @EBOOST I have tried most of your codes and none of them worked for me. I am having the same issue but my theme is Sleek which I don’t think has many of these codes available to me.

My website is www.healsi.com.au

Thank you

[mohan610]

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.