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

Store Design
,

Topic summary

A user seeks to make product images scrollable as a carousel on mobile devices after clicking the magnifying glass zoom feature on their Dawn theme product page. They want to avoid using apps for this functionality.

Proposed Solution:

  • Replace custom image setup with Shopify’s built-in media gallery system
  • Modify media-modal.liquid to wrap media in Swiper.js container classes
  • Initialize Swiper.js carousel in the theme’s JavaScript file with mobile-friendly settings (loop, single slide view, pagination)
  • Include Swiper.js library if not already present in the theme

Current Status:
The original poster indicated they lack coding experience to implement the solution independently. The responder offered to provide step-by-step assistance through direct contact. The issue remains unresolved and requires hands-on implementation support.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
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