Direction A
Home — Editorial (A)
The bolder editorial home: oversized Source Serif hero, food-forward category rail, SmartCarb dual-panel, subscribe-and-save band, founder nameplate, real-review trust band.
WiO SmartFoods · Storefront Rebuild
Rebuild Gallery & Roadmap
Live snapshots of the Direction A storefront redesign (the direction Joel picked on 2026-06-28), plus a running roadmap of what's done vs. what's left. Nothing here is functional: no carts, no checkout, no analytics. Just the design and the state of the build.
1Direction A redesign — storefront pages
The current design direction (Joel picked the bolder editorial track on 2026-06-28), refined through the Stage 1–3B gallery passes. Thumbnails are the live post-Stage-3B gallery state. These are mockups on PPC infra, not yet rolled to the Shopify staging theme.
Direction A
Home — Refined (B)
The quieter, more centered variant of the editorial home. Same content and compliance, calmer rhythm. Pick A or B.
Direction A
Category / Collection
Snacks & desserts: editorial hero, filter chips, real-catalog product grid (aspirational tiles now remapped to live SKUs with real photos), category proof, related aisles.
Direction A
PDP — Food
The editorial food PDP: gallery, buy box with 5 Apostle cadences, Nutrition-vs-Digestive dual panel, science steps, cross-sell, guarantee.
Direction A
PDP — Shake
Protein shake PDP with the real poured-shake photography, macro badges, subscribe stack, and reviews rendered as proper components.
Direction A
PDP — Supplement
Trio Trim capsule PDP: supplement-facts panel with FDA disclaimer, benefit cards, reviews, guarantee.
Direction A
PDP — Minimal
Stripped single-SKU PDP (Shaker Bottle): buy box, trust, cross-sell, no science table.
Direction A
Science page
Mechanism reveal, Nutrition-vs-Digestive dual panel, two-ways-to-start closer, PB study tease, FAQ, citations.
Direction A
Peanut Butter Study
Independent trial write-up: protocol, results bar chart, product bridge, FAQ, references.
Direction A
Reviews
The all-reviews page: aggregate header on the locked figures, filterable grid of real Stamped reviews (verbatim, verified buyers), guarantee band, shared footer.
2Subscriber area
The recovered, canon-aligned subscriber set (de-Poppins'd, rust footer): the manage-subscription portal plus the login CTA, login page, and one-click add-to-existing flow. Themed Apostle Classic Portal.
Direction A
Subscription portal
Manage-subscription portal: edit items, swap, skip, the spend-tier ladder, and one-click add-to-next-delivery.
Direction A
Login CTA
The subscriber-area entry: where an existing subscriber logs back in to manage their plan.
Direction A
Direction A
One-click add-to-sub
The one-click add-to-existing-subscription control in its three states (logged out / subscriber / added).
3Cart, drawer & Build-A-Box
The three P0 checkout surfaces in Direction A (Phase 2, then the Stage-3 money-math pass): each shows one internally-coherent basket priced from the real Shopify catalog, with the spend-tier ladder and Subscribe & Save. No shipping promise.
Direction A
Cart page
Full cart: spend-tier ladder, per-line Subscribe & Save, honest order math, guarantee band.
Direction A
Cart drawer
Slide-in cart drawer: added-item confirm, spend-tier bar, subscriber add-to-next-delivery state.
Direction A
Build-A-Box
Build-your-box aisle grid: running box total, live tier meter, flat-10% Subscribe & Save handoff.
4Footer & references
The footer decision and the supporting comparison / asset-picking pages.
Reference
Footer comparison
The two canonical footer options. Joel picked Design 2 (cream subscribe tier over a compact rust link band), now live on all 15 chrome pages of the gallery.
Category images
Review images
Category hero & thumbnail picks
Generated hero collages and square thumbnails for each category (options A / B / C) against the current live tile. Pick one per category to wire into the collection template. Food photography options: food image review.
5Storefront rebuild roadmap
Reconstructed from the vault progress doc. Rendered from the WIO_ROADMAP array below — update that array to change this section.
How to read this
- Done = shipped and QA-clean. Progress = actively being worked, partial or pending a follow-up. Verify = built but needs a fresh check before it can be called done. Todo = not started. Planned = scoped but not started, dependent on an upstream decision.
- The card grids above show the Direction A redesign gallery (mockups on PPC infra). The roadmap tracks the wider staging theme (147928416406) build. Live wiodiet.com is untouched until Joel duplicates staging and publishes the duplicate manually.
- The Direction A redesign is the current design direction (Joel picked it 2026-06-28). These are mockups; a template rollout to the staging theme follows after Joel approves the full set. Five rollout decisions were resolved 2026-07-07 (vault doc 17).