Capital Theme: Enable second image hover for products on MOBILE

Store Design
,
1

Does anyone know how to how enable second image hover for for products on mobile? I have it set up for desktop, and have seen a number of shopify sites that have it set up for mobile so it is possible, just finding instructions on how to do this has been really difficult.

Appreciate any assistance!

Thank you

2

Hi @rr_mag

I am from Mageplaza - Shopify solution expert.

I recommend not using hover in this case on mobile devices.

Hover refers to when a mouse pointer moves over an element without clicking – but on mobile devices, users only tap, there’s no real hover.

Currently, the Capital Theme still displays the second product image when the user taps on the product image.

Therefore, you can ignore this on mobile devices. If you have any questions, please let me know.

Best regards!

3

Hi @rr_mag ,

Please go to Customize > Theme settings > Custom CSS and add code:

@media (max-width: 767px) {
    .product-card__image--secondary {
        display: flex !important;
    }
}