Zoom feature

Shopify Discussion
, , , ,
1

Hello I have a section in my product page where the zoom feature to make image larger is not working, the section is a 3d image carousel, could someone please assist me with this problem. My store url is calmingpaws.store

2 Likes
2

That usually happens when the zoom script conflicts with the carousel’s JavaScript, especially with 3D or custom sliders, since they often override Shopify’s native image zoom event. You’d typically need to reinitialize the zoom function after the carousel loads. It’s a mix of Liquid handling and code logic, so it’s a bit technical to fix directly from here, if you don’t mind i could come through for you

1 Like
3

Hi @Ecomowner

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop:

4

Hi @Ecomowner

1. Add this CSS:

Put this inside your theme.css or base.css file:

@media (max-width: 768px) {
  .carousel-slide .slide-image {
    cursor: zoom-in;
  }

  .image-zoom-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
  }

  .image-zoom-overlay img {
    width: 100%;
    height: auto;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
  }
}

2. Add this JavaScript:

Place it below your carousel HTML or in your theme.liquid before the closing </body> tag.

<script>
document.addEventListener('DOMContentLoaded', function() {
  const images = document.querySelectorAll('.carousel-slide .slide-image');

  images.forEach(img => {
    img.addEventListener('click', function() {
      if (window.innerWidth <= 768) { // Only for mobile
        const overlay = document.createElement('div');
        overlay.classList.add('image-zoom-overlay');

        const zoomedImg = document.createElement('img');
        zoomedImg.src = this.src;

        overlay.appendChild(zoomedImg);
        document.body.appendChild(overlay);

        overlay.addEventListener('click', () => {
          overlay.remove();
        });
      }
    });
  });
});
</script>