How to Disable Right-Click Save Image on Shopify

One common frustration for store owners is finding their high-quality product photography being copied and used elsewhere. While it is impossible to completely prevent image theft (as users can still view source code), you can make it significantly more difficult by disabling the right-click context menu on your images.

In this tutorial, we will walk through creating a script that runs after your page loads, scans all image tags, and prevents the right-click menu from opening.

Prerequisite: This solution requires jQuery to be imported on your site. If you haven't installed jQuery yet, please ensure that is done before proceeding.

Step 1: Backup Your Theme

Before modifying your theme code, it is always best practice to create a backup point.

1. Go to your Shopify Admin > Online Store > Themes.
2. Click the Actions (three dots) button on your live theme.
3. Select Duplicate.

This ensures you have a save point to revert to if anything goes wrong.

Step 2: Create a New JavaScript Asset

We will create a separate file for this logic to keep your code organized.

1. Click Edit code on your theme.
2. Navigate to the Assets folder.
3. Click Add a new asset.
4. Select Create a blank file, ensure the extension is .js, and name it no-image-copy.
5. Click Add asset.

For now, we will add a simple console log to test the connection later. Add the following line to your new file and click Save:

console.log('loaded');

Step 3: Link the Script in Theme.liquid

Now we need to tell Shopify to load this new file.

1. In the Layout folder, open theme.liquid.
2. Find the closing head tag by pressing Ctrl+F (or Cmd+F on Mac) and searching for </head>.
3. Paste the following code right before the </head> tag:

<script src="{{ 'no-image-copy.js' | asset_url }}" defer></script>

Note: The defer attribute ensures this script loads only after the rest of the page content has loaded.

Verifying the Connection

To ensure the file is connected:

1. Open your live website.
2. Open Developer Tools (Right-click > Inspect or Ctrl+Shift+I / Cmd+Opt+I).
3. Click the Console tab.
4. You should see the text "loaded". If you see this, you are ready to add the logic.

Step 4: Add the Context Menu Block Script

Return to your no-image-copy.js file in the code editor. Delete the console.log line and paste the following jQuery snippet:

$('img').bind('contextmenu', function(e) {
    return false;
});

What this code does:

• It targets all <img> elements on the page.
• It binds to the contextmenu event (the right-click action).
• It returns false, which effectively cancels the action, preventing the menu from appearing.

Click Save.

Step 5: Testing the Result

Refresh your live store. When you attempt to right-click on standard images (like product photos, columns with text, or banner images), nothing should happen. The menu allowing users to "Save Image As" or "Copy Image" will no longer appear.

Important Limitations

1. Checkout Page: This script will work on your entire storefront, but it will not work on the Checkout page unless you are on Shopify Plus and have access to the checkout.liquid file.
2. Tech-Savvy Users: While this stops the average user from saving images, users who know how to use Chrome Developer Tools can still inspect the element and find the source URL. There is no way to serve an image to a browser without exposing its source, but this method adds a layer of friction that deters most casual copying.

---

If you found this tutorial helpful, please verify that your images are protected and continue building your brand with confidence!