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

[MeatHands]

Hi again,

Ok, that worked, but there are just a couple of minor issues. First, when you let go, it stays on the second image instead of switching back to the first like on desktop. The second issue is, if you hold your finger on the product for more than a second it highlights the image, instead of pulling up a product preview after about 2 seconds like previous. I have attached a screenshot of what is happening as well as what our backend looks like.

Please let me know if it would be helpful to see anything else, and thank you so much for your help!

[Kuramoha]

Hello I’m using impact theme version 4.3.4 and I want to implement this mobile hover image transition I’ve tried most of solutions above but they did not work can you provide any tips for me https://www.boujisphere.com/ this is my website link

[EBOOST]

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 .product-card--show-secondary-media .product-card__figure:hover .product-card__image--primary {
    opacity: 0;
}

body .product-card--show-secondary-media .product-card__figure:hover .product-card__image--secondary {
    opacity: 1;
    display: block;
}
@media(max-width: 749px){
  body .product-card--show-secondary-media .product-card__figure > a{
    transition: all 1s;
    pointer-events: none;
  }
}

[hanihachache]

Hello,

Thank you for your message.

Please note I do not have " Assets/theme.css" in my coding.

Can you please advise.

Thank you,

Hani Hachache

[EBOOST]

Hi Hani,

With your case.

May 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 tag

[hanihachache]

Hello,

Thank you for your support.

Unfortunately it did not work. I still need to press on the description or
the price to enter the page to buy it.

Can you please support.

Thank you,

Hani Hachache

[EBOOST]

Hi,

Did you add code above? I checked your store (https://www.efcollection.com/). However, I don’t see the code.

[hanihachache]

Hello,
Yes, I added it.
My website is www.griffjewelry.com
Thank you

[EBOOST]

Hi,

With this store. Maybe I suggest code below:

Note: When you use this code after you need touch twice times to redirect to product page. the first touch will show the second image. The second touch will go to product page.

[hanihachache]

Hello again.

Thank you for your support.

It is not working properly: I touch one time the first picture, it shows the
second picture and redirect me directly to the product page. All this in one
touch instead of 2 touches.

Please advise.

Thank you,

Hani

[Kuramoha]

Heelo Again E boost thanks for your assistance but unfortunately the code you provided me earlier didn’t work as intended infact it just disaple the product image from being clicked but it didn’t give me the hover affect I wanted …

[Kuramoha]

Hello again Eboost I made some adjustments to the code and it worek but not exactly as intended You can check my website to see how it works www.boujisphere.com first I want the the transitions between images to be more smooth and second I do not want the second image to appear when I click a single click . The single click is supposed to open the product page and the hold or hover touch to show the second image I tried many adjustments but it didn’t work … I hope you can help me + I tried adding some java scripts but I didn’t now relly where to add it

[Gilmerark]

Hello EBOOST, i have the same problem with my store, i cannot see the second Image on hover on mobile version. I use minimoog theme and i had try all the solutions that you post here.

[Matej814]

Hello Eboost, I’m sorry but it doesn’t work for me on the prestige theme.
Do you have another option please?
Thank you Matej

[tamziswimwear]

Hello @EBOOST I appreciate your help and knowledge you share with fellow entrepreneurs! I am using the Sense theme 12:0:0, do you have tips how I can implement it on this theme? Your help is highly appreciated! Kind regards, Casper

[befoundsocials]

Hello, I have tried most of the codes you have suggested in all the threads and nothing has worked for the theme I am trying to edit.

I am using Palo Alto for a website and I would like to have the product photos on mobile to change to the second photo hover throughout the homepage and all other pages with products please. Can you please let me know the code for this theme please. Thank you.

[Jbabb]

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?

Laura C Jewelry | Jewelry, gifts and accessories

Thanks!!

[Ted69]

Hey EBOOST,

I’m having issue with “second picture over hover” setting in my website. I’m using Dawn 12 version.
This hover option is turned on in both Collection Grid and Product grid blocks (Desktop).
Collection Grid is working perfectly.
Product Grid not working.
Is it possible to fix it? + enable second picture hover function for mobile too?

Thank you!
Website milastudio.co

[EBOOST]

Hi @Ted69 ,

You try to go to Go to Store Online-> theme → Customize → collection → check whether this option has been turn on.

[EBOOST]

Hi @tamziswimwear ,

May I suggest to update code these steps:

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

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);
}
@media(max-width: 989px){
 body  .card--card.card--media>.card__content {
    position: relative;
  }
}