Secondary image on mobile when "touch & hold"

[Vtt_10]

Hi team,

I'd like to implement the functionality to view a secondary imagen on mobile when "touch & hold" on a specific product on the catalog page, on my site (www.sanchissalcedo.com). Please see attached video as an example.

Any help much appreciated!

Best,

Jorge

[GemPages]

Hello @Vtt_10 ,

It's GemPages support team and glad to support you today.

I would like to give you the recommendation to support you so kindly follow the steps below:

1. Go to Online Store > Theme > Edit code of your current theme

2. Open your theme.liquid theme file

3. Paste the below code before </head>

.reveal:hover .hidden {
    z-index: 1;
    opacity: 1;
    background-color: var(--background);
}

If you require any further information, feel free to contact me.

Best regards,
GemPages Support Team

[Vtt_10]

Hi,

Thank you for your answer. I tried but unfortunately did not work, and the code is showing on my site as in the attached screenshot.

Best

[GemPages · Accepted solution]

Hello @Vtt_10 ,

Sorry about that. Please fix the code a bit like that:

<style>
.reveal:hover .hidden {
    z-index: 1;
    opacity: 1;
    background-color: var(--background);
}
</style>

Best regards,
GemPages Support Team

[Vtt_10]

This works perfectly! Thank you very much 🙂 

[GemPages]

Hello @Vtt_10 ,

I am glad that my solution is helpful to you.

Best regards,
GemPages Support Team