Imagery

[Holly18]

Hi there,

Could someone please help me. Currently, customers have to click on a little button on the top left hand side of my product image for it to open. Is there a way I can make it open if they click on anywhere in the image? URL: https://salourlingerie.com/products/rochelle-bodysuit

My theme is drop.

Thanks!

[lynth]

Hi, yes. I think the simplest way is to add a custom JS snippet in some JS or the liquid file (theme.liquid).

<script>
document.querySelectorAll(".product__image").forEach((img) => {
  img.addEventListener("click", () => {
    document.querySelector(".js-zoom-btn").click();
  });
});
</script>

[BSSCommerce-B2B]

@Holly18,

Step 1: Go to Admin -> Online store -> Theme > Edit code

Step 2: Search for the file theme.liquid

Step 3: Add this code before </body> tag

<script>
document.addEventListener("DOMContentLoaded", (event) => {
  const productGalleryContainers = document.querySelectorAll('.product-gallery__media-container');
if (productGalleryContainers.length) {
    productGalleryContainers.forEach((productGalleryContainer) => {
        const productImg = productGalleryContainer.querySelector('.product__image');
        productImg.addEventListener('click', () => {
            productGalleryContainer.querySelector('a.js-zoom-btn.product-gallery__zoom-btn').click();
        });
    });
}
});
</script>