2nd Image Hover on Mobile

Shopify Discussion
1

I have dawn 9.0.0. I’ve tried various CSS codes and JS and nothing has worked. I need to enable 2nd image hovering for mobile so when users swipe over a product it shows the 2nd image. A good example is dior.com

2

Hi @Crossedny ,

In Dawn Theme, there will be this option:

DaisyVo_0-1738050369233.png
DaisyVo_0-1738050369233.png1347×606 354 KB

Once toogle on, it shows other images when hovering to the card product

Hope this can help!

Best,

Daisy

3

Hello @Crossedny try this once

1 Go to Online Store

2 open Themes

3 Edit Code

4 open base.css (or component-card.css)

Add this at the bottom:

.product-card {
    position: relative;
    overflow: hidden;
}

.product-card img.second-image {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    width: 100%;
    height: auto;
}

.product-card.swiped img.second-image {
    opacity: 1;
}

Open theme.js and add this at the bottom:

document.querySelectorAll('.product-card').forEach(card => {
    let touchStartX = 0;
    let touchEndX = 0;

    card.addEventListener('touchstart', (e) => {
        touchStartX = e.touches[0].clientX;
    });

    card.addEventListener('touchend', (e) => {
        touchEndX = e.changedTouches[0].clientX;
        if (touchEndX < touchStartX) {
            card.classList.add('swiped');
        } else {
            card.classList.remove('swiped');
        }
    });
});

Ensure You Have a Second Image

thankss :blush:

4

hey, i cant see or find theme.js