DE Hero: Art-Directed Image/Video Hero With Layout Controls

A campaign hero that serves a genuinely different mobile crop through hand-built <picture> markup, publishes both breakpoints' aspect ratios as CSS custom properties, switches to a hosted video from one setting, can make the whole frame a link, and decides its own loading priority from where it sits on the page.

Shopify's image_tag emits one <img>, and a hero that's usually the page's largest element can't afford to lazy-load when it's first or to shift the layout while it decodes. This hero hand-builds a <picture> with a real mobile crop, publishes both aspect ratios as CSS custom properties so the box is reserved before decode, and promotes itself to eager loading only when it is the first section on the page.

The Problem

Shopify's image_tag filter emits a single <img> with a srcset. That gives you the same picture at several sizes; it does not give you a different picture on a phone. Genuine art direction — a portrait crop for mobile that isn't a squeezed version of the landscape one — needs <picture> with a <source> per breakpoint, and the platform doesn't write that for you.

LUS Brands' campaign landing pages needed a hero the merchandising team could restyle per campaign: different crops for desktop and mobile, an image or a video, overlay copy positioned anywhere in the frame, sometimes the entire banner acting as one link to a collection — without a developer editing markup for every launch.

The Constraint

The hero is usually the page's Largest Contentful Paint element. That imposes two rules that pull against each other. It must not lazy-load when it's first on the page, because the biggest thing the shopper sees would then be the last thing to arrive. And it must not cause layout shift while its image decodes, which means the browser has to know the box's height before it has the image — for whichever image this breakpoint is going to use, since the two crops have different shapes.

A third constraint came from how the page is built. The hero isn't always first: on some campaign templates an announcement or a utility section sits above it. So "am I the LCP element" can't be a checkbox the merchandiser remembers to tick; it has to be something the section works out.

And it had to share the conventions of the storefront's other custom sections — the same class hook, the same background controls — so a merchandiser who has configured one DE section can configure this one.

What We Built

de_hero.liquid renders a <picture> whose <source media="(min-width: 750px)"> carries the desktop image's srcset at 1500, 2000, 3000 and 3840 pixels wide, and whose base <img> is the mobile image. The mobile image falls back to the desktop asset when unset, so a hero configured with one file still renders on both breakpoints.

Ratios as tokens. Both images' aspect ratios are computed in Liquid and published as --de-hero-ar-mobile and --de-hero-ar-desktop custom properties on the section. The stylesheet reserves the box from whichever one applies at the current breakpoint, so the frame is the right shape before either image has decoded, and it stays the right shape when the crop changes at 750px. With no media set at all, both default to 16:9 so the frame never collapses.

Priority from position. section.index == 1 decides between loading="eager" and loading="lazy". The hero is prioritized when it is actually the first section on the page and treated as ordinary content when it isn't. There's no setting for it.

Video. A media_type select switches the media to video_tag output with autoplay, loop and muted set and controls off; an empty video setting falls back to Shopify's hero-apparel-1 placeholder.

Whole-hero link. An optional section_link wraps the entire frame in an anchor, with a new-tab toggle. When no link is set, the same markup renders as a <div> — the open and close tags are paired if/else branches around one body, so there's one hero to maintain, not a linked one and an unlinked one.

Layout. Direction, alignment, position, gap, width (page or full) and height modes are settings. The content overlay is built from heading, text and button blocks, with a two-button variant; buttons without a link render as role="link" with aria-disabled="true" rather than as dead anchors. A hide_if_no_media toggle suppresses the whole section when nothing is uploaded, and the section shares the storefront's DE conventions: enable_custom_class for a per-instance class hook and section_bg or section_gradient_bg for a background color or gradient.

Why This Way

Hand-rolled <picture> is the only way to serve a genuinely different mobile crop on Shopify, so that decision made itself. Publishing both aspect ratios as custom properties is the part that makes it safe: the placeholder box matches the image that will actually load at that breakpoint, so there's no shift when the portrait crop replaces the landscape one at 750px. The storefront's earlier banner reserves its box with a ::before padding computed in Liquid; this section moves the ratio into tokens the stylesheet can switch between, so one rule handles two crops.

Keying eager loading to section.index rather than to a checkbox means merchandisers can't accidentally deprioritize the largest image on the page by reordering sections. The rule is right by default.

It's also wrong for one layout, and that's the cost. A hero placed second on purpose — under an announcement bar section, say — lazy-loads, because the rule says it isn't first. The other cost is the settings surface: direction, alignment, position, gap, width, height, backgrounds and blocks is a lot of hero to configure, and a section this flexible asks a merchandiser to learn it before it gives them anything back.

Implementation Notes

• Aspect ratios default to 16:9 when no media is set, so the frame never collapses to zero height in an unconfigured section.
• The whole-hero link and the no-link case share one markup body through paired if/else open and close tags — the anchor or the div wraps the same content.
• An empty video setting falls back to Shopify's hero-apparel-1 placeholder_svg_tag, so a video hero without a video still lays out in the editor.
• The desktop <source> carries a four-step srcset at 1500, 2000, 3000 and 3840 pixels, sized for full-bleed placement on large displays.
• The section uses the same DE conventions as the storefront's other custom sections: enable_custom_class, and section_bg or section_gradient_bg for the background.
• It is distinct from the homepage's de_hero_swiper carousel, which is a separate section with its own page.

Edge Cases

• Only a mobile image uploaded: it's used at every breakpoint, since the base <img> is the mobile one and the desktop <source> is skipped.
• Only a desktop image uploaded: it becomes the mobile base image too, so the hero renders on a phone with the landscape crop rather than nothing.
• hide_if_no_media on and nothing uploaded: the section renders nothing at all rather than an empty frame.
• Buttons with no link render role="link" with aria-disabled="true", so a half-configured button isn't an anchor to nowhere.
• Blocks are optional: a media-only hero renders without a content overlay, which is how a campaign image with the copy baked in is placed.

Platform Primitives Used

• liquid-schema-settings — media type, both images, the link, the layout modes and the backgrounds are section schema; the ratio computation and the section.index check happen in the same Liquid pass.
• theme-blocks — heading, text and buttons are blocks, so a hero can carry any combination of them, or none.
• css-custom-properties — --de-hero-ar-mobile and --de-hero-ar-desktop carry the two ratios from Liquid to the stylesheet.
• responsive-images — a hand-built <picture> with a breakpoint <source> and a four-step srcset, because image_tag can't express two crops.

Where It Runs

On the landing page surface, mounted by one campaign page template, an all-products landing page. It's registered against the home page surface as well; nothing in the section depends on the template that places it.

What This Demonstrates

• Video and shoppable media modules — the primary capability. A hosted video hero from one select, with a poster-free box that's the right shape before the media arrives.
• Art-directed hero and banner system — separate desktop and mobile artwork with explicit LCP handling — the taxonomy's own definition of art direction.
• Core Web Vitals and media performance — CLS-safe ratio boxing and an LCP priority derived from position rather than from a setting someone has to remember.

How We Know

One section file of roughly 480 lines, read from the theme, plus two client working-session records and a scoping document from spring 2026. The records place hero sections and merchandising modules inside the project's scope and show the hero work being extended mid-project by an additional banner request. The <picture> construction, the ratio tokens and the section.index rule are code-side decisions, read from the section rather than from any document.

Related Builds

• Marketing image banner with mobile art, typography controls and highlight headings — the same storefront's earlier banner, which solves the same two-crop problem with a ::before padding box computed in Liquid rather than ratio tokens.
• Responsive video hero with independent desktop/mobile sources and single-source-of-truth playback controls — the same storefront's video-first hero, where art direction is two <video> elements and a media query rather than a <picture>.
• Landing-page hero sections with a no-JS add-to-cart on page templates — a different storefront's campaign hero kit, built on a premium theme rather than Dawn.
• Homepage hero carousel v2 - video and split-image slides with per-slide typography control — a different storefront's hero, where the art direction is per slide and the media can be video.

The Buy-vs-Build Question

A hero app buys a banner with its own editor and a runtime in front of your largest image. Building this one bought a <picture> in the initial HTML, a box reserved before decode and a loading priority the section works out for itself — and cost a settings surface a merchandiser has to learn. Whether you need a page builder at all is the question on the landing page builder decision page.

Provenance & Evidence

• Client: LUS Brands — loveurcurls.com
• Surfaces: Landing page, home page
• Templates served: one — an all-products campaign page template
• Complexity: Medium
• Attribution: Deploi-authored. The section, its schema and its <picture> markup are ours. It runs in a theme built on Dawn 15.4.1 and shares the storefront's DE section conventions.
• Status: Live, verified 2026-09-06
• Evidence: One Liquid section, plus two client working-session records and a scoping document from spring 2026
• Confidence: Strong — the records place the hero in scope; the <picture> construction, the ratio tokens and the priority rule are documented from the code
• Primary capability: Video and shoppable media modules

Ready for a Hero That Knows When It's First?

You dream it. We build it. If your campaign hero is one image squeezed into two shapes, or the largest thing on the page and the last to load, Contact us today and we'll show you what art direction with the right loading priority looks like.