Unlock Autoplay: Fix Shopify Product Videos Not Playing on Mobile Swipe (Dawn Theme Guide!)

Hey fellow store owners! I recently dove into a really common and frustrating issue that popped up in the Shopify community, and it\'s one I know many of you have probably faced: product videos that just won\'t autoplay on mobile when customers swipe through your product gallery. It\'s a real conversion killer when your beautiful video content gets stuck behind a tap!

The Mobile Video Autoplay Conundrum

The discussion kicked off with Kiwart, who was using the popular Dawn theme and experiencing exactly this problem on their site, getprivateview.com. Customers could scroll right through the product photos, but the videos only played if they specifically tapped the thumbnail below. On mobile, this is a huge friction point.

As Rhea6 and Joeemmie_Donz pointed out, this behavior is pretty typical. Themes often configure product galleries to only trigger video playback when a thumbnail is actively selected or clicked, not when a user simply swipes past it. And then there\'s the added layer of mobile browsers, which have their own strict rules about autoplaying media.

Why Your Videos Aren't Autoplaying on Mobile

It boils down to two main culprits, as the community insights clarified:

1. Mobile Browser Restrictions: Most mobile browsers block video autoplay unless the video is muted and has the playsinline attribute. This is to prevent unwanted data usage and a jarring user experience.
2. Theme Default Behavior: Many Shopify themes, including Dawn, are designed to only play the active slide in the product gallery. They don\'t inherently detect when a video slides into view via a swipe and automatically start playing it. Plus, Dawn themes specifically use custom elements, meaning the actual tags aren\'t output until a play button is clicked. This makes direct targeting of elements a bit tricky, as tim_tairli wisely noted.

So, how do we get around this and give our mobile shoppers the seamless video experience they deserve?

The Community-Approved Fix: Autoplay on Swipe for Dawn Theme

After sifting through the suggestions, a comprehensive solution emerged, largely thanks to oscprofessional\'s detailed steps. This approach addresses both the mobile browser requirements and the theme\'s gallery behavior, especially for Dawn theme users.

Step 1: Check Your Theme Settings

First things first, let\'s make sure your basic theme settings are configured correctly. This is often an overlooked but crucial step.

1. Go to your Shopify Admin > Online Store > Themes.
2. Find your current theme (Dawn, in Kiwart\'s case) and click Customize.
3. Navigate to a Product page template.
4. In the sections sidebar, find your Product media block.
5. Look for a setting to "Autoplay video" and make sure it\'s turned on.
6. Crucially: Ensure your product videos themselves are muted. Mobile browsers are much more likely to autoplay muted videos. If your videos aren\'t muted, they likely won\'t autoplay regardless of other settings.

Step 2: Add Custom JavaScript to theme.liquid

This is where we add the magic code that tells your videos to play when they come into view, even on swipe.

⚠️ IMPORTANT: Always back up your theme before making code changes! You can do this by going to Online Store > Themes > Actions > Duplicate.

Here\'s how to implement the code:

1. From your Shopify Admin, go to Online Store > Themes.
2. Find your current theme and click Actions > Edit code.
3. In the left sidebar, under the Layout directory, click on theme.liquid.
4. Scroll all the way down in the theme.liquid file until you find the closing tag.
5. Paste the following code snippet immediately before the tag:

6. Click Save.

Let\'s break down what this code does:

• It waits for the entire page content to load (DOMContentLoaded).
• It then finds all video elements within your product media gallery.
• For each video, it explicitly sets muted = true, adds the playsinline attribute (both crucial for mobile autoplay), and sets loop = true (so your video keeps playing).
• The core of the solution is the IntersectionObserver. This clever piece of JavaScript monitors when a video element enters or leaves the viewport.
• When a video is approximately 60% or more visible (intersectionRatio >= 0.6), it attempts to play the video. If the video slides away (less than 60% visible), it pauses it. This creates that smooth, swipe-to-play experience.

While some initial suggestions might involve adding a "Custom liquid" section directly to the product page template, like this screenshot shows for adding a block:

...the solution involving theme.liquid is more robust for Dawn themes because it ensures the JavaScript runs after the DOM is ready and can correctly target the video elements, even with Dawn\'s deferred loading mechanisms.

Once you\'ve implemented these steps, your Shopify product videos should now autoplay seamlessly on mobile as customers swipe through your product media. This small change can make a huge difference in how engaging your product pages are, leading to a much better experience for your mobile shoppers and hopefully, more conversions for you!