How to block drag-save on Shopify product images (and why right-click block is not enough)

Most merchants who install a Shopify right-click blocking app find out three weeks later that it does not actually stop the second-most-common image theft pathway: drag-and-drop save. Drag-save is the casual visitor's fallback move. Right-click block stops the menu; the visitor immediately drags the image to their desktop and the save completes anyway. The right-click block was a speed bump that the drag-save bypassed entirely. If your anti-theft setup only covers right-click, you are protected against the first attempt and exposed on the second.

This guide covers exactly what drag-save is, how to block it with three lines of JavaScript (no app required), the mobile pathway most blockers ignore, and where the combo deterrent stops being enough. We will be honest about the limitations: drag-save blocking is still a deterrent, not a lock. The image URL is still public regardless.

Quick facts

Right-click blocking alone does not stop the second-most-common casual theft pathway on Shopify: drag-and-drop save. A visitor can drag a product photo straight to their desktop with the context menu fully suppressed. Closing it takes a three-line dragstart snippet, or an app that bundles drag-save with right-click and copy protection. Mobile adds its own gap (long-press save), and a few themes need extra care. Like every storefront block, this deters casual saving; it does not stop curl, screenshots, or anyone with the image URL.

What drag-save actually is

Drag-save is the browser behavior that lets a visitor click and hold on an image, drag it to the desktop or another window, and release to save a copy. It is built into every desktop browser. Safari, Chrome, Firefox, Edge all support it. The visitor does not even need to know it works; they just need to discover it once.

The pathway uses the dragstart event, which fires the moment the visitor begins dragging an image. If your storefront does not suppress this event, the drag operation completes and the visitor gets a save dialog or a direct file drop. Right-click blocking targets the contextmenu event, which is unrelated. The two need separate handlers.

The three-line snippet that blocks it

The minimum-viable drag-save block for Shopify is three lines of JavaScript pasted before the closing </body> tag in your layout/theme.liquid.

<script>
  document.addEventListener('dragstart', function(e) {
    if (e.target.tagName === 'IMG') e.preventDefault();
  });
</script>

That is the whole feature. It catches the dragstart event before the browser executes the drag, checks if the target is an image, and suppresses the drag if it is. Text and links keep working everywhere else on the page. The drag-save pathway on images closes.

The honest framing: this is identical in pattern to the right-click block snippet, just targeting a different event. If you have right-click block already, adding drag-save block is one additional listener. If you have neither, paste both at the same time.

Right-click block plus drag-save block plus mobile long-press block is the three-event combo that closes the casual-save pathways. Every anti-theft app worth installing handles all three. Most free ones only handle right-click.

The mobile long-press gotcha

The desktop drag-save pathway has a mobile cousin: the long-press save. On mobile Safari (and most mobile browsers), pressing and holding on an image surfaces a save menu identical in effect to drag-save. Most anti-theft snippets that block right-click and drag-save miss the mobile pathway entirely.

The mobile block uses the touchstart event with passive mode disabled, so the preventDefault call actually fires.

<script>
  document.querySelectorAll('img').forEach(function(img) {
    img.addEventListener('touchstart', function(e) {
      e.preventDefault();
    }, { passive: false });
  });
</script>

The catch: this only runs on images that exist at script load time. If your theme uses dynamic image loading (infinite scroll, AJAX product loads), the listener does not attach to new images. You either need to re-run the script after dynamic load events, or use event delegation on the document body. Most anti-theft apps handle this automatically; the snippet above is fine for static catalog pages.

Combining right-click and drag-save blocks

The cleanest setup combines both handlers in a single script tag. Paste this once at the bottom of theme.liquid:

<script>
  document.addEventListener('contextmenu', function(e) {
    if (e.target.tagName === 'IMG') e.preventDefault();
  });
  document.addEventListener('dragstart', function(e) {
    if (e.target.tagName === 'IMG') e.preventDefault();
  });
</script>

Six lines, two pathways closed. Desktop right-click save: blocked. Desktop drag-save: blocked. Mobile long-press: still open (needs the touchstart handler from the previous section). The right-click block also incidentally helps on mobile because some mobile browsers surface a similar context menu on long-press, but coverage varies by device.

Three Shopify themes where this is trickier

Three popular Shopify themes have lightbox or zoom behavior that interacts with the dragstart event in non-obvious ways. If you have one of these themes, test product page zoom before you ship.

• 01Dawn (and Dawn-based custom themes). The default product image zoom binds to mouseover, not dragstart. The drag-save snippet works without conflict. The zoom continues to work normally.
• 02Sense and Studio. Use a lightbox that intercepts click events. The drag-save snippet works without conflict but may need to load before the lightbox script for proper layering. If lightbox stops opening, move the snippet earlier in the document.
• 03Custom themes with image galleries from theme apps. Some gallery apps use their own dragstart handlers for swipe gestures. The drag-save snippet can suppress those handlers, breaking the gallery. If gallery swipe stops working, scope the snippet to product cards only (using a class selector instead of the tagName check).

When the app version earns its place

The six-line snippet handles desktop right-click and drag-save. It does not handle mobile long-press (needs the third snippet), dynamically loaded images (needs delegation), DevTools opening (needs a separate handler), or PrintScreen (technically unblockable but some apps obscure the rendered image to make it useless). If you want all of these handled without theme code, that is what apps in this category do.

Viking Watermark's anti-theft layer covers desktop right-click, desktop drag-save, mobile long-press, DevTools heuristic detection, keyboard shortcut blocking, and dynamic-image handling, all in one toggle. It is included on every plan, including the free tier. Install Viking Watermark free if you want the combo without theme editing.

For the broader context on what anti-theft pathways exist and where each one breaks, our studio guide on anti-theft limits is the honest read.

Frequently asked questions

Can I block drag-and-drop image saving on Shopify without an app?

Yes. Three lines of JavaScript pasted into layout/theme.liquid before the closing body tag will suppress the dragstart event on all images. The full snippet is in the article above.

Does right-click block also stop drag-save on Shopify?

No. Right-click block targets the contextmenu event. Drag-save uses the dragstart event. They are separate and need separate handlers. Most basic anti-theft setups cover only right-click.

Does the drag-save block work on mobile Shopify stores?

Partially. Mobile browsers use long-press, not drag-save, for the save pathway. The dragstart block does not stop mobile long-press. Add the touchstart handler shown in the article for mobile coverage.

Will the drag-save block break my Shopify theme's product image zoom?

Usually no. Most theme zoom features bind to mouseover or click, not dragstart. The exception is custom themes or theme apps that use dragstart for swipe gestures. Test product page zoom after pasting the snippet.

Can determined attackers bypass the drag-save block?

Yes. The image URL is still public. Anyone using browser DevTools, curl, or a scraping tool fetches the image directly without ever triggering the dragstart handler. Drag-save block deters casual save attempts, not determined attackers.

Does Shopify offer a built-in drag-save block?

No. Shopify ships no native drag-save protection. You add it through theme code (the snippet above) or a third-party anti-theft app.

Should I combine drag-save block with watermarking?

Yes, if your product photography is brand-shot and worth protecting. Drag-save block stops the casual save; watermarks claim attribution if photos walk anyway. The two layers solve different halves of the problem.