Disable Click on Product Thumbnails — Dawn Theme

Solved

Disable Click on Product Thumbnails — Dawn Theme

gracemoore
Visitor
2 1 1

We are encountering a few issues with customers being sent the wrong product variant because they select the product thumbnail they wish to purchase, but Shopify doesn't then change the variant option to the corresponding variant. I cannot find a solution for selecting variants by clicking the variant thumbnail images on Dawn theme — it only works the other way around, by selecting the variant option, which then changes the main image.

 

A workaround for this may be to disable 'click' on the product thumbnails. I would like customers to still see the image slider/thumbnail gallery below the main product image, but I do not want them to be able to click on these thumbnails to change the image. This way, the only way they will have of changing the main image is by selecting the variant option they wish to view / purchase.

 

Is this possible through code?

 

Link to site: https://www.greatbritishyarns.co.uk/products/eden-cottage-yarns-milburn-dk

 

Screenshot 2024-06-14 at 22.43.29.png

Grace Moore
Brand and Website Designer
London, England
Accepted Solutions (2)

BSSCommerce-HDL
Shopify Partner
1025 345 412

This is an accepted solution.

Hi @gracemoore

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

BSSCommerceHDL_0-1718415132945.png

 

Step 2: Search file base.css, theme.css, styles.css, custom.css or theme.scss.liquid

BSSCommerceHDL_1-1718415137697.png

Step 3: Insert the below code at the bottom of the file -> Save 

.product__media-wrapper .thumbnail-list__item button.thumbnail {
   pointer-events: none !important;
}

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

gracemoore
Visitor
2 1 1

This is an accepted solution.

This code did not work when I added it to my base.css file, but I have added it to my theme.liquid file enclosed in a style tag and it was worked! Thanks so much.

 

Add to theme.liquid:

 

<style>

.product__media-wrapper .thumbnail-list__item button.thumbnail {

pointer-events: none !important;

}

</style>

Grace Moore
Brand and Website Designer
London, England

View solution in original post

Replies 3 (3)

BSSCommerce-HDL
Shopify Partner
1025 345 412

This is an accepted solution.

Hi @gracemoore

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

BSSCommerceHDL_0-1718415132945.png

 

Step 2: Search file base.css, theme.css, styles.css, custom.css or theme.scss.liquid

BSSCommerceHDL_1-1718415137697.png

Step 3: Insert the below code at the bottom of the file -> Save 

.product__media-wrapper .thumbnail-list__item button.thumbnail {
   pointer-events: none !important;
}

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
gracemoore
Visitor
2 1 1

This is an accepted solution.

This code did not work when I added it to my base.css file, but I have added it to my theme.liquid file enclosed in a style tag and it was worked! Thanks so much.

 

Add to theme.liquid:

 

<style>

.product__media-wrapper .thumbnail-list__item button.thumbnail {

pointer-events: none !important;

}

</style>

Grace Moore
Brand and Website Designer
London, England
BSSCommerce-HDL
Shopify Partner
1025 345 412

Hi @gracemoore ,

We're happy to see that our suggestion helped you solve the issue. Can you kindly give us a like and mark it as a solution? This can be a reference for other merchants if they have an issue like you.

Should you need any further information, please do not hesitate to contact us by tagging directly at Community post. We will check and let you know soon.

Thanks in advance 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency