Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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);
}
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:
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.
I tried it like this, but still doesn't work
Hi I've tried this one. However, it didn't work for me 😞
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);
}
yep! It worked!! Thank you so much!
Hello. In the edit code i cannot find this "Assets/component-card.css"
Do you have another solution for this?
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?
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);
}
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,
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:
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.
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'
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 😞
Hi,
Sorry. I missed a screenshot.
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,
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
Hi,
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);
}
body .card-wrapper:hover .media.media--hover-effect>img:first-child:not(:only-child) {
opacity: 0;
}
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;
}
}
Hi,
With your theme. You can add more code below
@media(max-width: 749px){
.productitem--image-link {
pointer-events: none;
}
}
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
Yess!!! It worked perfectly!!
Thank you sooo much. I really appreciate it!!
Best,
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.
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.
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
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 <style> and </style>)
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?
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>
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
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?
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?
Hi,
does anyone know how to do this on impulse theme? Hover works on desk but not on mobile. Thank you.
Hi @elsaelsa ,
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 </body> tag. You can refer screenshot.
<style>
.grid-product__image-mask .grid-product__secondary-image {
display: block !important;
}
</style>
Works perfectly, thank you SO much!!
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?
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!!
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
Hi @Jacqu6s ,
Could you share your store url and protect password?
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;
}
I put that code but then it stays on the second image
Hi,
Could you share your store url and protect password? We will help to check it.
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;
}
It still stays on the second image. nothing changed
You didn't want show second image on mobile when hover? code above only show second image on mobile when hover.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025