Unlock Autoplay: Get Your Shopify Product Videos Playing on Mobile (Even on Dawn Theme!)

Hey everyone! As a Shopify expert and someone who loves digging into what makes your stores tick, I often see common pain points pop up in the community. One that caught my eye recently, brought up by a store owner named Kiwart, was about product videos not autoplaying on mobile when customers swipe through product media. It's a super common issue, especially with themes like Dawn, and it can definitely hurt your customer experience.

Kiwart described the problem perfectly: on their site, getprivateview.com, videos were only playing when customers tapped their thumbnails, not automatically as they scrolled or swiped. This isn't just a minor annoyance; it's a missed opportunity to engage visitors instantly with dynamic content. Let's dive into why this happens and, more importantly, how the community came together to fix it!

Understanding the Mobile Autoplay Challenge

First off, it's important to understand why this is even an issue. Mobile browsers, for good reason, have strict rules about media autoplay. They want to save data, prevent unexpected sounds, and give users control. So, for a video to autoplay on a mobile device, it typically needs two crucial attributes:

• muted: The video must be muted by default.
• playsinline: This attribute tells the browser to allow the video to play directly within the page's content area, rather than fullscreen.

Beyond these browser-level requirements, many Shopify themes, including Dawn, often configure their product galleries to only activate (play) the video when its specific thumbnail is clicked, or when it becomes the "active" slide after a tap, not automatically on a swipe or scroll.

When Kiwart first asked for help, several community members, like Joeemmie_Donz and Rhea6, quickly pointed out these exact reasons. They highlighted that it's often a theme setting or requires a small tweak to the gallery code.

The Community-Backed Solution: Theme Settings & Custom Code

While some initial suggestions, like adding "Custom liquid" sections, can be useful for certain code snippets (as seen in this screenshot from tim_tairli):

...tim_tairli himself later clarified that for Dawn themes, simply targeting tags directly might not work because Dawn uses custom elements. This means the actual tags aren't in the DOM until the user interacts with them. This is where a more robust JavaScript solution comes in handy.

The most comprehensive and effective solution shared in the thread came from oscprofessional, combining a simple theme setting adjustment with a powerful JavaScript snippet. Here's how you can implement it:

Step 1: Adjust Your Theme Settings

This is the easiest part, and it addresses the fundamental autoplay requirement:

1. Go to your Shopify Admin and navigate to Online Store > Themes.
2. Find your current theme (likely Dawn) and click Customize.
3. On the left sidebar, select Products > Default product (or the specific product template you're using).
4. In the product template editor, find the Media block (it might be under "Product Information" or a separate section).
5. Look for an option like "Autoplay video" and make sure it's turned on.
6. Crucially, ensure your videos are muted. While the code below will also mute them, it's good practice to ensure your video files themselves are muted by default or that the theme setting explicitly handles it.
7. Save your changes.

Step 2: Add Custom JavaScript to theme.liquid

This JavaScript snippet does the heavy lifting, ensuring videos play inline, are muted, loop, and — most importantly — play as they come into view while swiping. Always back up your theme before making code changes!

1. Go to your Shopify Admin and navigate to Online Store > Themes.
2. Find your current theme and click Actions > Edit code.
3. In the left sidebar, find and click on theme.liquid under the "Layout" directory.
4. Scroll down to the very bottom of the file, just before the closing tag.
5. Paste the following code snippet there:

6. Click Save.

What this code does is quite clever:

• It targets all video elements within your product media sections.
• It ensures each video is muted, has the playsinline attribute, and loops. These are critical for mobile autoplay.
• It uses an IntersectionObserver, which is a modern browser API. This observer watches your videos and triggers an action when they enter or exit the viewport.
• Specifically, it tells a video to play() when it's approximately 60% visible on the screen (as you swipe to it) and to pause() when it's swiped away or less visible. This gives you that smooth, dynamic experience Kiwart was looking for!

After implementing these steps, test your product pages thoroughly on various mobile devices. You should now see your product videos autoplaying as customers swipe through your media gallery, creating a much more engaging and seamless shopping experience. It's a fantastic example of how a little community insight and some targeted code can make a big difference for your store!