To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more

Secondary image on mobile when "touch & hold"

Solved
Vtt_10
Tourist
4 0 1

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

 

Accepted Solution (1)

Accepted Solutions
GemPages
Shopify Partner
3292 728 604

This is an 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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

View solution in original post

Replies 5 (5)
GemPages
Shopify Partner
3292 728 604

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

GemPages_0-1670291666557.png

 

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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
Vtt_10
Tourist
4 0 1

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
Shopify Partner
3292 728 604

This is an 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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
Vtt_10
Tourist
4 0 1

This works perfectly! Thank you very much 🙂 

GemPages
Shopify Partner
3292 728 604

Hello @Vtt_10 ,

 

I am glad that my solution is helpful to you.

 

Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center