How to prevent customers from identifying visual elements as images?

Store Design
,

Topic summary

A store owner wants to prevent customers from recognizing certain visual elements (like payment option screenshots) as images, specifically avoiding the copy/save prompt that appears on long-press.

Proposed Solutions:

  • CSS-based approach: Disable image interactions using pointer-events: none;, -webkit-user-drag: none;, and user-select: none;. This prevents clicking, dragging, and selection on images.

    • Important caveat: Don’t apply this to product images that require zoom or interaction functionality.

  • Overlay method: Place a transparent element over the image to intercept all mouse and touch interactions before they reach the underlying image.

Both solutions aim to make images behave more like static design elements rather than interactive content.

Summarized with AI on October 25. AI used: claude-sonnet-4-5-20250929.
1

I have used image elements for visual representations a few times in my shop. For example, I took screenshots of payment options and then used them on a product page. However, I don’t want customers to be asked if they want to copy these images when they press and hold them (e.g. by accident), as this would reveal that this part of the page is just an image.

3

You can solve this issue simply by Disable image interactions with CSS

Add this to your CSS:

img {
pointer-events: none;
-webkit-user-drag: none;
user-select: none;
}

  1. pointer-events: none; → prevents clicking/long-pressing on the image.
  2. -webkit-user-drag: none; → stops dragging images on Safari/Chrome.
  3. user-select: none; → stops text/image selection highlights.

The image won’t be clickable, so don’t use this on product images that customers actually need to zoom, enlarge, or click.

1 Like
4

Can also add another element (transparent) to “cover”/ overlay the image. This way all mouse/touch interactions will reach to the overlay element.