Solved

Focal Theme - Disable Clicking On Product Page Gallery

hdkingy
Excursionist
21 0 6

In the Focal theme, hovering over images in the product page gallery changes your cursor and allows clicking + dragging to cycle through images. I am looking to completely disable the cursor from changing and the ability to cycle through images by clicking and dragging the image, this way hovering or clicking on the image will do nothing. This would effectively make clicking the image thumbnails the only way to scroll through the image gallery (This is what customers do anyway)

 

Here is my site: https://pondstream.com/products/copy-of-scott-aerator-bubble-pro-sub-surface-aerator-1

 

Any help is appreciated

Accepted Solution (1)
KabirDev
Shopify Partner
243 58 63

This is an accepted solution.

Sure, add this code instead.

.product__media-list-wrapper .product__media-list {
    pointer-events: none !important;
}
If my answer helps, please give it a Like and Accept as Solution.
- You can join in our Facebook group for Shopify help.
- Contact me directly at shahriar@kabirdev.com

View solution in original post

Replies 5 (5)

KabirDev
Shopify Partner
243 58 63

Hi @hdkingy, add the below code to your theme's CSS file.

 

.product__thumbnail-list {
    pointer-events: none !important;
}

 

 

If you want to remove the black border around the first thumbnail image in the gallery. Add the below code as well.

 

.product__thumbnail:after {
    box-shadow: none !important;
}

 

If my answer helps, please give it a Like and Accept as Solution.
- You can join in our Facebook group for Shopify help.
- Contact me directly at shahriar@kabirdev.com
hdkingy
Excursionist
21 0 6

Thank you, This does do the required function, but unfortunately it is in the wrong place. I am looking for the code to do this to the actual image, not the thumbnails below. Could you assist with that?

KabirDev
Shopify Partner
243 58 63

This is an accepted solution.

Sure, add this code instead.

.product__media-list-wrapper .product__media-list {
    pointer-events: none !important;
}
If my answer helps, please give it a Like and Accept as Solution.
- You can join in our Facebook group for Shopify help.
- Contact me directly at shahriar@kabirdev.com
hdkingy
Excursionist
21 0 6

Worked perfect, thank you. Really appreciate it

hdkingy
Excursionist
21 0 6

Kabir, is there any way to allow swiping the images on mobile only?