How do I make the image carousel scrollable on mobile after clicking into a product - DawnTheme

Store Design
,
1

I know this has been asked a few times before but really need help with this.

environmentalPa_0-1744627849237.png
environmentalPa_0-1744627849237.png1262×888 102 KB

Essentially just need the images to become a carousel after zooming in via the magnifying glass. https://environmentalpartners.com.au/products/natural-cleaning-set This is the link to the product page.

Thanks and appreciate if anyone has any idea how to fix this without using apps.

Regards.

2

Hey @environmentalPa ,

To make the product images scrollable as a carousel on mobile after clicking the magnifying glass (zoom) in the Dawn theme, follow these steps — no app needed:

  1. Use media-gallery and media-modal properly in your product template: Replace your custom setup with Shopify’s built-in {{ media | media_tag }} inside a loop over product.media.

  2. Enable the modal carousel by editing media-modal.liquid and wrapping media in .swiper-container and .swiper-wrapper classes.

  3. Initialize Swiper.js in your theme’s JS file (theme.js or global.js):

document.addEventListener('DOMContentLoaded', function () {
  const modal = document.querySelector('.media-modal__carousel.swiper-container');
  if (modal) {
    new Swiper(modal, {
      loop: true,
      slidesPerView: 1,
      spaceBetween: 10,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    });
  }
});
  1. Include Swiper.js in your theme if it’s not already there (CDN or local).

This will give you swipeable images inside the zoom modal on mobile. Let me know if you need help updating your code.

Best,

Rajat

Shopify Expert

3

Hey Rajweb.

Appreciate you reaching out, but I’m not very good at coding so it will be hard for me to implement this unless it’s step by step with what to do.

Kind regards.

4

Hey @environmentalPa ,

Totally understand — no worries at all! Feel free to reach out using the contact info in my signature below. I can assist with implementing the code step by step, so you get swipeable images inside the zoom modal on mobile.

Kind regards,
Rajat