Preserves the design-reference draft-theme PDP composition end-to-end — extends product-template + product-hux + cstm-product-form-hux (dropdown size selector, segmented firmness, sleep-bundle toggle, ATC, Tabby+Tamara, delivery), corrects the live #3A4F3C resting-ATC regression to #537156, hoists rating + trust-triple above the price, wires sections/mattress-comparison.liquid as 3 NHC tier cards (Essentia / Select / Reserve, no competitors), and extends product-sticky-atc with the verified DreamCloud split mobile (top-strip + bottom-footer with size-sheet) + desktop top-bar + in-page-nav compositions.
Continuity posture
REMOVE is forbidden for any section touching a protected file unless strictness=loose AND a matching override exists. Strictness is strict with zero overrides — so this wireframe carries zero REMOVE dispositions.
Protected files list (17)
Warnings (10)
- BRAND COLOR CORRECTION (audit-prio): theme.json confirms live ATC ships
#3A4F3Cas resting background — this is the hover/active dark green. brief mandates#537156at rest. Every section's primary CTA slot constraints require#537156resting /#3A4F3Conly on :hover/:active. Reviewer must verify this is corrected, not propagated. - audit-08 — Made-in-UAE override: marketing audit recommends 'Made in UAE / SpringTech Sharjah'. brief forbids this for NHC. trust-strip + faq + every alt-text slot suppresses Made-in claims.
- audit-02 — organic-claim override: live cert ribbon ships GOTS+RWS. brief forbids organic/GOTS/GOLS/RWS framing for NHC. trust-strip + certifications sections lock to NHC-approved order (CertiPUR, B Corp, Land to Market, FernMark, OEKO-TEX) and REPLACE live GOTS/RWS logos.
- Claim discipline — trial nights: brief.claims[10] flags 100-night trial as UNVERIFIED. sleep-trial-and-warranty's trial-block slot is conditionally rendered (gated on huxberry.trial_nights). If unset, OMIT — no placeholder copy.
- Claim discipline — warranty years: brief.claims[9] flags 10-year warranty as PARTIAL. warranty slots gate on metafield and avoid 'lifetime' / 'forever' language.
- Reviews discipline: brief.include_review_schema=false. NO AggregateRating / Review JSON-LD until include_review_schema=true AND real review data is installed (pdp.md §6 hard-stop).
- FAQ minimum: faq-accordion slot requires ≥5 entries to drive FAQPage JSON-LD with confidence. Reviewer should flag if copy-writer ships <3.
- Comparison hard rule: comparison-table's three tier-card slots are INDIVIDUALLY ENUMERATED (essentia/select/reserve). Any additional block (Hypnos / Avocado / Naturalmat / Simba / DreamCloud / Vi-Spring) violates brief.comparison_section_policy.cross_brand_competitor_cards_allowed=false.
- Sticky-ATC cross-viewport binding: mobile sheet, desktop dropdown, AND inline form share variant state. Prototype-builder must verify picking a size in any region updates the others.
- Single-value variant suppression (audit-04): hero buy-box-form slot requires suppressing any variant option whose values.size == 1. CHANGES.md fix exists in theme-local but must be live before launch.
Sections (12, top-to-bottom)
Hero (ATF gallery + buy-box composite)
EXTENDPurpose: Above-the-fold composite that anchors the PDP: 55/45 gallery+buybox split at desktop, single-column at mobile. Surfaces product identity, rating, trust badges, size + firmness, price, primary ATC, and the delivery promise within the first viewport on both 375 and 1440.
Sequence rationale: Position 1: the ATF is the page. Matches design-reference template. Buy-box composition order is locked from brief.buybox_pattern; what changes is what fills the right column (trust-triple + rating line surfaced ATF instead of below the fold).
Slots (7)
| id | kind | purpose | data_source | metafield | constraints |
|---|---|---|---|---|---|
| breadcrumbs | microcopy | Collection lineage path; supports breadcrumb JSON-LD. | product | — | — |
| product-title | headline | Single H1 carrying product name. Primary keyword 'natural mattress' may appear naturally. No 'organic', no Made-in, no forbidden verbs. | product | — | H1; 26 px serif at mobile / 32 px at desktop; one per page; ≤60 chars. |
| rating-line | rating | Star rating + review count immediately under title (DreamCloud canonical_emphasis). Hide cleanly when count==0 — never fabricate. | metafield | rating_value | Star glyphs 14 px line height; format '<value> · <count> reviews'. |
| atf-trust-badges | trust-strip | Three-badge trust triple under title (Made-to-order ships-in-5 / Warranty / Returns). Trial-night pill gated on metafield; do not invent. | authored | — | 3 icon+label chips, horizontal row both viewports; ≥44×44; icons monochrome on #fff9f5. |
| buy-box-form | form | Mirrors brief.buybox_pattern composition verbatim: size → firmness → sleep-bundle → ATC → installments → delivery. PRESERVE-AS-IS. Suppress single-value variant options (audit-04). | product | — | Locked order. 12-size Gulf dropdown w/ compare-at + current price per row. NOT chips. Firmness sub-labels REQUIRED. ATC bg #537156 resting / #3A4F3C only on :hover/:active. Radius 0. ≥16 px label. |
| price-block | price | Variant price w/ compare-at strikethrough + current price. Preserves CHANGES.md fix #1 (no 'asdsad' placeholder). | product | — | 'Dhs.' prefix. Strikethrough #8a898d. Current #537156. No debug tokens. |
| delivery-promise | microcopy | Truck icon + 'Made to Order · Ships in 5 working days'. Centered. | authored | — | Single line. No 'fast' / 'express' superlatives. No Made-in claim. |
Single column. Order: breadcrumbs, gallery (full-width 1:1), title, rating-line, atf-trust-badges (3 chips, wrap if needed), price-block (above buy-box per design-reference), buy-box-form (locked composition), delivery-promise. Gallery ~375×375. Full-width green ATC is focal CTA in 2nd viewport scroll. All tap targets ≥44×44.
55/45 split — product-gallery-media-hux left (~770 px w/ vertical thumb rail), buy-box right (~570 px). Stack: breadcrumbs, title, rating-line, atf-trust-badges, price-block, buy-box-form, delivery-promise. Section height matches gallery column (closes audit-03 dead-zone).
Notes: Inline buy-box form is the show/hide trigger for sticky-add-to-cart via IntersectionObserver. Color discipline is the load-bearing correction here.
Sticky add-to-cart (mobile split + desktop top bar + in-page nav)
EXTENDPurpose: Persistent purchase path on scroll. Two distinct compositions per brief.sticky_atc_pattern. Mobile = split top-strip + bottom-footer (size-trigger opens bottom-sheet). Desktop = single fixed top bar + paired in-page nav. Both appear/disappear together via IntersectionObserver. Cross-viewport state binding non-negotiable.
Sequence rationale: Position 2 in section list because both compositions overlay the page; sections/product-template.liquid renders product-sticky-atc at section-end; desktop top-bar is a new adjacent snippet (snippets/product-sticky-atc-top.liquid) per brief — existing protected snippet EXTENDED, not replaced.
Slots (4)
| id | kind | purpose | data_source | metafield | constraints |
|---|---|---|---|---|---|
| mobile-top-strip | trust-strip | Fixed-top slim strip (mobile only). L→R: stars · count · title (truncates). NO size, NO price, NO ATC here. | metafield | rating_count | Height ~44 px; bg #fff w/ 1 px border. Hidden when inline ATC visible. Hidden at desktop. 14 px Montserrat. |
| mobile-bottom-footer | form | Fixed-bottom (mobile only). L→R: size-trigger chip (label + chevron + current price, NO compare-at) + ATC right. Size-trigger opens bottom-sheet (tile_grid of 12 sizes, dimmed bg, footer remains visible). ATC submits same product form (no size-picker-first). | product | — | Height ~68 px (≥44 px tap). Chip ~55%, ATC ~45%. ATC #537156 resting. Sheet 4-col tile grid at 375 px. Hidden at ≥990 px. |
| desktop-top-bar | form | Fixed-top bar (desktop only). L→R: stars · count · title · size dropdown (with current price) · price block · ATC. NO product thumbnail, NO compare-at in bar. Slides down when inline buybox scrolls out of view. | product | — | Height ~64 px below site nav. Hidden <990 px. ATC #537156. Dropdown shares variant state w/ inline form. |
| desktop-in-page-nav | list | Secondary fixed row under desktop-top-bar. Links: Overview · Reviews · FAQ · Layers & Materials · Product Specs. Active link underlined. Click scrolls w/ sticky-offset. | authored | — | Height ~44 px. Montserrat 14 px. Active underline #54412f (warm brown — NOT #537156, reserved for CTA). |
Fixed top strip (~44 px) + fixed bottom footer (~68 px). Both show/hide together. Bottom sheet slides up; dimmed backdrop; tap-outside-to-close. Desktop bar + nav HIDDEN.
Fixed top bar (~64 px) + fixed in-page nav row (~44 px) as one composite. Slides down on scroll past inline buybox. Mobile strip + footer HIDDEN.
Notes: Verified against research/inspiration-captures/dreamcloud-sticky-atc-2026-05-11/. Cross-viewport state binding is non-negotiable.
Product gallery
EXTENDPurpose: Primary product imagery w/ vertical thumb rail (desktop) / swipeable carousel (mobile). Cross-section layer shot + Velura quilt close-up are load-bearing material-proof images.
Sequence rationale: Logically nested in hero ATF; conceptually distinct (required by page-type).
Slots (5)
| id | kind | purpose | data_source | constraints |
|---|---|---|---|---|
| main-image | image | Primary 1:1 product hero. First in sequence; alt-text descriptive. | product | 1:1, ≥1200 px sq source. Alt-text MUST avoid 'organic' and Made-in-UAE phrasing. |
| lifestyle-shot | image | Bedroom context (neutral palette, soft daylight, no model required). | product | 1:1 mobile, may be 4:3 in carousel. Neutral palette echoing #efefe5 / #fff9f5. |
| cross-section-diagram | image | Labeled cross-section: Individually Pocketed Spring Core, Reinforced Edge Zone, Airelle Natural Wool Comfort Layer, Velura knit cover. | product | Labels use ONLY verified claim allowed_copy. NO organic / GOTS / RWS / Made-in. Labels in IveMode ≥14 px. |
| material-detail | image | Macro of Velura knit cover (TENCEL™ and cashmere infused) OR Reinforced Edge Zone. | product | 1:1 tight crop. |
| feature-strip-icons | list | Icon-with-text grid below main image. Up to 4 short benefit tiles. Material-forward, no superlatives. | authored | Icon + 1-line label + optional short description. Bg #efefe5, fg #191919. Label ≤4 words. No 'Discover', 'Experience'. |
Single-column carousel w/ native swipe (no overlay intercepting). Thumb dots below. Feature strip = 1-col stack of icon tiles below carousel.
Vertical thumb rail (~100 px) on far left, main image (~670 px sq) to its right. Feature strip = 2-col grid under main.
Buy-box (right column)
EXTENDPurpose: Variant selection, price, ATC, financing, trust. Mirrors brief.buybox_pattern composition exactly: size → firmness → sleep-bundle → ATC → installments → delivery. Plus buybox-enhancements density layer (rating, award/tagline, condensed cert row, trust pill strip) — closes audit-03 dead-zone gap.
Sequence rationale: Physically nested in hero ATF composite. Logical section for slot accountability.
Slots (7)
| id | kind | purpose | data_source | metafield | constraints |
|---|---|---|---|---|---|
| size-selector | form | Block 1. DROPDOWN of all 12 Gulf sizes. Each row: size · compare-at (strikethrough, muted) · current price (#537156). Header 'Select Size' + right 'Size guide' link. | product | — | Native or styled <select>. NOT chips. 12-entry catalog per brief. Current row left-edge accent #537156. 'Dhs.' currency. |
| firmness-selector | form | Block 2. Segmented two-card toggle. 'Firm — Back & combo sleepers' / 'Extra Firm — Stomach sleepers & heavier bodies'. Sub-labels REQUIRED. | product | — | Header 'Choose Your Firmness' + 'What feel is right?' helper. Sub-labels visible at 14 px even at 375 px width. |
| sleep-bundle-toggle | form | Block 3. Toggle + 'Add Sleep Bundle' + compare-at + bundle price. OFF: 3 tiles greyed. ON: tiles full opacity. Uses product-sleep-bundle-nish (atomic /cart/add.js POST). | product | — | Cross-sells: Organic Cotton Bedding Bundle + ActivChill Protector + Organic Latex Pillow. Separate Organic Collection SKUs — NOT NHC organic-claim violation. |
| primary-atc | cta | Block 4. Full-width primary CTA. Label 'Add to cart' (copy-writer decides). | authored | — | Full-width; radius 0; bg #537156 at REST (NOT #3A4F3C); fg #fff; 14 px / lh 1.5 / ls 0.03 em; pad 16 px v. Tap ≥44×44. |
| installment-rows | list | Block 5. Row 1: Tabby (green chip) + '4 payments of Dhs. X' + 'Learn more'. Row 2: Tamara (gradient chip) + '3 payments of Dhs. X' + 'Learn more'. | product | — | Provider chip pills retain official brand colors. Body type Montserrat 14 px. |
| delivery-line | microcopy | Block 6. Truck icon + 'Made to Order · Ships in 5 working days'. Centered. | authored | — | Single line. No superlatives. No Made-in. |
| buybox-enhancements | trust-strip | Density layer: rating readout, award/tagline, condensed cert row, 5-row trust pills (delivery/trial/warranty/returns/finance). Gated metafields. | metafield | show_certs | Rating hides when count==0. Trial gated on trial_nights (unverified — hide if unset). Warranty gated on warranty_years (partial). Cert order per brief: CertiPUR, B Corp, Land to Market, FernMark, OEKO-TEX. |
Single column under gallery. All blocks 1-6 + enhancements stack vertically full-width. Size dropdown touch-friendly (≥44 px). Firmness cards stack 1-up at very narrow widths if sub-labels can't fit.
~570 px wide right column adjacent to gallery. All blocks full-width within column. Composition order locked.
Notes: Single most-protected section in the run: 8 snippets touched. Every change is size/font/color only per brief.buybox_pattern.permitted_changes. Composition order is load-bearing.
Standalone trust stack (under gallery)
EXTENDPurpose: Cert logo row + delivery/trial/warranty promise pills under the gallery image (NOT inside buy-box). Keeps right column tight while making certs visible.
Slots (3)
| id | kind | purpose | data_source | metafield | constraints |
|---|---|---|---|---|---|
| cert-logo-row | trust-strip | Horizontal cert logo row in NHC-approved order. | authored | — | Order: CertiPUR, B Corp, Land to Market, FernMark, OEKO-TEX Standard 100. NO RWS, NO GOTS, NO GOLS. REPLACE live GOTS/RWS logos. ≤80 px each. |
| delivery-pill | microcopy | 'Made to order · Ships in 5 working days'. | authored | — | — |
| warranty-pill | microcopy | '<N>-year warranty' — sourced from metafield. Hide if unset (status:partial). | metafield | warranty_years | — |
Cert row scrollable horizontally if needed (only allowed horizontal scroll on the page); pills stack below.
Cert row + pills inline below gallery image, contained to gallery column width.
Notes: Live PDP cert ribbon ships GOTS+RWS — audit-02 flags as critical organic-claim violation for NHC. This slot constraint REPLACES the live set with NHC-approved.
Materials & construction breakdown
EXTENDPurpose: Layer-by-layer storytelling. Verified material/build claims: Individually Pocketed Spring Core, Reinforced Edge Zone, Airelle Natural Wool Comfort Layer, Cushioning Comfort Layer, Velura knit cover — TENCEL™ and cashmere infused. Earns the price.
Sequence rationale: Position 6: matches design-reference template order. Pre-empts the comparison section by establishing what 'Select' uniquely offers.
Slots (2)
| id | kind | purpose | data_source | constraints |
|---|---|---|---|---|
| section-heading | headline | H2 introducing the construction stack. Materials-forward, no superlatives. | authored | 32 px IveMode desktop, 26 px mobile. ≤8 words. No forbidden verbs. |
| layer-cards | list | 4 cards/slides. Each: image + headline + 1-2 sentence body. ONLY verified claim allowed_copy. | authored | Exactly 4 cards at MVP. Image 4:3 or 1:1. NO 'organic', GOTS/GOLS/RWS, 'pure NZ wool' / '100% NZ wool', Made-in. NO invented proprietary tech names. |
1-up swipeable carousel. Each card full-width. Body ≥14 px. Carousel dots below.
2-column grid or 4-up carousel. Container max 1400 px.
Natural Harmony range comparison (Essentia / Select / Reserve)
EXTENDPurpose: Intra-range comparison — EXACTLY 3 NHC tier cards (Essentia, Select highlighted, Reserve). NO external competitor cards (Avocado/Naturalmat/Simba/DreamCloud/Vi-Spring forbidden).
Sequence rationale: Position 7: between materials-breakdown and FAQ. Matches inspiration's canonical sequence (materials → comparison → trial/warranty).
Slots (4)
| id | kind | purpose | data_source | constraints |
|---|---|---|---|---|
| section-heading | headline | H2 framing the range choice. Calm, evidence-led. | authored | ≤10 words. No 'best', 'ultimate', 'perfect'. |
| tier-card-essentia | table | Card 1: Essentia (Essential, 27 cm, AED 3,501). Image + name + height + build-type + from-price + 5 spec rows + CTA. NOT highlighted. | product | Product link: natural-harmony-essentia-mattress. Spec values from wiki. Build-type 'Regular never-turn'. Subtle border. |
| tier-card-select | table | Card 2: Select (Premier, 30 cm, AED 3,921) — CURRENT. 'You're viewing' badge + thicker border (#537156). | product | Product link: natural-harmony-select-mattress. 1.5 px #537156 accent border + ribbon/badge. Build-type 'Regular never-turn'. |
| tier-card-reserve | table | Card 3: Reserve (Signature, 35 cm, AED 5,337). Build 'Euro-top, dual-spring (micropocket + main spring core)'. | product | Product link: natural-harmony-reserve-mattress. CTA accent #54412f canonical brown (Signature-Collection convention). |
1-up swipeable carousel. Select default visible. Dots indicator. Card-per-row — NO horizontal table overflow.
3-column grid, all 5 spec rows visible per card.
Notes: Section is fully implemented but not yet wired into templates/product.nish-natural-wool.json's order array. Phase 4 + Phase 5 must verify the order array has EXACTLY 3 mattress blocks — Hypnos drafts and external competitor blocks are forbidden.
Certifications detail band
EXTENDPurpose: Each NHC-approved cert gets a logo + 1-line explanation. Builds buyer confidence.
Sequence rationale: Position 8: under comparison. Third proof layer after construction and range positioning.
Slots (2)
| id | kind | purpose | data_source | constraints |
|---|---|---|---|---|
| section-heading | headline | H2 introducing certifications. Plain. | authored | ≤7 words. |
| cert-detail-list | list | 5 cert items: CertiPUR, B Corp (Airelle), Land to Market (Airelle), FernMark (Airelle), OEKO-TEX Standard 100. Each: logo + name + 1-sentence explanation. | authored | Order locked. NO GOTS, GOLS, RWS. Supplier-level certs attributed ('Wisewool — B Corp...'). |
1-column stack, each cert one row (logo + label + explanation).
5-column grid or 2-column responsive; explanation ≥14 px.
Trial & warranty
EXTENDPurpose: Risk-inversion section. Trial nights (gated). Warranty years (gated). Adopt DreamCloud 'Test it, trust it, keep it' framing in tone; no superlatives.
Sequence rationale: Position 9: classically sits just before reviews — primes trust in social proof.
Slots (4)
| id | kind | purpose | data_source | metafield | constraints |
|---|---|---|---|---|---|
| section-heading | headline | H2 framing risk-reversal. Calm, plain. | authored | — | ≤8 words. |
| trial-block | body | Trial block. RENDERS ONLY if trial_nights set AND brand verified. Currently UNVERIFIED per brief.claims[10]. | metafield | trial_nights | Conditional render. If absent, section degrades to warranty-only. |
| warranty-block | body | Warranty block. Status:partial per brief.claims[9]. Plain '<N>-year warranty'. | metafield | warranty_years | Render only if set. No 'Forever Warranty' equivalent. |
| supporting-image | image | Optional bedroom/unboxing context. Conveys risk-free framing without language. | product | — | 4:3. Neutral, warm-light. Optional. |
Stacked: heading, image (if present), trial block, warranty block.
Split image + text (~50/50) if image present; otherwise narrative column ≤700 px wide.
Notes: Both trial and warranty are conditionally rendered — Reviewer must NOT see fabricated trial-night counts.
Customer reviews
EXTENDPurpose: Visible review excerpts + aggregate rating. Drives AggregateRating JSON-LD ONLY when include_review_schema=true AND real review data exists. Brief currently sets false — section renders frame + aggregate readout but no JSON-LD.
Sequence rationale: Position 10: classic placement — after risk-reversal, before FAQ. Frame present even when reviews data is empty.
Slots (3)
| id | kind | purpose | data_source | metafield | constraints |
|---|---|---|---|---|---|
| section-heading | headline | H2 introducing customer reviews. Plain. | authored | — | ≤6 words. |
| aggregate-rating-readout | rating | Aggregate rating + count summary. Hides when count==0. | metafield | rating_count | Star glyphs 18 px. Format '<value> · <count> reviews'. NEVER fabricate. |
| review-card-list | list | 5 verified-customer cards (carousel mobile). Each: stars + initial/first-name + excerpt + verified-purchase tag. | external | — | Sourced from custom-reviews CSV-backed carousel. Real reviews only. If CSV <3 entries, hide card list. |
1-up swipeable carousel.
3-up grid with carousel arrows if >3 reviews.
FAQ
EXTENDPurpose: Buyer-objection answers. ≥3 real Q&A to drive FAQPage JSON-LD. Questions sourced from real patterns — sleep position, climate, delivery, returns. NO provenance questions.
Sequence rationale: Position 11: standard PDP order. image-with-faq serves the FAQ role; standalone faq.liquid is disabled by design.
Slots (2)
| id | kind | purpose | data_source | constraints |
|---|---|---|---|---|
| supporting-image | image | Image-half of image-with-faq split. Bedroom or material-detail. | product | 4:3 or 1:1. Neutral palette. |
| faq-accordion | accordion | Accordion with ≥5 Q&A: sleep position, hot-climate breathability, made-to-order delivery, returns/trial, care & cleaning, sizing. NO provenance / Made-in / factory questions. | authored | Min 5 entries to drive FAQPage JSON-LD. Q ≤80 chars, A 1-3 sentences. Accordion handle ≥44×44. NO forbidden phrases. NO Made-in. NO 'organic mattress'/GOTS/RWS. |
Image stacks above accordion, full-width. Accordion 1-column.
50/50 split — image left, accordion right. Container max 1400 px.
Related products / cross-sell
EXTENDPurpose: Cross-sell rail near page bottom. Adjacent NHC accessories / other Huxberry collections. NOT a competitor comparison.
Sequence rationale: Position 12 (final). Conventional. Re-enables static-product-recommendations section (currently disabled flag in design-reference template) — flag flip only, not file removal.
Slots (2)
| id | kind | purpose | data_source | constraints |
|---|---|---|---|---|
| section-heading | headline | H2 framing cross-sell. e.g., 'Pairs well with' or 'Complete your sleep setup'. | authored | ≤6 words. No 'You might like' / 'Customers also bought'. |
| product-card-rail | list | 3-4 product cards: image + title + from-price + 'View' CTA. | product | Card image 1:1. Title IveMode 18 px. From-price Montserrat 14 px. NO 'Discover', 'Experience', 'Know More'. CTA plain ('View', 'See more') — not 'Shop now'. |
1-up swipeable carousel.
4-up grid.