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

[agori]

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

[yds41]

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]

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

[yds41]

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

[gabebm]

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]

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]

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

[Mandrew]

It works. thanks a lot!

[ogsensei]

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/

[hanihachache]

Hello.

I am using dawn.

I added the above code in Assets/component-card.css

It partly worked.  You need to push the image little bit hardly not just hovering so that you can see the second image.

Can you please help.

Thank you

[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. 

[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. 

[MelissaEvelyn]

It worked! Thank you, that was very helpful.

[3dconfectionery]

Hello EBOOST, 

I have been trying to accomplish this for a long time! I have been trying to do this with all codes provided and it doesn't work. Do you have a solution for Shopify Honey theme? Store link is: 385ee2-11.myshopify.com  Password is: beipep Thank you!!!!

[EBOOST]

Hi @3dconfectionery,

May I suggest to update code these steps for Honey theme:

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

body .product-card-wrapper:hover {
    transform: scale(1.024);
}
body .product-card-wrapper:hover .product-card__image--hover {
  opacity: 1;
  visibility: visible;
}

[jburch]

Hi! I’m trying to do the same in Pipeline. Would so appreciate the code. Thank you!

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

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

[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.

[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 </body> 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

[EBOOST]

Hi @Adelina888 ,

With your theme. May I suggest add code below end of  Assets/theme.css file

  .product-card__wrapper:hover .product-card__image-wrapper .product-card__image--second {
    display: block;
  }
  .product-card__wrapper:hover .product-card__image-wrapper:not(.product-card__image-wrapper--main-only) .product-card__image--main {
    opacity: 0;
  }
  .product-card__wrapper:hover .product-card__image-wrapper .product-card__image--second {
    opacity: 1;
    visibility: visible;
    transform: scale3d(1, 1, 1);
  }

[micahhofer]

Hi there 

I really could use some help with that too i‘m on Dawn 15.3.0 and i almost got it but it just works the first time and after rhat i dosen‘t any more 

could you maybe right me a code which that dosen happen, i also have similar problem like i have to press very long to get the hover effect so mostly the product site get open 

Thank you so much in advance 

[EBOOST]

Hi @micahhofer ,

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

[luxendary]

Hi all!

I need a solution for the same problem but in the spotlight 2.0 theme.

[EBOOST]

Hi,

Maybe I suggest code below for spotlight 1.0 theme

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

[Cuddlie]

Hi EBOOST

Do you mind helping me aswell? 

The hover function is great on desktop but doesn't work on phone.
my url is www.cuddlie.se
password: hejsan

I really appreciate the help.

Kinds regards
Cuddlie

[EBOOST]

Hi,

Because the HTML structure is different. So you can use code below the show second image on mobile

    .product-block:hover.hover-image .image--hover-second .image__first, .collection-block:hover.hover-image .image--hover-second .image__first, .user-is-tabbing .product-block.hover-image .image--hover-second .image__first, .user-is-tabbing .hover-image.collection-block .image--hover-second .image__first {
        transform: scale(1.02);
        opacity: 0;
        transition-delay: 0.1s;
    }
    .product-block:hover.hover-image .image--hover-second .image__second, .collection-block:hover.hover-image .image--hover-second .image__second, .user-is-tabbing .product-block.hover-image .image--hover-second .image__second, .user-is-tabbing .hover-image.collection-block .image--hover-second .image__second {
    opacity: 1;
    transform: scale(1.04);
   }
   body .product-block .image__second, .collection-block .image__second {
    display: block;
   }

[Cuddlie]

Hi EBOOST,

I tried copying the code you wrote in my style.css.liquid but it doesn't seem to work.

[EBOOST]

Hi,

I checked your file. You have an error. You can  check screenshot to fix

[cashmerecasper]

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

[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__figure:has(.product-card__image--secondary):hover>.product-card__media .product-card__image--secondary {
    opacity: 1;
    display: block;
    mix-blend-mode: plus-lighter;
}
body .product-card__figure:has(.product-card__image--secondary):hover>.product-card__media .product-card__image--primary {
    opacity: 0;
}

[BBB23]

Hello @EBOOST . it seems like you are the master at this. Any tips for Beyond theme?

THANK YOU

[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__figure:has(.product-card__image--secondary):hover>.product-card__media .product-card__image--secondary {
    opacity: 1;
    display: block;
    mix-blend-mode: plus-lighter;
}
body .product-card__figure:has(.product-card__image--secondary):hover>.product-card__media .product-card__image--primary {
    opacity: 0;
}

[LoveSTMG]

Hi EBOOST,

You are the Expert of this! Followed all the answers but they are not working for Broadcast theme. Any suggestion?

Thank you

[EBOOST]

Hi,

Broadcast is not free theme. So could you please share your url store? We will help to check it.

[LoveSTMG]

Sure, the url is: www.shootthemoongifts.com . Looking forward to hearing from you. Thank you!

[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 main .double__image .product-item__bg__under, 
body main .product-item--overlay-text .product-item__bg__under {
    opacity: 0;
}
body main .double__image:hover .product-item__bg__under, 
body main .product-item--overlay-text:hover .product-item__bg__under {
    opacity: 1;
}

[LoveSTMG]

Hi @EBOOST , 

Thank you for your kindly help. I tried this but it's not working. any suggestion?

[EBOOST]

Hi,

May I suggest to update code these steps:

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

main .product--root[data-hover-image=loaded]:hover .product--image[data-item] {
    opacity: 0;
}
main .product--root[data-hover-image=loaded]:hover .product--hover-image {
    opacity: 1;
}
main .product--root .product--hover-image {
	display: block;
}

[LoveSTMG]

Hi @EBOOST ,

I had a check but can't fin the file 'theme--async.css'. See attached screenshot.

[EBOOST]

Hi,

Sorry. I suggested this code for Beyond theme.  So may I suggest to update code these steps for your theme:

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;
}
body main .double__image:hover .product-item__bg__under, 
body main .product-item--overlay-text:hover .product-item__bg__under {
    opacity: 1;
}

[LoveSTMG]

Hi @EBOOST ,

I tried this but it’s not working on the mobile 😞 Any other change needs to be done?

Thank you!

[EBOOST]

Hi,

Could you try to code below?

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

[LoveSTMG]

It works perfectly! Thank you so much!