Hi everyone,
on my HP I have multiple carousels with collections. Everything works fine on desktop but on mobile version the products randomly show the second picture instead of the first one. I need all products to show the first picture as that is the actual product picture and the second one is a picture on model (which appear on hover on desktop).
this is the link to the shop: https://glowbe.store/
Many thanks for your help!!
Lucy
Could you please send me a screenshot or a short video showing where the issue is occurring? I just checked the store, but I wasn’t able to reproduce the problem on my end.
Best regards,
Devcoder 
Hi Lucy,
This usually happens when the theme’s second-image rollover effect is also being applied to touch devices. The desktop hover behaviour should be restricted to devices that support a real mouse hover, while mobile should always display the first product image.
First check whether your theme has a Show second image on hover setting that can be disabled for mobile. If it does not, the product-card CSS will need a small adjustment using hover and pointer media queries.
Which phone and browser are you seeing this on, and could you share a short screen recording? That will help confirm the exact trigger before changing the code.
Best of luck.
You are on Fabric, and the cause is not hover.
In Fabric every product card image is a small swipeable gallery of all the product photos. On a phone a slightly sideways finger movement while you scroll swipes the card instead of the page. The card lands on photo two and stays there. That is why it looks random, and why it never happens on desktop.
Test it on your phone: swipe one of those product pictures sideways. If the picture changes, that is what is happening.
Fix, no code:
Note:
If you want to keep the swipe on desktop and only lock it on mobile, skip the setting and put this in Theme settings > Custom CSS instead:
@media (max-width: 749px) {
.card-gallery slideshow-slides {
overflow-x: hidden !important;
}
}
thanks for your reply. I am using the Fabric theme, the issue has started only now that I have switched to this theme. Before there was no problem.
I tried to disable “Show second image on hover” in the carousel settings, but the issue still persists, so i don’t think that has any effect. Also the theme doesn’t let me to turn off the hover effect for mobile only.
It’s also very random, some product show the first picture, some second and some even the third picture.
Hi, thank you for your reply, unfortunately none of these options worked for me 
hi @WebsiteDeveloper ,
I’m sharing the recording via a drive link.
It’s really random, sometimes it’s this product and sometimes a different one, sometimes it shows a third picture, sometimes the second one. Also attaching a screenshots where I put the number of the picture it shows. One (green)is correct and the other numbers are incorrect.
I’m using Safari on my iphone.
Thank you for your help.
The randomness you’re seeing matches ajaycodewiz’s diagnosis: in Fabric, each product card is a small swipeable gallery of all the product photos, so a slightly sideways finger movement while scrolling on iPhone Safari swipes the card and it stays on whatever photo it lands on. One thing worth double-checking: the setting you changed was “Show second image on hover”, which is a different option from the one ajaycodewiz suggested. His fix was Theme settings, Product cards, untick “Show carousel”. If you’ve already unticked that specific setting and it still happens, then it’s a theme bug worth reporting to the Fabric developers.
Hi Lucy,
I reviewed the recording and screenshots. They confirm that, on iPhone Safari, some product cards are not consistently starting from the featured image. Instead, a second or third product image sometimes remains active.
Because it affects different products randomly, the issue is likely coming from the theme’s mobile product-card image behaviour rather than the order of the images in Shopify.
First, check the theme editor for settings such as Show second image on hover, Swipe through product images, or Product-card slideshow. These should be disabled on mobile while keeping the desktop hover effect.
If your theme does not provide a separate mobile setting, the product-card code will need a small adjustment so mobile carousels always load the featured image first and secondary images only work on desktop hover.
I’d test whether it happens from an actual swipe gesture rather than from the image changing by itself.
On mobile, a very slight sideways movement while scrolling can sometimes move a swipeable product-card gallery to image two without the shopper realising it.
If that’s what’s happening, I’d decide whether you actually want swipeable galleries on collection cards at all. For a lot of stores, keeping the first image fixed on mobile is clearer and avoids accidental changes while scrolling.
