Focal Theme - Disable Clicking On Product Page Gallery

[hdkingy]

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

[KabirDev]

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;
}

[hdkingy]

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 · Accepted solution]

Sure, add this code instead.

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

[hdkingy]

Worked perfect, thank you. Really appreciate it

[hdkingy]

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