Editorial Split Banner With Typographic Control and Merchandiser-Authored Offer Details

A homepage banner where layout mode, desktop and mobile artwork, subtext type scale, five colours and an offer-details panel are all settings, so a campaign and its terms publish together without a developer in the loop.

Dawn's image banner is one picture with the theme's own type over it — no mobile art, no type scale, nowhere for an offer's terms. This section renders a two-panel banner whose layout mode, desktop and mobile artwork, subtext type scale, five colours and offer-details panel are all settings, with the responsive image swap done in CSS through two custom properties rather than in Liquid.

The Problem

A campaign banner below the hero carries two kinds of copy. There's the promotional line — the offer, the product, the call to action — and there's the detail behind it: what qualifies, what's excluded, when it ends. Both have to be published, and the second can't be a wall of small print inside the banner.

Dawn's image banner doesn't give a merchandiser any of that. It takes one image, lays heading, text and button blocks over it, and sets their type from the theme's global sizes. There's no second crop for a phone, no way to set a size, weight or letter-spacing on the subtext, and no place to attach terms. On a color-cosmetics storefront where the banner below the hero changes with every launch, that gap is a developer ticket per campaign.

The Constraint

The banner had to be a section in the theme editor, on a theme built on Dawn 6.0.2 whose layout vocabulary is Tailwind-prefixed utility classes — so the panel structure is written in those utilities and everything responsive lives in a stylesheet the section loads itself.

A Shopify section setting holds one value. A subtext size that's right beside a 40px headline on desktop is wrong at phone width, so somewhere the section has to decide where the merchandiser's type scale applies and where the stylesheet's own mobile size takes over. The same is true of the artwork: two images means two <img> elements or two background renditions, and one place — a media query — that decides which one shows.

And the offer terms had to sit beside the promotional copy in the same settings panel, so the person publishing the campaign publishes its conditions in the same edit.

What We Built

image-banner2.liquid renders a <section class="banner-v2"> with two panels: a content panel and a media panel. An image_layout setting switches between two modes. In inline mode the panels sit side by side from 767px, the content panel given the wider of the two fixed flex-basis values, and on a phone the order flips so the artwork comes first, through a single content-order-767 class whose order value changes at the breakpoint. In background mode the media panel is dropped and the artwork is painted behind the content by an absolutely positioned layer whose --mobile-bg-image and --desktop-bg-image custom properties hold the two renditions, 750 and 1500 pixels wide; the stylesheet swaps which property feeds background-image at the same 767px breakpoint. The swap is CSS, not Liquid — both URLs are in the markup, and the browser picks.

In inline mode the two crops are two <img> elements. Each carries a srcset ladder from 165 to 1500 pixels wide, with each rung emitted only when the source image is at least that wide, and a sizes of 65vw for the desktop image and calc(100vw - 20px) for the mobile one. They're marked aria-hidden, lazy-loaded, and given their intrinsic width and height. A desktop-image-767 / mobile-image-767 class pair shows one and hides the other.

The copy is an eyebrow, an <h2> headline, a subtext block and a button, from twenty-six settings. A {% style %} block writes the merchandiser's subtext type scale — sub_text_font_size, sub_text_font_weight, sub_text_spacing, sub_text_line_height — from 821px up, and the content alignment per breakpoint from desktop_content_alignment and mobile_content_alignment. Five colour settings cover the eyebrow, the text, the panel background, the button text and the button background. The button's aria-label is composed from its label plus the destination path with slashes and hyphens turned into spaces, so a screen reader hears where "Shop now" goes.

show_offer_info adds the offer-details affordance: an info button labelled from offer_info_btn_text, and a panel that carries offer_info_text as its heading and offer_info_subtext as its body, pinned to the left or right edge of the banner by offer_info_btn_alignment, with a close control labelled for assistive technology. That's where the "spend X, get Y" conditions live: authored in the same settings panel as the banner, shown beside it rather than inside it.

The section loads its own image-banner2.css, roughly 400 lines, which holds every breakpoint rule; the {% style %} block carries only the per-instance values.

Why This Way

Exposing the type scale as settings is what takes the developer out of the campaign loop: a launch that needs a lighter subtext or tighter tracking is a slider in the theme editor. Putting the image swap in CSS keeps Liquid out of the responsive decision, and it puts the art-direction switch at the same 767px breakpoint as the layout flip, so the phone gets its crop and its stacked layout in one change rather than two.

The account of those choices above is ours, read from the code. What the code also shows is what was given up. The type scale reaches one element. The eyebrow takes its size and weight from the section's stylesheet and the headline takes its own from the utility classes in the markup; the only per-instance control over either is colour, so a campaign that wants a smaller headline is still a code change. The subtext controls only take effect from 821px; below that the stylesheet's fixed mobile size applies, so the typographic control is a desktop affordance. And in inline mode the page carries two full image ladders, one of which the current viewport never shows.

Why Not an App

Banner and landing-page builders sell this: a drag-and-drop panel with type controls and a place for terms. Their mechanism is to keep the content in the vendor's editor and render it into the theme through a runtime script, so the banner's copy, artwork and terms live outside the store's own settings and arrive after paint.

This banner stays a section. Its content is in the theme editor beside every other section on the homepage, its stylesheet is one file the theme owns, and the offer terms are a setting on the same panel as the offer. The trade is that it's bespoke to this theme — a new campaign gets a new instance, not a new template in someone else's tool.

Implementation Notes

• Background mode passes the 750px and 1500px renditions into --mobile-bg-image and --desktop-bg-image; the stylesheet swaps which one feeds background-image at 767px.
• Inline mode emits full srcset ladders from 165 to 1500 pixels for both crops, each rung gated on the source width, with sizes of 65vw and calc(100vw - 20px).
• The layout flip and the image swap share the 767px breakpoint; the subtext type scale applies from 821px.
• Side by side, the content and media panels are given fixed flex-basis values, the content panel's the wider; from 520px the media panel holds a 65vh height until the side-by-side layout takes over.
• The button's aria-label is the label plus the destination path, slashes and hyphens replaced with spaces.
• Both banner images are aria-hidden, lazy-loaded and carry intrinsic dimensions; the section loads image-banner2.css itself.
• The offer-details panel and its heading and body each render only when their setting is populated.

Edge Cases

• show_image off turns the banner into a colour panel, with the artwork dropped in both layout modes.
• An empty image slot in inline mode renders Shopify's placeholder SVG in place of the picture, for the desktop and the mobile slot independently.
• A blank eyebrow, headline or button label renders no element at all, rather than an empty one.
• Without show_offer_info, nothing of the offer-details affordance reaches the markup.

Platform Primitives Used

• Liquid section schema and settings — twenty-six settings carry the layout mode, both crops, the copy, the subtext type scale, five colours, two alignments and the offer details.

Where It Runs

On the home page, through the index template, in the editorial band below the featured collections. Checked on the live storefront today: the homepage renders the banner in its inline split mode, with both the desktop and the mobile crop in the markup and the offer-details affordance enabled.

What This Demonstrates

• Brand story and editorial section system — the primary capability: an editorial band with its own art direction, type scale and colour controls, authored entirely from settings.

How We Know

One section file of roughly 490 lines and its stylesheet of roughly 400 lines, read from the theme, plus the homepage template that mounts it. Documented from the code; no client-side record of the decision survives. What the section does — the layout switch, the CSS image swap, the type-scale settings, the offer-details panel — is checkable against the files. Why it was built this way rather than another is our reading of the code, and this page says so where it matters.

Related Builds

• Homepage hero carousel v2 — the same homepage's hero, where per-slide typography solves the same one-value problem.
• Hero slide content renderer — the same storefront's per-breakpoint type controls, written as paired custom properties.
• Marketing image banner with mobile art, typography controls and highlight headings — LUS Brands. The same brief on a different storefront, solved as a fork of Dawn's banner rather than a new section.
• Skin quiz entry-point sections — Three Ships. Separate desktop and mobile artwork in one section, on a premium theme.

The Buy-vs-Build Question

A page builder buys a type-controlled banner in an afternoon and puts the campaign's copy and terms in the vendor's editor. Building it bought a section whose every knob is in the theme editor beside the rest of the homepage, and cost a bespoke component the theme has to carry. Where a section library earns its keep against a builder is set out on the theme section library and design system decision page.

Provenance & Evidence

• Client: Nudestix — nudestix.com
• Surface: Home page
• Templates served: one — index
• Complexity: Medium — roughly 490 lines of section and roughly 400 lines of stylesheet
• Attribution: Deploi-authored. The section and its stylesheet are ours, a new section in a theme built on Dawn 6.0.2; it does not modify Dawn's own image banner.
• Status: Live, verified 2026-09-07
• Evidence: One section file and its stylesheet, plus the homepage template
• Confidence: Moderate — documented from the code; no client-side record of the decision survives
• Primary capability: Brand story and editorial section system

Ready to Publish the Offer and Its Terms in One Edit?

You dream it. We build it. If every campaign banner still goes through a developer for a type change or a line of terms, Contact us today and we'll put those knobs where your marketing team can reach them.