Featured Tutorial With an Adjacent Shoppable Product Rail

One section, two halves: a poster-first video that fetches its YouTube or Vimeo player only on click, and beside it the first three products of whichever collection a merchandiser picks — each one a real card with a quick view and an add to bag that never leaves the page.

Dawn's video section knows nothing about products and its featured collection knows nothing about video. On Nudestix's how-to and live-shopping pages we composed the two in one section: a deferred YouTube or Vimeo embed beside the first three products of a merchandiser-chosen collection, each card carrying the quick-view modal and an in-card add to bag, with the quick-add scripts the section loads for itself.

The Problem

A theme's sections are single-purpose by design. Dawn ships a video section that renders one embed and a featured-collection section that renders a product grid, and neither knows the other exists. Put them on a page one above the other and you get a tutorial with a shopping list somewhere below the fold.

What the brief asked for was "watch this, buy these" in the same viewport, with the buying part working the way it works everywhere else on the store. Nudestix wanted that module in two places: the how-to library, where each featured video changes with the campaign, and the live-shopping page, where a replay sits beside the products the host used. Both needed the product list to be a merchandising decision, not a developer's.

The Constraint

Composition on Shopify means one section with one schema, so both halves had to be settings on a single {% schema %}: a collection picker for the rail, a video_url for the embed, an image for the poster, and the headings around them.

Quick add doesn't come free to a new section. Dawn's card contract expects quick-add.js and product-form.js in the page, and Dawn only enqueues them from the sections that already render quick-add cards — the collection grid, the featured collection. A page template made of custom sections has neither, so this one had to load its own dependencies, including the quick-add.css the modal is styled by.

And the video had to stay deferred. The live-shopping page already loads a third-party player of its own, so a second iframe in the initial HTML — before anyone had asked to watch — was the thing to avoid.

What We Built

video-tutorials.liquid lays out a 4/8 split on large screens.

The left rail. A badge string, a heading rendered as <p role="heading" aria-level="2"> so the page's heading order isn't dictated by the section's position, a subtext paragraph, and a second uppercase heading above the products. The products come from section.settings.collection.products with limit: 3, and each one renders through card-product-video.liquid — a local variant of the theme's product card — with show_quick_add, show_rating, show_secondary_image and show_vendor all passed true and section_id: section.id so every card's ids are scoped to this placement.

Each card carries two purchase paths. For a product with more than one variant, a <modal-opener> and <quick-add-modal> pair opens /products/<handle>?view=quickview in a dialog — the storefront's trimmed product render, fetched on click — with a QuickAddInfo- container the fetched section lands in. Independently of the modal, the card renders a <variant-radios> shade row bound to a real {% form 'product' %} inside <product-form>, a per-card price-<section id>-<product id> container the price re-renders into on shade change, and a submit that posts through the theme's product-form path. So a single-shade product goes straight to the bag from the card; a multi-shade product can be added from the card once a shade is picked, or opened in the modal.

The right column. A <deferred-media> element in Dawn's pattern: a poster <button> carrying the cover image at a full srcset ladder and a play icon, and a <template> holding the iframe — YouTube with ?enablejsapi=1 and a js-youtube class, or Vimeo's player with js-vimeo, chosen on video_url.type. Nothing from either host is requested until the poster is clicked and the theme's deferred-media element moves the template's content into the DOM. Behind it, a <noscript> block renders the poster as a plain anchor to the video URL, padded to the cover image's aspect ratio, so a shopper without scripts still gets a link.

The dependencies. The section enqueues quick-add.js and product-form.js with defer, and loads quick-add.css through a <link media="print" onload="this.media='all'">, the swap Dawn uses for a stylesheet whose rules apply only once a modal is open — plus the card, price and deferred-media component stylesheets the two halves depend on.

Why This Way

Binding the rail to a collection rather than to three product pickers puts merchandising where merchandisers already work. Re-ordering the collection re-orders the rail; swapping a product in the admin swaps it on the page. The tutorial's shopping list follows the catalog with no theme-editor visit.

Reusing Dawn's card contract instead of drawing a simpler tile is the second decision. The card the rail renders is the shape the collection grid renders: quick view, price, rating, shade row, add to bag, behaving as they do on a listing page. A purpose-built tile would have needed its own add-to-cart, price refresh and sold-out state, each drifting from the grid's over time.

What that buys, it charges in coupling. The section carries a full card per product, with the card's own stylesheets and scripts declared alongside, for a rail that shows three. Its quick-add dependencies are declared in the section rather than in the layout, so a second section on the same page that also wants quick add declares them again. And limit: 3 is a design decision hard-wired into Liquid — a merchandiser who wants four gets three until a developer changes it.

Why Not an App

Shoppable-video apps sell exactly this composition: the app hosts the video, owns the player, overlays product pins and handles the add to cart in its own cart layer. That is three things the theme already does — and does in the theme's own way, with the theme's own cart events, prices and sold-out rules.

Keeping the video as a deferred YouTube or Vimeo embed and the cards native means there is no vendor script on the how-to page, no second cart to reconcile with the drawer, and no product mapping to maintain inside an app. The live-shopping page does run a third-party live-commerce player for its event replays; this section sits beside it rather than through it, and the products next to the replay are theme cards on Shopify's own form endpoint.

Implementation Notes

• The rail is limited in Liquid with limit: 3 on the collection loop, regardless of how many products the chosen collection holds.
• quick-add.js and product-form.js are deferred script tags in the section; quick-add.css is a media="print" link that switches itself to all on load.
• video_url is a Shopify video_url setting constrained with accept: ["youtube", "vimeo"] and ships a default, so the section renders a working embed before anyone configures it.
• The YouTube iframe is emitted with ?enablejsapi=1 and the js-youtube class, which is the hook the theme's deferred-media element uses to control playback.
• Cards are rendered with section_id: section.id, so a product that also appears in another section on the same page gets a distinct form id, price container id and modal id here.
• The section heading is a <p role="heading" aria-level="2"> rather than an <h2>, so the module can be placed under any page heading without breaking the outline.
• The section was placed twice with different collections: once on the how-to library template and once on the live-shopping template.

Edge Cases

• The whole product rail is wrapped in if section.settings.collection.products.size > 0, so an unset or empty collection renders the video alone rather than an empty list.
• A missing cover image falls back to Dawn's collection-2 placeholder SVG in both the poster button and the <noscript> anchor.
• video_url.type decides the embed: YouTube gets the enablejsapi embed URL, anything else the Vimeo player URL — and the schema's accept list means "anything else" can only be Vimeo.
• With scripts disabled the poster is an anchor to the video URL, aspect-ratio padded from the cover image so the layout doesn't collapse.
• A single-variant product skips the shade row and the modal path; its card posts the default variant straight from the in-card form.

Platform Primitives Used

• Liquid section schema and settings — one schema carries both halves: a collection picker, a video_url with an accept constraint, a cover image and five text settings.
• Cart AJAX API — every card's add to bag is the theme's <product-form> posting to the cart endpoint; the section's job is to make sure the script that does it is on the page.
• Deferred media — Dawn's poster-then-<template> pattern for the embed, so neither video host is contacted before a click.

Integrations in Play

• YouTube — one of the two embed targets, loaded with the JS API enabled so the theme can drive playback.
• Vimeo — the other embed target, on the same deferred path.
• TalkShopLive — the live-commerce player on the live-shopping page; this section sits alongside it and does not depend on it.

Where It Runs

On the landing page surface, through two page templates: the how-to video library and the live-shopping page. Each placement is configured with its own collection and its own featured video, which is the point — the same section, two different tutorials, two different shopping lists.

What This Demonstrates

Primary: quick view and in-grid add to cart — cards outside the collection grid that still open the quick-view modal and add to bag in place, on a page template Dawn never wired for it.

It is also a collection merchandising and product rails build, a rail whose contents are a collection edit, and a video and shoppable media build, for the deferred embed the rail sits beside.

How We Know

One section file and the card snippet it renders, read from the theme, plus the two page templates that place it. Documented from the code; no client-side record of the decision survives. There is no brief here saying why the rail is three products or why the collection was chosen over product pickers — what we can show is a limit: 3, a collection setting and a section that enqueues its own quick-add scripts, and this page describes those and stops short of intent it can't evidence.

Related Builds

• Creator collab video listing driven by article metafields — Nudestix. The same storefront's other video surface, where the videos are the catalog and the metafield is the source.
• Merchandisable homepage product carousel with a tag-driven badge engine and inline add-to-bag — LUS Brands. The cross-client comparison: a collection-bound rail with in-card add to bag, on a different theme base and a different surface.
• Product-card hover video and a reusable deferred-media playback refactor — LUS Brands. Dawn's deferred-media element, extended rather than composed.
• Product card with award badges, per-variant content payload and per-card structured data — Nudestix. The card family this rail's local variant belongs to.

The Buy-vs-Build Question

A shoppable-video app is a hosted player, a pin editor and a cart overlay, sold together. This section buys none of them: the video stays on YouTube or Vimeo behind a poster, and the products are the theme's own cards. Where the bought version earns its fee — and where a poster and three cards are enough — is the question on Shoppable video and media: buy or build?

Provenance & Evidence

• Client: Nudestix — nudestix.com
• Surfaces: Landing page
• Templates served: two — the how-to video library and the live-shopping page
• Complexity: Medium
• Attribution: Deploi-authored. The section is ours. It runs inside a theme built on Dawn 6.0.2 and composes two of Dawn's patterns — the deferred-media embed and the product-card contract — through a local card variant rather than Dawn's own snippet.
• Status: Live, verified 2026-09-07
• Evidence: one section file and one card snippet, read from the theme, plus the two page templates that place it
• Confidence: Moderate — documented from the code; no client-side record of the decision survives
• Primary capability: Quick view and in-grid add to cart

Ready to Put the Products Next to the Tutorial?

If your how-to content and your buy buttons live in different sections of the page, a shopper has to go and find one from the other. Contact us today and we'll show you what a shoppable tutorial module looks like on the theme you already run — no player to license.