How to pop up product image when customer clicks on the image?

Shopify Discussion
1

How to pop up product image when customer clicks on the image?

2

Hi Sheron,

You can achieve this by using a simple image popup (lightbox) effect with HTML, CSS, and a bit of JavaScript. Here’s a basic example:

<!-- Product Image -->
<img src="your-image.jpg" alt="Product Image" onclick="openPopup(this)" style="width:200px; cursor:pointer;" />

<!-- Popup Modal -->
<div id="imageModal" style="display:none; position:fixed; z-index:1000; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); justify-content:center; align-items:center;">
  <img id="modalImg" style="max-width:90%; max-height:90%;" />
</div>

<script>
function openPopup(img) {
  const modal = document.getElementById("imageModal");
  const modalImg = document.getElementById("modalImg");
  modal.style.display = "flex";
  modalImg.src=img.src;

  modal.onclick = () => {
    modal.style.display = "none";
  };
}
</script>

Alternatively, you could use a JavaScript library like Lightbox2 or Fancybox for more advanced functionality.

If you’d like help implementing this directly into your store, we’d love to do it for you — just let us know.

Best,
Shubham | Untechnickle

Let me know if you’d like this adjusted to a specific Shopify theme or embedded in Liquid.