Brand Story Split Panel: One Section That Renders Image, Hosted Video or YouTube With Separate Desktop and Mobile Assets

A 50/50 story panel whose media half is a picture, a Shopify-hosted video or a YouTube embed depending on one select, whose mobile aspect ratio is computed in Liquid from the asset that will actually load, and whose type scale, spacing and side-flip are all settings — so an About page is one section, placed as many times as the story needs.

Shopify's video and video_url settings are different types with different render paths, and a YouTube frame is locked to 16:9 while a hosted video or an image is not. This split panel switches its media half between the three from one media_type select, computes the mobile aspect ratio in Liquid from the real asset so the box is right before anything loads, and exposes the whole type scale as settings.

The Problem

An About page is a sequence of story panels — half media, half copy, alternating sides — and the media in each panel might be a still, a short brand film hosted on Shopify, or a YouTube edit. On the platform those are three different things. A video setting is a Shopify-hosted file rendered through video_tag. A video_url setting is a YouTube or Vimeo address rendered as an iframe. An image_picker is a third path again. The obvious build is three near-identical sections, one per media kind, which leaves the marketing team guessing which one to add and gives three places for the typography to drift apart.

The 2026 rebuild of the About page also carried a decision the platform doesn't help with: the original copy was to be kept at its full length, because it's a key brand page. So the text half had to hold real paragraphs, authored in the theme editor's rich text field, and lay them out well at two breakpoints.

The Constraint

Three render paths in one section, with three different shapes. A YouTube iframe is 16:9 and nothing changes that. A hosted video has whatever aspect ratio it was exported at. An image has its own. On desktop the panel is a fixed half-width column, so the ratio is a cropping question; on mobile the media stacks above the copy at full width, and the box it occupies has to be reserved before the asset arrives or the copy jumps when it does.

The page is authored by non-developers, in the theme editor. Media type, mobile ratio, padding, colors, every font size and every line height had to be settings — not CSS edits, not a per-page stylesheet. And the panel had to work with the media on either side, because the page alternates.

Rich text from the editor brought its own problem. Shift+Enter in Shopify's rich text field produces a double   rather than a paragraph break, and a page of long-form brand copy pasted in that way lays out with inconsistent spacing.

What We Built

brand-story-split.liquid is one section with a media_type select — image, video or youtube — that switches what the media half renders.

Image. A <picture> with a mobile <source> and a desktop image, rendered at up to 1400 pixels wide in WebP through a widths ladder of 600, 800, 1000, 1200 and 1400, with sizes set to half the viewport at 990px and up and the full viewport below.

Hosted video. Shopify's video_tag with autoplay, loop and muted set, controls off, and preload set to none so the About page doesn't request video bytes on first paint. Each media type accepts a desktop asset and an optional mobile one; when the mobile asset is empty, the desktop one serves both breakpoints.

YouTube. An iframe built from the video_url object's .id, with a captured parameter string — enablejsapi=1&controls=1&rel=0&modestbranding=1&playsinline=1 — a title derived from the panel's heading, a full allow list and allowfullscreen.

Ratio in Liquid. The mobile aspect ratio is computed per media type at render time and emitted as a --mobile-ratio-percent custom property. A portrait setting yields 0.8, square yields 1, custom takes a pixel height, and adapt reads the real asset's aspect_ratio — the uploaded image's or video's actual dimensions — with 1.777778 forced for YouTube, which can't be anything else.

Copy. The text half carries roughly forty settings: heading and rich-text body, desktop and mobile font size, line height and weight for each, heading and text colors, a panel background, four-way desktop padding and two-way mobile padding, section margins at both breakpoints, and image_position to flip the sides. The body passes through richtext-normalize.liquid, a local snippet that rewrites   into a paragraph break, so copy pasted with Shift+Enter lays out like copy written with paragraphs. Styles ship as a compiled section-brand-story-split.min.css plus an id-scoped {% style %} block for the per-instance values.

Why This Way

One section with a media-type switch keeps the About page a single repeatable idea. The marketing team adds "a story panel," picks what kind of media it has, and the typography, spacing and side-flip behave the same way in every instance because they're the same code.

Computing the ratio in Liquid, rather than leaning on CSS aspect-ratio, is what makes adapt real. Liquid can read the uploaded asset's dimensions; CSS can't know them until the asset loads. So the mobile box matches the media that's going to fill it, with no crop and no shift when it arrives. Falling back from the mobile asset to the desktop one means a merchandiser can supply a single file and get sane behavior on both breakpoints, and supply two when the crop matters.

What you take on is a large settings surface and a large file. Forty settings on the copy side alone means every new panel is a set of decisions a fixed section would have made for you, and there's no guarantee two panels on the same page end up typographically identical unless someone copies values across. Three media branches in one section of roughly 600 lines is three code paths to keep in step whenever one changes. That's the price of not having three sections.

Implementation Notes

The section is capped at a max-width of 1536px and centered, independent of Dawn's page_width setting, so the panel can run wider than the theme's content column.
Images render at width 1400 with format: 'webp', a widths ladder of 600,800,1000,1200,1400 and sizes of (min-width: 990px) 50vw, 100vw.
Hosted video uses preload: 'none' and loading: 'lazy' in its video_tag call.
YouTube iframes carry a title derived from the heading setting, a full allow list and allowfullscreen, so the embed is labelled for assistive technology and can go full screen.
Scroll reveal is opt-in through Dawn's own animations_reveal_on_scroll setting, using the theme's scroll-trigger animate--slide-in classes and data-cascade, so the panel animates the way the rest of the theme does or not at all.
richtext-normalize.liquid is a shared local helper that rewrites   to , used here for the body copy.

Edge Cases

Every media branch ends in a placeholder_svg_tag fallback, so an unconfigured panel still lays out with a placeholder rather than collapsing.
mobile_ratio guards against a zero or null aspect_ratio and falls back to 1, so an asset with no readable dimensions gets a square box rather than a broken one.
A custom mobile ratio is ignored for YouTube, which is pinned to 16:9 regardless of the setting.
Only the desktop YouTube video set, with no mobile one, still renders through the mobile branch by aliasing the desktop setting — the same fallback the hosted video and image paths use.

Platform Primitives Used

liquid-schema-settings — the media_type select, the video and video_url settings, the ratio mode and the forty-odd typography and spacing controls are all section schema, and the ratio computation happens in the same Liquid pass that reads them.
responsive-images — the image branch is a <picture> with a mobile source and a WebP widths ladder sized to the panel's half-width column.

Integrations in Play

YouTube — one of the three media paths: an iframe built from the video_url object's id, with the panel's heading as its title.

Where It Runs

On the landing page surface, through one template: the About page. Four instances of the section are placed on that template, alternating sides — which is the whole point of building one section rather than three. It's registered against the home page surface as well, since nothing in it depends on the page that mounts it.

What This Demonstrates

Video and shoppable media modules — the primary capability. Self-hosted video and YouTube in one section, with lazy loading and a poster-free box that's the right shape before the media arrives.
Art-directed hero and banner system — a desktop asset and a mobile asset per panel, with a mobile ratio that comes from the asset rather than a guess.
Brand story and editorial section system — the reusable editorial vocabulary of the storefront: this is the split-panel entry in it, with per-instance typography and side-flip.

How We Know

One section file of roughly 600 lines, read from the theme, plus a roadmap record, seven client working-session records and a scoping document from spring 2026. The records establish that the About page was one of two genuinely new pages in scope, that two design concepts were produced and the second was approved as the page's structure, that the original copy was to be kept at full length because it's a key brand page — which is why the body is rich text with a normalization pass — and that development began in mid-May 2026. The media-type switch and the ratio computation are read from the code.

Related Builds

Responsive video hero with independent desktop/mobile sources and single-source-of-truth playback controls — the same storefront's full-bleed video, where the breakpoint decision is made in JavaScript rather than in Liquid.
DE Hero: art-directed image/video hero with layout controls — the campaign hero, which publishes both aspect ratios as custom properties for the same reason this panel publishes one.
Marketing image banner with mobile art, typography controls and highlight headings — the same storefront's banner, with the same computed-ratio idea applied to a ::before padding box.
Creator collab video listing driven by article metafields — a different storefront's YouTube and Vimeo cards, where the iframe is held in a template element until a shopper presses play.

The Buy-vs-Build Question

A page builder buys story panels with a visual editor and its own runtime in front of the page. Building the panel bought a section that speaks the theme's own settings language, computes its ratio from the real asset and handles three media kinds in one place — and cost forty settings a merchandiser has to understand. Whether to own a section library at all is the question on the theme section library and design system decision page.

Provenance & Evidence

Client: LUS Brands — loveurcurls.com
Surfaces: Landing page, home page
Templates served: one — the About page template, with four instances placed
Complexity: Medium
Attribution: Deploi-authored. The section, its schema, the ratio computation and the richtext-normalize helper are ours. It runs in a theme built on Dawn 15.4.1 and opts into Dawn's own scroll-reveal setting.
Status: Live, verified 2026-09-06
Evidence: One Liquid section, plus a roadmap record, seven client working-session records and a scoping document from spring 2026
Confidence: Strong — the records document the page, its approved concept and its copy; the media switch and the ratio math are documented from the code
Primary capability: Video and shoppable media modules

Ready for an About Page Your Team Can Keep Rewriting?

You dream it. We build it. If your brand story is stuck in a page builder or in three sections that almost match, Contact us today and we'll show you what one panel, placed four times, looks like.