Skin Quiz Entry-Point Sections: Separate Desktop and Mobile Artwork in One Section

A campaign panel that opens the Three Ships skin quiz, built so the desktop and mobile crops are two independently chosen images and the copy above them is four editable blocks.

The skin quiz entry point is a full-bleed art-directed panel, and its desktop and mobile crops are different photographs rather than one responsive image. The section renders the same block set twice — once inside a desktop wrapper, once inside a mobile wrapper, each with its own background picker — so a marketer can re-shoot the campaign in the theme editor without a developer.

Fact Strip

Client: Three Ships
Surface: Landing page
Templates served: 1 — page.quiz
Complexity: Low
Attribution: Deploi-authored section inside a theme that is not ours. The storefront runs Palo Alto 5.8.0 by Presidio Creative, a paid premium theme; this section was written to sit in it.
Status: Live, verified 2026-09-06
Evidence: Moderate

The Problem

The skin quiz is a primary acquisition funnel on this storefront, so its entry point is not a link in a menu. It is a full-bleed panel with campaign copy, an eyebrow line and a call to action over art-directed photography — the kind of thing that gets re-shot every campaign.

Which means the people who change it are marketers, not developers. A campaign panel whose copy or artwork requires a theme edit stops being a campaign panel and becomes a ticket. The entry point had to be editable end to end from the theme editor: the small text above the headline, the headline, the supporting line, the button label and where the button goes.

The Constraint

The panel's artwork is a background, not an image in the flow of the page — copy sits centered on top of it. That rules out the ordinary responsive-image answer, because the desktop and mobile crops here are genuinely different photographs, framed differently for a wide panel and a tall one, not two renditions of one source.

Shopify's image handling addresses the wrong half of that problem. It will serve a smaller version of an image; it will not choose between two images. And a background set in CSS cannot be swapped per breakpoint from a theme setting without either duplicating the rule or moving the decision into JavaScript.

The theme offered nowhere to put this. Palo Alto ships a rich-text section, and the copy structure here is plainly its descendant — but that section has no background image setting at all, let alone one per breakpoint.

What We Built

main-quiz.liquid, a section that renders its block loop twice.

The first pass writes a .desktop wrapper whose background-image comes from the section's bg_image setting. The second writes a .mobile wrapper fed by bg_mob_image. Both loops walk the identical section.blocks list, so the copy is authored once and appears in both crops, and the section's stylesheet decides which wrapper a given viewport shows.

Four block types are supported, each one a separate editor block a marketer can add, remove or reorder: smalltext for the eyebrow line, heading (with a size selector across three scales), text for the supporting rich text, and button for the call to action. The button renders as an anchor carrying cta get_btn alongside the theme's own button and button--primary classes, so the quiz entry point is addressable by a shared selector wherever the section is placed.

Inside each wrapper the blocks sit in a centered rich-text__blocks container — the same container class the theme's own rich-text section uses, so the copy lands over the middle of the artwork and the panel inherits the storefront's type and spacing instead of defining its own.

The section's settings are deliberately few: a color scheme, a full-width toggle, and the two image pickers. Everything else is a block.

Its scope stops at the door. This is the panel that sends someone into the skin quiz — the quiz itself is not theme code on this storefront, which is the opposite arrangement to the LUS Brands quiz, where questions, rules and results all live in the theme and in Shopify data.

Why This Way

Duplicating the markup and letting CSS choose keeps both crops in the initial HTML and keeps the swap out of JavaScript. Nothing has to measure the viewport, and nothing changes after paint.

What that costs is duplication, and the cost is not hypothetical: the same heading and the same body copy exist twice in the document, once per wrapper. That is a real thing to hold — a second copy of the text in the DOM, and two wrappers to keep in agreement whenever the block set changes. We took it because the alternative moves an art-direction decision into a script — one more moving part deciding at runtime what a stylesheet already knows, on a section whose whole reason to exist is that a marketer can change it alone.

Why Not an App

A page-builder app would have covered this, and the storefront could have bought one section instead of writing one.

The reason not to is proportion. This is a single section with two image pickers and four block types, and a page builder is a permanent dependency in the render path of a page in the acquisition funnel — plus a second content model beside the theme's own, for content that is four fields long. The section as written is theme-side markup a merchandiser edits in the same editor as every other section, with nothing new to learn and nothing extra to load.

Implementation Notes

The section loads its own stylesheet, section-main-quiz.css, through stylesheet_tag rather than adding to the theme's global CSS, so the panel's rules stay with the panel.
Editor labels reuse the theme's existing rich-text translation keys (t:sections.rich-text.*) for the color scheme, full-width toggle and block names, so the section reads as native in the editor with no new locale entries.
The two wrappers are distinguished only by a .desktop or .mobile class and their background source. Every other class, block and attribute is identical, including block.shopify_attributes for editor targeting.
The heading block carries a size selector across h0, h1 and h2, so the same section can open a page as a hero or sit mid-page under an existing headline.
Only main-quiz.liquid is referenced by a template. A later, flattened variant of the same idea exists in the theme with plain settings instead of blocks, and nothing mounts it.

Edge Cases

A button block with no link set renders aria-disabled="true" and no href, so an unfinished campaign panel exposes a visibly inert control rather than a link to nowhere.
Empty settings are skipped block by block, so a marketer who fills in the headline and the button but leaves the eyebrow line blank gets a panel with no empty container in its place.
The block loop is a case over the four supported types, so any other block reaching this section — from a stale template, say — renders nothing rather than raw markup.
Every block type is capped at one instance in the schema, so the panel cannot drift into a general rich-text section: one eyebrow, one heading, one paragraph, one button, or fewer.
The section ships no JavaScript. Both wrappers are always in the document and the stylesheet alone decides which shows, so a theme-editor re-render cannot leave the panel half-chosen.

Platform Primitives Used

Liquid section schema and settings — the whole editing surface: two image pickers, two section settings, and four block types with their own settings each.

Where It Runs

One template, page.quiz, where it is the main section — the eyebrow, headline, supporting line and quiz call to action that open the funnel. The section is not template-bound, so the same panel can be placed on the home page or any other landing page from the theme editor.

What This Demonstrates

Guided selling: quizzes, finders and routine builders — the entry point half of guided selling, on a storefront where the quiz engine itself sits outside the theme.
Art-directed hero and banner system — separate desktop and mobile artwork behind one set of merchandiser-authored blocks.

How We Know

The section and the quiz page template were read from the live theme, and the block set, settings and markup on this page are described from that code. Three client-side records touch the quiz funnel on this storefront, but none of them record this decision: no client-side record of why the desktop and mobile crops were split survives, so the reasoning here is documented from the code and stated as such.

Related Builds

Curl Quiz 3.0: a nine-step diagnostic quiz rendered entirely from Shopify metaobjects — the other end of the same decision, where the whole quiz is theme-native and metaobject-driven.
Quiz results: a 34-rule, priority-ordered recommendation engine — what a routine recommendation looks like when the rules are the client's own Shopify data.
PDP shade selector and shade finder — guided selling entered from the product page instead of a dedicated one.

The Buy-vs-Build Question

The interesting question on this storefront is not whether to build the panel — it is whether to build the quiz behind it. Three Ships buys that; LUS Brands builds it. Both are defensible, and the difference shows up in who owns the questions and where the answers can be read. That trade is set out in the product quiz and finder decision.

Ready to Give Your Campaign Team the Keys?

We build sections your marketers can re-shoot and rewrite without a ticket. Contact us today to talk through the panels your campaigns keep waiting on.