Deferred media
Definition
Deferred media is Shopify's pattern for heavy embeds. The page renders a poster image and a button, while the real player, a video element or a hosted iframe, waits inside a template element and is cloned into the document only when someone asks for it. Nothing third-party is fetched until the shopper chooses to play.
Documented at shopify.dev, product media.
How We've Used It
Video is the one thing a merchandiser adds that the theme cannot render itself, and this is how we let them add it anyway. Sections that mix images, hosted video and embeds keep the poster-and-template shape for anything remote, so a carousel of six slides is not six iframes. Where the file is ours and the sound is off, we play it inline instead, because a poster click is friction that kind of content doesn't need. The care goes into what the pattern doesn't give you: pausing a player that has scrolled out of view, one source of truth when desktop and mobile carry different files, and a scriptless path to the video itself.
Builds Using It
- Product-card hover video and a reusable deferred-media playback refactor — LUS Brands
- Creator collab video listing driven by article metafields — Nudestix
- Featured tutorial with an adjacent shoppable product rail — Nudestix
One further gated build uses it; its page follows.
Related Entities
- Intersection Observer API — how playback and mounting are tied to position.
- Deferred CSS loading — the same discipline for stylesheets.
- Custom elements — what wraps the player at runtime.