War Dungeon — Product Page Build Brief — Product-Page-Grounded

Page intent

The War Dungeon product page is the brand’s primary conversion surface. A visitor arrives with intent (organic search, category drill-down, homepage curation, ad landing, return visit) and the page must convert that intent into an add-to-cart while still carrying the Steampunk + Old-West brand register. Conversion legibility comes first: price, loyalty earn, in-stock signal, primary CTA, and trust signals must be unambiguous and reachable at decision moment. Brand atmosphere comes second: the page must read distinctly as War Dungeon, not as a generic Woo product page. The two are not in tension — the lived v1 single-product template proves it.

Subject product (for the mockup)

Use Combat Patrol: Space Marines as the subject product for the mockup. Justification: mid-density representative product — believable price (£105–£125), realistic stock state (In stock), one meaningful variation axis (e.g. chapter / paint scheme as a future option), suitable for the conversion patterns (loyalty roundel earnable, free-delivery threshold proximity, paint cross-sell, painted-by-community UGC, edge-highlighting tutorial relevance). Stresses the layout fairly without edge-case demands (a single paint pot under-tests density; a system-level army box over-tests it).

Placeholder product data: 4.8★ from 124 reviews. £119.00 (RRP £135). 595 loyalty points earnable on this product. In stock — ships within 24h. 10 plastic miniatures + transfer sheet + base sheet + assembly instructions. Compatible with Warhammer 40,000 (10th edition) Combat Patrol mission deck.

Mandatory structure (top to bottom)

Anatomy derives from the lived v1 single-product template (wp-content/themes/war-dungeon/woocommerce/content-single-product.php: breadcrumbs → product header (gallery + content + ATC + CTA promo) → promo strip (4 reasons-to-buy) → body (tabs / after-single-product hook)) with conversion-optimisation additions layered in. Mandatory sections in order:

1. Pre-header announcement bar — same brand chrome as homepage. Rotating shipping / campaign / loyalty messages. Inherited from camcom-v2 with brand override.
2. Global header — same brand chrome as homepage. Logo / primary nav (5 items) / search / account / wishlist / mini-basket with loyalty points badge.
3. Breadcrumbs — Home / Warhammer / Warhammer 40,000 / Space Marines / Combat Patrol: Space Marines. Modesto-condensed small-caps, last item marked as current (not a link).
4. Product header — image gallery (LEFT) — main image at top (aspect 4:5 or 1:1), 4-thumb strip below (additional angles, scale comparison, unboxing detail, painted reference). Wishlist heart top-right of main image. Click-to-zoom affordance. On mobile this stacks above the content column.
5. Product header — content (RIGHT) — vertical sequence:
   • Eyebrow tag: faction / game system (“Warhammer 40,000 · Space Marines”).
   • Title in modesto-condensed display (“Combat Patrol: Space Marines”).
   • Star rating (4.8★) + review count (clickable “124 reviews” anchors to reviews tab below).
   • Short description: 2–3 sentences positioning the product in saloon-shopkeeper voice (“Ten miniatures, one starter army, every chapter in the Imperium. The fastest way to a paintable Space Marines force…”).
   • Price block — current price prominent (£119), strikethrough RRP (£135) if discounted, “Save £16” pill.
   • Loyalty earn — visible at decision moment. Brass loyalty roundel: “Earn 595 loyalty points on this product”. Hover/tap reveals point value calculation. Conversion add vs lived v1.
   • Variation selector (if applicable). Treat as future-state: even if the SKU has no variations today, render the slot with a single option (“Standard box”) to preserve layout. If reasonable variations exist for the kit (e.g. paint scheme primer or chapter symbol pack add-on), render those.
   • In-stock signal with dispatch ETA — green dot + “In stock — ships within 24h”. Conversion add vs lived v1.
   • Quantity stepper (default 1) + Add to Cart (primary CTA, full-width or wide) + Wishlist button (secondary, outline).
   • Express checkout options — small row of express payment buttons (Apple Pay, Google Pay, Shop Pay, Klarna pay-in-3) below the primary ATC. Conversion add vs lived v1.
   • Free-delivery-threshold reminder — small line (“Spend £75 for free UK shipping — you’re £44 over the threshold ✓”) with a progress bar OR completion tick. Conversion add vs lived v1.
   • Secondary CTA cluster (small): “Ask about this product” + “Compare” (optional).
6. Universal trust signals strip — replaces the lived v1’s product-specific promo strip (camcom__promo) with universal trust signals so every product page carries the same row without per-product authoring: Free UK shipping over £75 / 30-day returns / Multi-game expertise / “A Nerdworks Brand” credibility. 4 cells across, each with bronze gear icon + short caption. Refactored from lived v1.
7. Tabs / sections — Description. Rich text describing the kit: what’s in it, who it’s for, what skill level, how it sits in the army. Hero shot or in-progress paint reference. The brand’s “saloon-shopkeeper” voice carries this — knowledgeable, atmospheric.
8. Tabs / sections — What’s in the box. Bulleted list: “10 plastic Space Marines miniatures — 1 Captain in Terminator Armour, 5 Tactical Marines, 3 Aggressors, 1 Apothecary / 1 Combat Patrol mission deck / 1 transfer sheet (200+ icons) / 1 base sheet / Assembly instructions in 8 languages”. Optional small line-art schematic.
9. Tabs / sections — Specifications. Scale (28mm heroic), material (polystyrene plastic), paint required (yes — sold unpainted), assembly required (yes — push-fit), game compatibility (Warhammer 40,000 10th ed Combat Patrol missions).
10. Tabs / sections — Reviews. Aggregate (4.8★, 124 reviews) + distribution histogram + 3 most-recent reviews (reviewer name, stars, date, body, “Was this helpful?” affordance). “Write a review” CTA.
11. Painted by the Community — UGC strip showing 4–6 painted versions of THIS specific kit (customer-submitted, AffiliateWP-linked where the painter is a partner). Each tile clickable to a single showcase post. “Submit your painting” CTA at the end. Conversion lever: aspirational — shows what they could build.
12. Pairs well with — cross-sell strip: 3 paints + 1 tool needed for this kit (e.g. Citadel Macragge Blue base spray, Mephiston Red, Leadbelcher, Citadel hobby knife). Each as a small product card with image, name, price, “Add to cart” inline. Conversion lever: AOV uplift, presented as helpful curation.
13. From the workbench — editorial relevance: 1–2 how-to guides specifically applicable to this kit (“Edge highlighting Space Marines power armour”, “Magnetising Combat Patrol weapon options for swappable load-outs”). Each card has cover image, difficulty pill, read/watch time, CTA. Conversion lever: content as trust + return-visitor seed.
14. You may also like — related products: 4 related kits in same faction / game system (Combat Patrol: Necrons, Combat Patrol: T’au Empire, Space Marines Strike Force, Space Marines Hero Series). Standard product card grid.
15. Recently viewed — optional, conditional on browse history. Render as a 4-card strip if any history exists. Lightweight treatment — not the focal point at the bottom of the page.
16. Sticky mobile ATC bar — small persistent bottom bar that appears on scroll past the product header on mobile and small-desktop widths. Carries: small product thumbnail + price + ATC. Hidden when the in-page ATC button is visible. Conversion add vs lived v1 — present in the brief so the rendering shows it; engineering treats it as a CSS layer over the in-page content.
17. Newsletter signup — themed name (“Join the Garrison”). Smaller treatment than homepage — a single-row strip, not a full panel. Optional; can be omitted if the page reads dense enough already.
18. Global footer — same brand chrome as homepage. 4-column structure + baseline utility row.

Conversion optimisations layered onto the lived v1

• Star rating + review count visible in header (clickable to reviews tab).
• Loyalty points earnable visible at decision moment (brass roundel).
• In-stock signal with dispatch ETA (green dot + ships within 24h).
• Free-delivery-threshold reminder with progress / completion tick.
• Express checkout options (Apple Pay, Google Pay, Shop Pay, Klarna) below primary ATC.
• Painted by the Community UGC strip — aspirational social proof.
• Pairs well with cross-sell strip — AOV uplift via curation.
• From the workbench editorial relevance — content as trust signal.
• Sticky mobile ATC bar — keep ATC reachable on scroll.
• Universal trust strip refactor — replaces per-product promo blocks with universal trust signals.

Excluded from product page (belongs elsewhere)

• Hero brand-statement composition — the homepage owns the brand introduction; product page assumes intent.
• Choose Your Game grid — the homepage and global nav own discovery.
• Loyalty programme rules / cross-brand explainer — the Loyalty programme page owns the detail.
• Tools teasers — the homepage and tools landing surfaces own this.
• Detailed company / about content — the About page and footer own this.

Conversion principles

• The primary CTA is unmissable. The Add to Cart button is the visual peak of the product header. Sienna fill, bronze ridge border, large hit area. Nothing else competes with it for the eye in the header column.
• Trust signals cluster near the decision. In-stock signal, dispatch ETA, free-delivery-threshold reminder, express checkout, and loyalty earn all sit adjacent to the ATC — not buried below the fold.
• Price clarity is non-negotiable. Current price prominent, original RRP visible if discounted, saving stated explicitly. No hidden costs implied or postponed.
• Social proof is layered. Star rating in header for fast confirmation; full reviews tab for deep evaluation; Painted by the Community strip for aspirational identification.
• Cross-sell is curation, not pressure. “Pairs well with” is positioned as helpful (paints needed for this kit), not as upsell. Same with editorial relevance.
• Brand atmosphere supports conversion, never competes with it. Ornament, surface treatment, and copy register all build trust and brand affinity. They never obstruct price, ATC, stock signal, or trust strip.
• Brand voice extends into chrome moments. The “saloon-shopkeeper” register appears in the short description, trust strip copy, in-stock copy (“In stock — ships within 24h, weather permitting”), and so on. Not in the price or the ATC button label (which stay plain — “Add to Cart” or “Add to Saddle” — operator’s call on cuteness tolerance).

Voice notes

Short description and brand-voice copy carry the same Old-West saloon-shopkeeper register as the homepage: earthy, knowledgeable, atmospheric. Not jokey; not corporate. Treats the visitor as a fellow hobbyist who knows the games. Specific copy is TBC by Lily; the mockup should use placeholder copy that READS in this register so the operator can evaluate fit. Example fits: “Ten miniatures. One starter army. Every chapter in the Imperium.” “Push-fit, paint-ready, on your gaming table by sundown.” Example anti-fits: “Best price guaranteed!”, “Limited time offer!”, “Click to save!”.

Render direction — Product-Page-Grounded

This Build Brief renders ONCE, against the Frontier styleguide (SWD1) only. The visual treatment trials the Product-Page-Grounded aesthetic methodology — the lived v1 single-product page vocabulary — applied to a product page with conversion-optimisation additions. The aesthetic question this run answers: “Does the lived methodology produce consistent output across a fresh authoring, and does it still hold up when conversion-optimisation layers are added?”

Methodology — the lived v1 vocabulary applied to a product page

• Inverted product header panel — page surface is flat rodeo (#C5A688). Product header sits on a dark cowboy (#2B1B1C) panel with rodeo–light (#D8C3B1) text. Gallery LEFT on this dark panel, content RIGHT on this dark panel — the lived v1 two-column composition.
• Set-in panel geometry — the product header has sharp top corners and 7px rounded bottom corners (border-radius: 0 0 7px 7px) — set into the page from above, the lived header’s signature move.
• Bronze gear-pattern SVG background fill on the product header panel — bronze stroke, 10% opacity, integral to the surface (not decorative).
• Hero gallery imagery — main product image fills the gallery zone, with a hard linear-gradient(90deg, #2B1B1C 5%, transparent 55%) overlay fading the image edge into the dark panel on the content-side edge. The lived v1 gallery treatment. Thumb strip below uses the same fade per thumbnail.
• Universal trust strip (replaces lived camcom__promo 4-up) — separate full-width dark cowboy panel with sharp top + rounded-bottom geometry. 4 compact dark badge cells inside: each a bronze gear icon (the lived wd-big-gear in bronze) + condensed-caps caption. NO walls of text. Set-in panel geometry consistent with the product header above.
• Tabs container — dark cowboy panel with set-in geometry. Tab buttons are bronze 2px ridge buttons with sienna fill for the active tab. Tab content body is a rodeo-light inset panel inside the dark container — the only large light surface in the page, justified because rich-text reading needs the contrast.
• Painted by the Community strip — dark cowboy panel with set-in geometry containing 4–6 thumbnail tiles. Each tile is dark cowboy with 4px ridge bronze border, photographic content with the same linear-gradient fade treatment as the hero.
• Pairs well with (cross-sell) — dark cowboy panel with set-in geometry. Cards are dark cowboy with 4px ridge bronze borders, photographic product image with linear-gradient fade, small bronze gear icon next to a condensed-caps inline ATC.
• From the Workbench — dark cowboy panel with set-in geometry, cards same as cross-sell with editorial content + difficulty pill + read/watch time.
• Related products — dark cowboy panel with set-in geometry, standard product-card grid with 4px ridge bronze borders.
• CSS border-style: ridge for ALL depth — buttons are sienna (#832D15) with 2px ridge bronze (#F4A479) borders. Cards (all of them) are dark cowboy with 4px ridge bronze borders at 7px radius. NO drop shadows anywhere. NO inset bevels. NO gradients except the hero image fade. Every dimensional cue comes from ridge.
• Promo blocks as compact badges — the trust strip cells, express checkout buttons, and free-delivery-threshold reminder all use the small dark inverted block + bronze gear icon + condensed-caps caption pattern.
• Hierarchy — modesto-condensed for product title at 36–48px on the dark header panel. Palatino-linotype body at 20px (NOT 18px — lived v1 uses 20px). Eyebrow tags as small condensed-caps in bronze.
• Sienna CTAs only — primary ATC is sienna with 2px ridge bronze border. Hover shifts sienna to liquourice (#1B1314). Wishlist is a ghost variant (transparent fill, 2px ridge bronze border, rodeo–light text). NO brass, NO copper, NO alternative accent metals — Frontier discipline.
• Sticky mobile ATC bar — small dark cowboy bar fixed to viewport bottom on small screens with sharp top edge + 0px radius (it’s a permanent fixture, not a set-in panel), 4px ridge bronze top edge, sienna ATC button.
• Ornament restraint — NO rivets at panel corners. NO etched plate frames. NO engraved gear dividers between sections. Depth comes EXCLUSIVELY from inverted panels + ridge borders + gear-pattern fills + the linear-gradient image fade. Section breathing room is from generous vertical gutters (60–120px), not ornamental dividers.
• Conversion adds get the same treatment — the loyalty roundel is a bronze badge with ridge bronze border (the lived tertiary title scale). In-stock signal is a small dark badge with sienna green-dot. Express checkout buttons are bronze-ridge dark-cowboy compact badges. Free-delivery-threshold tick is a small bronze gear-icon badge with condensed caption. Every conversion addition speaks the lived dialect.

Technical constraints

• Page max-width 1440px (global setting).
• Base font size 18–20px depending on render direction (Frontier baseline 18px; Product-Page-Grounded extends to 20px per the lived v1).
• No mobile simplification of brand ornament — the brand’s aesthetic moves stay below 480px.
• Image gallery is performant: largest responsive size for the main image, thumbnails lazy-loaded, AVIF/WebP via ShortPixel.
• AJAX add-to-cart from the primary CTA — no full-page reload. Cart drawer slides in on success.
• Sticky mobile ATC bar is a CSS-only layer at this stage of the engine — no JS state-management required for the mockup; presence only.
• Express checkout buttons are stubs for the mockup — actual integration is downstream of the Pay/Stripe/etc. plugin choices.
• Reviews substrate: WooCommerce Reviews (potentially enhanced via Yotpo or Stamped in future) — render the visible UI; data binding is downstream.