SOLE · Homepage Hero System

One Creative. Any Message. Overlaid in Code.

High-fidelity working demo · BITCADET · SOLE design tokens + the live hero CSS · backdrops = Markos's WIP Phase-1 creatives · copy by a copy panel + UX panel

Interactive — pick a product below

Markos's hero creatives are deliberately message-agnostic: a premium product shot with a built-in dark negative-space zone and no baked-in text. This page proves the other half of the system — the programmatic overlay. Each of the four products (C80, F85, F80, E25) gets a Non-Promo and a Promo version — headlines written by a copy panel and fitted to brand by a UX panel, then rendered from a data object onto the same photo in SOLE's real tokens (Barlow Condensed, red #b21e2d, the production scrim). Promo slides run the SOLE Sale Event as a dated window (the live countdown only switches on in the final 72 hours). Copy here is v2 — revised through an adversarial copy/UX critique and a skeptic adjudication panel. Change the data → change the message. No re-shoot.

The desktop and phone frames are faithful replicas of sole-2026/sections/hero.liquid — same left-band / bottom-band scrims, same pill buttons, same type scale — scaled with container-query units so what you see is what ships.
Interactive preview

Pick a product

Select a product to see all of Markos's style options for it (Style 1, 2, 3) — desktop + phone. Toggle the overlay between the evergreen version and a sample promo treatment (illustrative dates — the real ones come from the promotion metaobject). Click any preview to enlarge it.

Paid social & PMax

Ad canvases for this product

The same message-agnostic system, recomposed for paid placements. Meta 1:1 and 4:5 double as PMax Square 1200×1200 and Vertical 960×1200 — identical aspect ratios, so one canvas serves both channels. Meta 9:16 and PMax Horizontal 1200×628 we derive ourselves from the heroes above. Production canvases carry no baked text; the demo frames show the type treatment we match programmatically. Click any canvas to enlarge.

How it's driven

The content schema → the theme

In production each overlay is one content object. The creative (photo, focal point, safe-zone, scrim strength) comes from the planned hero_creative metaobject; the message comes from per-slide block settings. Same split you see in this demo.

Overlay content object
{
  "kind": "product",            // product | promo
  "eyebrow": "The Flagship",
  "heading": "Hotel-Gym Power, Now At Home",
  "headingMobile": "Hotel Power, At Home",  // ≤5 words
  "sub": "Our flagship treadmill — commercial-grade, yours to own.",
  "subMobile": "The flagship, yours to own.", // ≤1 line
  "badges": ["Lifetime Frame & Motor",
             "No Monthly Subscription",
             "Commercial-Grade Build"],
  "ctas": [{ "label":"Explore the F85", "style":"primary" },
           { "label":"Why Commercial-Grade", "style":"outline" }],
  "countdownTo": null            // promo → July 19 deadline
}
Maps to (theme)
hero_creative (metaobject)
├─ desktop_image / mobile_image
├─ focal_x / focal_y      → object-position
├─ safe_zone              left | bottom
└─ scrim_strength         light|med|heavy

slide block (section settings)
├─ heading / subheading
├─ badge1..3 / show_badges
├─ cta1 / cta2  (text)
└─ is_promo_slide         → promotion SSOT
Promo treatments reuse the existing promotion metaobject (the weekly-promo single-source-of-truth that already drives the announcement bar) — a slide flagged is_promo_slide pulls its headline, countdown deadline and CTA from there. Nothing new to wire per promo.
Image Provenance

What each creative is actually made of

Every hero on this page is tagged with how its imagery was produced. AI is fine where we have strong source files to work from — this section makes it explicit which is which, so nothing gets shipped on an assumption.

Studio — 19 of 66 Studio + AI — 31 of 66 AI Generated — 16 of 66
TagMeaning
Studio Real studio photography, cropped to the hero ratio. No generative edit.
Studio + AI A real photograph is the base. AI extended the canvas to build the copy-safe zone, or edited a detail inside the frame. The product itself is photographed.
AI Generated Generated, with no source photograph referenced in the layer name. The product shown has not been verified against a real unit.
ModelS1 deskS1 mobS2 deskS2 mobS3 deskS3 mob
C80StudioStudioStudio + AIStudio + AIAI GeneratedAI Generated*
F85StudioStudioStudioStudioStudioStudio
F80StudioStudioStudio + AIStudio + AIStudio + AIStudio + AI
E25StudioStudioStudioStudio + AIStudio + AIStudio
F89AI GeneratedAI Generated*AI GeneratedStudioAI GeneratedStudio
E98AI GeneratedStudioAI GeneratedStudioAI GeneratedAI Generated*
LCRAI GeneratedAI Generated*AI Generated*AI GeneratedAI Generated*Studio + AI*
F83 newStudio + AIStudio + AI*Studio + AIStudio + AIStudio + AIStudio + AI*
F63 newStudio + AIStudio + AI*Studio + AIStudioStudio + AIStudio + AI*
F65 newStudio + AIStudio + AI*AI Generated*Studio + AIStudio + AIStudio + AI
E20 newStudio + AIStudio + AI*Studio + AI*Studio + AIStudio + AI*Studio + AI*

* the frame stacks more than one image layer, so which one renders can’t be read from the file metadata — treat the tag as provisional and confirm with the designer.

Where the risk sits. F89, E98 and LCR carry most of the AI Generated frames, and no production sample of any of them has been photographed — F89’s sample was due end of Aug 2026, E98 is pre-production, the LCR shoot is TBD. Verify those against real hardware before they go live. The four August additions (F83, F63, F65, E20) are all built on real source photography.
Provenance is read from the Figma layer names on SOLE HOMEPAGE - HERO IMAGE, cross-checked against the 2026 marketing-asset tracker. Where a layer records the generation prompt, it is quoted under the creative. C80 Style 2 is tagged from the designer’s own confirmation that it is a real photo expanded to 21:9.
Variant

Free Shipping Week

Pick any product above and switch the toggle to Free Shipping Week. Every hero re-dresses into the FSW treatment — accent eyebrow, product headline, the shipping value as a red badge, three vetted spec lines, a live countdown, and the expiry stated in words.

Mon Aug 24 – Sun Aug 30, 2026 — Offer Ends Sunday 08/30 · 11:59 PM MT. The window is derived from the marketing calendar’s established cadence (a one-week OFF SALE FREE SHIPPING block follows each sale; Beat the Heat ends Sun Aug 23). It is not yet confirmed — check with Mike before this ships.

ModelShipping valueLive stockLead spec
F89$99.99in stock4.0 HP motor · 375 lb capacity
F85$99.99out of stock3.5 HP motor · 350 lb capacity
F83$99.99in stock3.5 HP motor · 350 lb capacity
F80$99.99out of stock3.25 HP motor · 350 lb capacity
F65$99.99out of stock3.25 HP motor · 350 lb capacity
F63$49.99in stock3.0 HP motor · 325 lb capacity
C80no SHIP tag on the live productin stockSelf-powered curved deck
E98$99.99in stock20" stride · 400 lb capacity
E25no SHIP tag on the live productin stock20" stride · 350 lb capacity
E20$49.99in stock18" stride · 300 lb capacity
LCR$49.99in stock40 magnetic resistance levels · 31 lb flywheel
Where the copy comes from. Structure and rules follow the vetted SOLE Free Shipping Week – Designer Brief – July 2026: free-shipping framing only, no product prices, no discounts, no strikethroughs, no “Save $” badges — the red badge shows the shipping value that’s now free, never a product price. “HP” never “CHP”; “heavy-duty frame” never “commercial-grade”; LCR is a recumbent bike, never a rower; no competitor or comparison blocks. Specs are pulled from the canonical catalog data store (all high-confidence), and shipping values plus stock status were read from the live storefront on Aug 17 2026.
Three things to resolve before launch. 1. “One week only” is false urgency on F89, E98 and LCR. Free shipping on those three is already running continuously — their live PDPs say so today — so a one-week window plus a ticking clock is a deceptive-urgency exposure. Either drop them from the rotation or drop the temporal framing. (C80 and E25 carry no SHIP tag, but their live curbside rates are $99.99 and $49.99 and both ribbons now state them.) 2. F85, F80 and F65 are out of stock on the live storefront right now — they should probably not hero a promo. 3. LCR ships $49.99 per the live tag, but the July 2026 FSW brief ran it at $99.99 after a QA correction. The live store is the tiebreaker here, so $49.99 is what’s shown — worth confirming which is right.
Guardrails

The rules every overlay respects

Copy budgetDesktopMobile
H1≤ 6 words / 2 lines≤ 5 words / 2 lines
Subhead≤ 2 lines≤ 1 line
Badges≤ 3wrap / optional
CTAs≤ 21 primary
ContractValue
Copy-zone luminance≤ 0.175 (white text reads unaided)
Overlay copy colorWhite only
Red #b21e2dAccent / fills only — never a flat field
Safe zoneDesktop = left band · Mobile = bottom band
About this copy (v2). Written by a copy panel, fitted by a UX panel, then revised through an adversarial critique + a 3-lens skeptic adjudication. Applied: frame-only warranty wording, E25 health-claim reframes (design, not outcome), de-duplication, benefit-led promo subs, product-routed CTAs, and a dated promo window (no live countdown until the final 72h). Specs stay on the PDP. Still needs client/data sign-off (flagged, not shipped as hard claims): the actual offer amount for the next promo (unblocks a real countdown/number); the basis of "10,000+ Verified SOLE Reviews" (brand-wide, and it needs its ResellerRatings attribution restored); the 2026 motor-warranty term (the catalog store says 3 years, the live PDPs say Lifetime); and E25's joint/"Easy On Joints" phrasing for legal. “Commercial-grade” has been removed throughout — it is on the prohibited word list. Creatives are Markos's work-in-progress.