A step-by-step, non-destructive plan to rebuild the approved homepage_v3 as real Hyper-native sections on the live theme (190048960834), elevated with our scoped CSS — leaving the existing homepage intact for comparison. Built on the same render-before-build, native-first, pull-live-first discipline we used on the collection page. For your approval before I touch the theme.
Non-destructive — the 9 existing rs- homepage sections are disabled (hidden), never deleted. The new native sections are added alongside, so you toggle/compare in the editor. Cleanup pass later, on your word.
Reversible — a git tag + an index.json backup before any change; re-enabling the old sections is an instant rollback.
Safe to your edits — every file is pulled live first, pushed --only scoped, schema-first, so nothing you've changed in the editor gets clobbered.
Every v3 section maps to a real Hyper section (verified against each section's schema). "Where" = editor you can edit it in the theme editor · code needs CSS/Liquid · both native config + our CSS craft.
| # | v3 section | Hyper native | Key config | Scheme | CSS craft | Where |
|---|---|---|---|---|---|---|
| 1 | Hero | image-with-text-overlay | image + heading + subheading + 2 button blocks; content bottom-left | 18 (cream) | gradient scrim + oversized type | both |
| 2 | Browse by category | collection-list | 4 collection blocks + images; "By category" | 3 / white | — (proven on collection page) | editor |
| 3 | House brands | multicolumn + buttons-with-icon | 4 column blocks (image+name+count) · lines = buttons | warm | sub-brand dots | both |
| 4 | Kitchen, in depth | image-with-feature | main image + heading + 4 image feature-columns (the real product tiles) | white | tile + CTA polish | both |
| 5 | Made for the morning | image-with-text | image-right + text + button blocks | warm | — | editor |
| 6 | Lighting (full-bleed) | image-with-text-overlay | full-bleed image + heading/text/button + content left | 18 (cream) | left scrim, full-bleed height | both |
| 7 | Home & Bath | image-with-text | image-left + text + button | white | — | editor |
| 8 | Cast iron, Sunday | image-with-text-overlay | full-bleed + heading/text/button | 1 (light) | light cream scrim, dark text | both |
| 9 | Inside Jessar (film) | image-with-text → video | still + copy + quote now; swap to embedded film when the cut lands | white | image-bleed + play button | both |
| 10 | In focus this season | collection-cards / multicolumn | 3 image tiles + captions | warm | caption polish | editor |
| 11 | Press | press | logo blocks + quote (quote via heading/rich-text) | white | — | editor |
| 12 | Retail partners | brand-logos | logo blocks (Costco / Staples / Linen Chest) | warm | — | editor |
| 13 | Dual-audience doors | image-cards | 2 image_card blocks + 2 buttons | 18 (cream) | reuses the scrim we already shipped | both |
| 14 | Heritage close | rich-text | centered statement | base | — | editor |
| 15 | Footer (dark) | footer | set footer colour scheme → dark (scheme-inverse) | inverse | — | editor |
Native coverage 15/15 No custom sections required. The CSS craft is the same toolkit already live on the collection page + dealer card (schemes, gradient scrims, the eyebrow system).
git tag pre-homepage-v3 + back up the live templates/index.json to a revert file. This is the rollback anchor.index.json, settings_data.json, rs-soft-modern.css, layout/theme.liquid) so I'm editing the current truth, not stale git.shop_images, prefixed rs-home-*) via the Admin API, so every image is swappable by you/Michael in the editor later — not hard-baked. Hero · 4 category · 4 brand · kitchen + 4 product tiles · morning · lighting · home · cast-iron · warehouse · seasonal ×3 · door.scheme-18 (the warm-dark overlay scheme we already shipped) covers hero / lighting / doors; scheme-1 covers the light cast-iron overlay; scheme-inverse covers the dark footer. All already live.rs-home.css (loaded only on the index template) holding the craft: hero gradient scrim + type scale, sub-brand dots, kitchen product-tile row, the full-bleed overlay scrims (cream + light variants), the film image-bleed + play button. Scoped to the homepage sections so no other page is affected. Register it via a conditional include in theme.liquid.--only assets/rs-home.css layout/theme.liquid --allow-live. Nothing references it yet, so it's inert until the sections exist — zero visible risk.index.json off the pulled-live copy: (a) set the 9 rs- sections to "disabled": true; (b) add the 14 new native sections with their settings — image refs (shopify://shop_images/…), copy, schemes, buttons, blocks — in the v3 order; (c) leave the order array so old (disabled) + new (enabled) coexist.index.json --only templates/index.json --allow-live --nodelete, immediately after a fresh pull (to avoid racing your editor).scheme-inverse (footer lives in the footer group / settings) and push that file only.Why this order: CSS is inert until sections use it; the index.json is the single visible switch; each push is one scoped file, pulled-live-first. If anything looks off, re-enabling the rs- sections + disabling the new ones restores the current homepage instantly.
#f8f5f0, coral buttons #c87a5e, hairlines #e8e2d6, sub-brand dots).rs- sections are hidden (not rendering) but still present.image-with-text-overlay (gives the two CTAs + full overlay control as one statement). The alternative is slideshow — only if you want it to rotate through multiple hero images later. My pick: image-with-text-overlay.image-with-feature (it natively supports the lifestyle image + the 4 real product tiles as image-columns). If the body copy/CTA placement feels tight there, fallback is image-with-text + a small multicolumn for the tiles. My pick: image-with-feature, fallback ready.| Phase | What | Result you see |
|---|---|---|
| 1 · Foundation | Tag + backup · upload images to Files · push rs-home.css | nothing changes yet (inert) |
| 2 · The easy wins | collection-list · 3× image-with-text · multicolumn+buttons · brand-logos · rich-text · seasonal | most of the page, live in the editor |
| 3 · The craft sections | hero overlay+scrim · lighting + cast-iron full-bleeds · kitchen feature tiles · film · doors | the signature moments |
| 4 · Finish | footer → dark · full validation · mobile pass | complete homepage, old one hidden behind it |
I'll check in at the end of Phase 2 and Phase 3 with editor screenshots so you're never surprised — and the old homepage is one toggle away the entire time.
Sign off on the plan (and the two decisions in §E), confirm the link targets, and I'll start at Phase 1. Nothing touches the live homepage's visible state until the index.json push in Phase 2 — and that's fully reversible.