How to make Shopify product videos auto-loop

Are you looking to make your Shopify product videos more engaging? Looping your videos is an option. A looping video can showcase all its features without your customers having to hit play repeatedly. Let’s find out how to do it.

Important Browser Note: Modern browsers (Chrome, Safari, Firefox, Edge) only allow muted videos to autoplay. Videos with sound require user interaction to play. This guide will show you how to set up muted autoplay with loop functionality that works across all devices.

How to turn on looping videos in Shopify

There are two options for Shopify owners.

Option 1: If your theme supports

Most Shopify 2.0 themes, including Dawn, do not include built-in loop settings in the theme customizer. However, some premium themes may offer this feature. Here’s how to check:

1. Log in to your Shopify admin.
2. Go to Online Store > Themes.
3. Click Customize next to your current theme to open the theme editor.
4. In the editor, go to your Product page.
5. If your theme has a video block or a media section, click on it.
6. Look for settings like Autoplay or Loop. If the option is there, just turn it on.
7. Hit Save when you’re done.

If you don’t see a loop option (which is common), don’t worry. You can still make it work with the code method below.

Option 2: Add looping with a small code edit

This method works for any Shopify theme and gives you full control over video behavior.

Important Safety Note: Before making any code changes, duplicate your theme to avoid affecting your live site.

Then, follow this instruction:

1. From your Shopify admin, go to Online Store > Themes.
2. Click Actions > Edit code next to your current theme.
3. Find the file that controls your product media. Common locations include:
   • sections/main-product.liquid (Dawn theme)
   • sections/product.liquid
   • sections/product-template.liquid (older themes)
   • snippets/product-media.liquid
   • templates/product.liquid
4. Look for existing video tags. They might look like this:

{{ media | video_tag: controls: true }}

or

<video controls>
  <source src="{{ media.sources[1].url }}" type="video/mp4">
</video>

Replace the video tag with this enhanced version:

For Liquid video_tag (Recommended):

{{ media | video_tag: autoplay: true, loop: true, muted: true, playsinline: true, controls: true }}

For HTML video tag:

<video autoplay loop muted playsinline controls>
  <source src="{{ media.sources[1].url }}" type="video/mp4">
  Your browser does not support the video tag.
</video>

Understanding the attributes:

• autoplay: Starts video automatically (only works when muted)
• loop: Repeats video continuously
• muted: Required for autoplay to work in modern browsers
• playsinline: Prevents fullscreen on mobile devices (essential for iOS)
• controls: Shows play/pause/volume controls for user interaction

Mobile Autoplay Considerations

While the code above works on desktop browsers, mobile devices have stricter autoplay policies to save data and battery:

iOS Safari

• Videos must be muted to autoplay (the muted attribute is required, not optional)
• The playsinline attribute is essential—without it, videos will try to open in fullscreen
• Low Power Mode may disable autoplay entirely on some devices

Android Chrome

• Muted videos can autoplay
• Data Saver mode may block autoplay on cellular connections

Troubleshooting Mobile Issues

If videos aren’t autoplaying on mobile:

1. Verify the muted attribute is present—this is the most common issue
2. Add the playsinline attribute if not already included
3. Test on actual devices, not just browser simulators
4. Consider adding a visible play button as a fallback for users who have autoplay blocked

Example with all required mobile attributes:

<video autoplay loop muted playsinline>
  <source src="your-video.mp4" type="video/mp4">
</video>

Now your product videos will play automatically and loop without the customer having to interact.

Special Note for Dawn Theme Users

Dawn theme (Shopify’s default theme) uses deferred media loading, which means videos don’t load until the user interacts with them. The standard autoplay attributes won’t work without additional JavaScript.

If you’re using Dawn or a theme based on Dawn, add this code to your theme.liquid file, just before the closing </body> tag:

{% if template contains 'product' %}
<script>
window.addEventListener('load', function() {
  // Auto-click the play button for deferred media
  var playButton = document.querySelector('.is-active .deferred-media__poster-button');
  if (playButton) {
    playButton.click();
  }
  
  // Handle thumbnail clicks to auto-play videos
  var thumbnails = document.querySelectorAll('media-gallery .thumbnail-slider ul li');
  thumbnails.forEach(function(item, index) {
    item.addEventListener('click', function() {
      setTimeout(function() {
        var videos = document.querySelectorAll('media-gallery .product__media-list li video');
        if (videos[index]) {
          videos[index].play();
        }
      }, 100);
    });
  });
});
</script>
{% endif %}

This script automatically clicks the play button when the page loads, and ensures videos play when customers click through product thumbnails.

Conclusion

Setting up your Shopify product videos to loop is a simple yet effective way to showcase your products. It keeps your customers engaged and gives them a better view of what you’re selling. By following these easy steps, you can have your videos playing on repeat in no time.