I went back to a previous theme (Taste 1.2) and enabled “Show second image on hover” and it appears to work perfectly.
I also removed all my custom CSS in my current Heritage theme in case it was interfering with showing the second image, and this didn’t affect anything.
If your second image on hover not showing then there maybe following reasons.
Your product don’t have the 2nd image.
Your all product images may assigned to the product variants. Try to leave the product images that for the Product second image and not assigned to any variant.
There maybe issue with the liquid code.
If there is issue with the liquid code then I require your store url to take a look in it.
Thank you; this is really helpful. I wouldn’t have found this without you.
I would like the wood variant to be the hover image, at least on desktop, as it significantly alters the appearance of the art for some pieces.
However, since the graphic art features differently sized specification text for medium and larger prints (at the bottom of the art), I end up with four images that sort of look the same. So, adding a fifth image just for the hover effect would repeat one of the variant images.
This is what it’ll be when it’s ready for purchase, a view you didn’t have the benefit of seeing as of today. This view probably/template probably makes more sense.
I’ve recorded the following change in a file, as it appears to be working. It may appear a little glitchy until the change is fully propagated and cached, etc.
snippets/card-gallery.liquid
ORIGINAL
elsif forloop.first == false
hide all variant images that aren’t the first one (when there are no combined listings or colour filters applied)
assign hidden = true
endif
UPDATED
elsif forloop.first == false
hide all variant images that aren’t the first one (when there are no combined listings or colour filters applied)
assign hidden = false
endif
I was loath to edit the liquid, but this is worth it and easy to manage.
By any chance are you able to share the store url along with the collab code so that I can take a look into this matter. Because it’s difficult to understand the theme structure without the code.
Yes, I am also trying to avoid theme code edits (at least here ), however sometimes you can’t do without.
If you want, you can restore original code, and have a small Javascript added via “Custom liquid” to loop over product cards and remove hidden attribute if there is only one not hidden.
Would not affect CWV metrics, as modifies hidden elements. Can add a “Custom liquid” in Footer group:
<script>
document.querySelectorAll('.product-card slideshow-component').forEach(e=>{
let allSlides = e.querySelectorAll('slideshow-slide');
let hiddenSlides = e.querySelectorAll('slideshow-slide[hidden]');
if ( (allSlides.length - hiddenSlides.length) <= 1 )
hiddenSlides[0].removeAttribute('hidden');
})
</script>
), however sometimes you can’t do without.