War Dungeon — Product Page Build Brief — Patina + Texture Layered

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 — Patina + Texture Layered

This Build Brief renders ONCE, against the Frontier styleguide (SWD1) only. The visual treatment trials the Patina + Texture Layered aesthetic methodology — atmosphere via CSS-generated surface texture on every panel — applied to a product page. The aesthetic question this run answers: “Can subtle textural atmosphere coexist with the legibility demands of a transactional page?”

• Product gallery main image — large photographic with a CSS textural overlay (paper-grain or canvas-weave noise at 8–12% opacity via layered linear-gradients or inline SVG noise pattern). The 4 thumbnail strip below has the same overlay treatment.
• Product header content column — sits on a rodeo background with a faint paper-grain wash. The price block sits inside its own brushed-steel panel: subtle radial gradient with mottling, the ATC button is the focal sienna shape against this brushed-metal context.
• Universal trust strip cells — paper-grain wash on each cell background, leather-stitch borders (parallel hairline rules close together — 1px caput + 1px caput with 2px gap, repeating) instead of bronze ridge.
• Tabs — flat rodeo container; active tab marked with a sienna underline rule (2px) and small sienna eyebrow above. Content body uses the paper-grain wash for the rich-text reading surface — it reads “printed onto paper.”
• Cross-sell cards (Pairs well with) — paper-grain card backgrounds. Each card framed with leather-stitch border. Small inline ATC on each card uses the same brushed-steel treatment as the primary ATC but smaller.
• Painted by the Community tiles — photographic with paper-grain overlay at 35%, hairline frames (leather-stitch). The captions sit on a low-opacity dark band that picks up the leather-stitch border too.
• From the Workbench cards — sit on a dark cowboy band (the only deeply-dark panel in this direction). Leather-noise overlay at 5% on the cowboy ground. Cards have bronze leather-stitch borders.
• Related products grid — paper-grain rodeo card backgrounds, leather-stitch borders.
• Sticky mobile ATC bar — brushed-steel surface treatment with leather-stitch top edge, sienna ATC button.
• Gear-pattern SVG appears as a faint paper-watermark on the cowboy “Workbench” panel only (bronze stroke, 4% opacity). NOT used as background fill anywhere else.
• Diffuse line-only shadows — box-shadow: 0 1px 0 caput for soft separation between panels. NEVER gaussian blur. NEVER drop shadows on cards.
• Hairline-distress dividers between sections — 1px caput repeating-linear-gradient with micro gaps every 14/16/32/33px to suggest wear.
• Eyebrow tags in palatino small-caps italic with caput underline rule.
• CRITICAL conversion rule — texture amplitude stays subtle (under 12% opacity) so price, ATC label, in-stock signal, and trust strip copy never read muddy. The brushed-steel ATC panel is the deliberate exception — its texture is what makes the ATC zone read as the page’s focal mechanism.
• Acknowledged risk — the gradient-placeholder product imagery may read muddy at full scale; production needs real on-white catalogue product photography that retains crispness under the patina overlay. The mockup demonstrates the methodology; the operator evaluates fit assuming real photography substitutes for the placeholders.

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.