Fabric theme image hover glitch

[beoopsie]

Hello everyone,
I recently encountered this issue with the Fabric theme, where I added a carousel for product display. The issue is with the mobile version, mainly with the “Show second image on hover” feature. The feature is bugged, I think. On phone, when you first load, the carousel shows a random photo form the product photo collection, instead of showing only the first one, and then showing the second one on hover (image attached as example). Even when I deactivated the “Show second image on hover” feature, the carousel continued to display the second of third picture of the product. (I need all the products from the carousel have just the first picture when the website is loaded, not a random one that the product itself has)

The website link is: beoopsie.com

Thanks!

[Growthunitdigital]

Hi @beoopsie, I’ve worked with the Fabric theme a few times, and what you’re describing is likely due to how the carousel is pulling the image index for mobile render. Some themes don’t fully disable the “hover” logic on mobile even when the setting is turned off which causes the carousel to randomly show the second or third image.

Here’s what you can try:

1. Check if lazy loading is interfering with the image preload. In some cases, the script loads the image index [1] or [2] by default if the first image takes too long.
2. Manually override the image logic via custom code:
   You can add this small script in your theme’s theme.js or via a custom.js file:

js

CopyEdit

document.querySelectorAll('.product-card__image-wrapper').forEach((el) => {
  const imgs = el.querySelectorAll('img');
  if (imgs.length > 1) {
    imgs.forEach((img, i) => {
      img.style.display = (i === 0) ? 'block' : 'none';
    });
  }
});

3. Make sure the “hover” CSS is fully disabled for mobile:
   Add this to your theme’s CSS:

css

CopyEdit

@media screen and (max-width: 768px) {
  .hover-image {
    display: none !important;
  }
}

If this doesn’t fix it, I’d be happy to take a closer look or record a short walkthrough if you prefer.
Hope this helps!

Daniel (@growthunit_digital)

[beoopsie]

Hey Daniel,
I tried inserting the code both into the theme CSS and into “theme-editor.js” (it was the closest thing I found to the script files you mentioned. Unfortunately, the script didn’t work, and I could be my fault for inserting it wrongfully, so attached, you have the images showing the way I inserted the code.
Also, another thing good mentioning is that this issue is, from what I’ve seen, only showing on IOS phones.

Thank you so much for your help so far!
Andrei @beoopsie