How to disable right click on Dawn theme?

Solved

How to disable right click on Dawn theme?

spacetimerider
Explorer
49 2 5

My site: etherealoasis.co

My theme: Dawn

 

Is there a way to disable the ability to right-click and display a message instead on the shopify store?

 

Thanks in advance for any help!

Accepted Solution (1)
Weaverse
Shopify Partner
73 23 32

This is an accepted solution.

Hi @spacetimerider , You can try to add the code to a different file, for example, the "global.js" file.

Helping merchants build super unique, high-performance storefronts using Weaverse + Hydrogen.
Looking for Development & Agency partners.
If you find the answer helpful, give it a thumbs up!
Our App: Theme Customizer for Shopify Hydrogen
Join our Weaverse + Hydrogen community: Weaverse Community

View solution in original post

Replies 6 (6)

Weaverse
Shopify Partner
73 23 32

 

Hi there! This is Paul from the Weaverse team. Sure, you can disable right-click and show a message instead. Just add this JavaScript code to your theme.js file in the Assets folder:

 

 
document.addEventListener('contextmenu', function(e) {
  e.preventDefault();
  alert('Right-click is disabled on this site.');
});

Save the changes, and you're all set! Let me know if you need any more help.

Helping merchants build super unique, high-performance storefronts using Weaverse + Hydrogen.
Looking for Development & Agency partners.
If you find the answer helpful, give it a thumbs up!
Our App: Theme Customizer for Shopify Hydrogen
Join our Weaverse + Hydrogen community: Weaverse Community
spacetimerider
Explorer
49 2 5

Hi Paul,

 

Thank you for your assistance.  I couldn't find a theme.js file in the Assets folder, but I did find theme-editor.js. I tried adding the code to that file, as it has some similar "document.addEventListener" lines already in there. But, it didn't change anything that I can tell. I can still right click. Thank you in advance for any assistance you can offer!

 

etherealoasis.co is my website and I'm using the Dawn theme

Weaverse
Shopify Partner
73 23 32

This is an accepted solution.

Hi @spacetimerider , You can try to add the code to a different file, for example, the "global.js" file.

Helping merchants build super unique, high-performance storefronts using Weaverse + Hydrogen.
Looking for Development & Agency partners.
If you find the answer helpful, give it a thumbs up!
Our App: Theme Customizer for Shopify Hydrogen
Join our Weaverse + Hydrogen community: Weaverse Community
spacetimerider
Explorer
49 2 5

adding it to "global.js" did the trick.. thank you!

ezlifegoods
Visitor
3 0 0

Your solution helped me to.. Thank you soo much

ezlifegoods
Visitor
3 0 0

Hi.. I placed the code in "global.js" in the asset folder, ir worked on desktop and android, but did not work on iphone. Is there a reason ? What can we do ?

Thanks