Make Your Video Load As Soon As The Page Loads in Shopify

In this article, we’ll be going over how to make your video load as soon as the page loads on Shopify. You can also use the above video for help if you would like.

How it works

Here’s a detailed, step by step process on how to make your video load as soon as the page loads on Shopify.

The first thing you’ll want to do is go to your admin page. You can type the URL of your store, with the ending /admin.

From there, go to where it says Themes, and click on that. Look for the theme that you want to edit the footer of, and click on the three dots. From there, click on Edit Code.

The next step in how to make your video load as soon as the page loads on Shopify is to go to the Assets folder, then look for media-gallery.js.

Copy everything in the file, and make a second file called media-gallery.js (backup). Paste the code in here. This will be here just as a backup.

In the original media-gallery.js file, delete everything, and paste this code in:

document.addEventListener("DOMContentLoaded", function () {
          // const mediaElements = document.querySelectorAll(".deferred-media");
          const mediaElements = document.querySelectorAll('');
          mediaElements.forEach(function (mediaElement) {

if (!customElements.get("media-gallery")) {
    class MediaGallery extends HTMLElement {
      constructor() {
        this.elements = {
          liveRegion: this.querySelector('[id^="GalleryStatus"]'),
          viewer: this.querySelector('[id^="GalleryViewer"]'),
          thumbnails: this.querySelector('[id^="GalleryThumbnails"]'),
        this.mql = window.matchMedia("(min-width: 10px)");
        if (!this.elements.thumbnails) return;

          debounce(this.onSlideChanged.bind(this), 500)
        // This code loads all the videos on the page as soon as the page is loaded, and is very important to have this code repeated after the page is loaded

        document.addEventListener("DOMContentLoaded", function () {
          const mediaElements = document.querySelectorAll(".deferred-media");

          mediaElements.forEach(function (mediaElement) {
            // mediaElement.loadContent(false);
          .forEach((mediaToSwitch) => {
        if (
          this.dataset.desktopLayout.includes("thumbnail") &&

      onSlideChanged(event) {
        const thumbnail = this.elements.thumbnails.querySelector(

        // const mediaElements = document.querySelectorAll(".deferred-media");
        //    mediaElements.forEach(function (mediaElement) {
        //         mediaElement.loadContent(false);
        //    });

      setActiveMedia(mediaId, prepend) {
        const activeMedia = this.elements.viewer.querySelector(
          .forEach((element) => {

        if (prepend) {
          if (this.elements.thumbnails) {
            const activeThumbnail = this.elements.thumbnails.querySelector(
          if (this.elements.viewer.slider) this.elements.viewer.resetPages();

        window.setTimeout(() => {
          if (this.elements.thumbnails) {
              left: activeMedia.offsetLeft,
          if (
            !this.elements.thumbnails ||
            this.dataset.desktopLayout === "stacked"
          ) {
            activeMedia.scrollIntoView({ behavior: "smooth" });

        if (!this.elements.thumbnails) return;
        const activeThumbnail = this.elements.thumbnails.querySelector(

      setActiveThumbnail(thumbnail) {
        if (!this.elements.thumbnails || !thumbnail) return;

          .forEach((element) => element.removeAttribute("aria-current"));
        thumbnail.querySelector("button").setAttribute("aria-current", true);
        if (this.elements.thumbnails.isSlideVisible(thumbnail, 10)) return;

          left: thumbnail.offsetLeft,

      announceLiveRegion(activeItem, position) {
        const image = activeItem.querySelector(
          ".product__modal-opener--image img"
        if (!image) return;
        image.onload = () => {
          this.elements.liveRegion.setAttribute("aria-hidden", false);
          this.elements.liveRegion.innerHTML =
          setTimeout(() => {
            this.elements.liveRegion.setAttribute("aria-hidden", true);
          }, 2000);
        image.src = image.src;

      // playActiveMedia(activeItem) {
      //   window.pauseAllMedia();
      //   const deferredMedia = activeItem.querySelector(".deferred-media");
      //   if (deferredMedia) deferredMedia.loadContent(false);
      // }

      preventStickyHeader() {
        this.stickyHeader =
          this.stickyHeader || document.querySelector("sticky-header");
        if (!this.stickyHeader) return;
        this.stickyHeader.dispatchEvent(new Event("preventHeaderReveal"));

      removeListSemantic() {
        if (!this.elements.viewer.slider) return;
        this.elements.viewer.slider.setAttribute("role", "presentation");
        this.elements.viewer.sliderItems.forEach((slide) =>
          slide.setAttribute("role", "presentation")

You’ll notice that there is a code snippet that is repeated twice. This is very important, because the first snippet happens as soon as the page is loaded, and the second snippet happens after the page is loaded, just to make sure that all the videos are loaded and play as soon as they come into view.

Save your changes, and everything should be working.

If you don’t have any experience with editing the code and you need help doing so, or there’s something else you would like to do apart from how to make your video load as soon as the page loads on Shopify, I’d be more than happy to set it up for you. Feel free to reach out to me anytime.

Need help adding a feature?

Why Shopify is a good choice for your store

In the dynamic world of e-commerce, Shopify has emerged as a powerful and versatile platform that empowers store merchants to create and manage their online businesses with ease. Boasting a user-friendly interface and an extensive array of features, Shopify offers numerous cool capabilities that enable merchants to scale their operations, reach wider audiences, and enhance customer experiences.

Let’s take a look at some of the remarkable things store merchants can do on Shopify. And if you’re looking for how to make your video load as soon as the page loads on Shopify knowing a little bit more about Shopify will be helpful as well.

Easy to use

Shopify provides a wide selection of customizable themes, allowing merchants to create visually stunning and branded storefronts. Merchants can choose from an extensive range of templates or customize their own, tailoring the design, layout, and content to reflect their unique brand identity and cater to their target audience’s preferences. So if you’re doing research for how to make your video load as soon as the page loads on Shopify, it’s comforting to know that it’s not that difficult to do.

With Shopify, managing products becomes a breeze. Merchants can easily add, update, or remove products, along with their descriptions, images, and prices. The platform also supports product categorization and inventory tracking, ensuring a smooth and organized shopping experience for customers. And, making it easy for those of you researching how to make your video load as soon as the page loads on Shopify.

I can help you with your store.


One of Shopify’s standout features is its ability to integrate with numerous sales channels beyond the online store. Merchants can effortlessly sell their products on social media platforms, marketplaces like Amazon or eBay, and even in-person through point-of-sale (POS) systems. This multichannel approach helps merchants reach a broader audience and drive more sales. Even if you’re doing research for how to make your video load as soon as the page loads on Shopify, this information is good to know as well.

To combat the common issue of cart abandonment, Shopify offers automated email reminders to customers who leave their carts without completing the purchase. These gentle nudges often lead to recovered sales and increased revenue for merchants.

Data-driven decision-making is crucial in the world of e-commerce. Shopify provides detailed analytics and reports on sales, customer behavior, and other key metrics. Merchants can gain valuable insights into their store’s performance, identify trends, and make informed business decisions accordingly.

Shopify allows merchants to interact with customers effectively. From personalized email marketing campaigns to live chat support, the platform offers various tools to engage customers, provide excellent support, and foster long-lasting relationships.

For busy entrepreneurs, Shopify offers a mobile app that enables merchants to manage their stores on the go. Whether it’s processing orders, monitoring inventory, or tracking sales, the mobile app provides the flexibility and convenience to stay connected with the business from anywhere. And if you’re doing research for how to make your video load as soon as the page loads on Shopify, you’re probably busy as well and need to get this solved!

Need help with your online store?

If you’re doing research for how to make your video load as soon as the page loads on Shopify, and you need extra help, or you just need help with your store in general, I’m a Shopify Developer, and would be glad to help consult you on your store. Feel free to reach out to me anytime with any questions that you have!


Posted in:

Leave a Reply

%d bloggers like this: