War Dungeon — Product Page Build Brief — Maximalist Industrial

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 — Maximalist Industrial

This Build Brief renders ONCE, against the Frontier styleguide (SWD1) only. The visual treatment trials the Maximalist Industrial aesthetic methodology — heavy ornament, every panel rivet-bordered, every divider an engraved gear strip — applied to a product page. The aesthetic question this run answers: “Can the densest ornament direction survive on a transactional surface where conversion legibility is non-negotiable?”

• Inverted-panel dominant — product header (gallery + content), trust strip, every tab panel, cross-sell, “From the workbench”, related products, sticky mobile ATC all sit on dark cowboy panels with rodeo–light text.
• Gear-pattern SVG background fill on every dark panel at 10% bronze stroke opacity. The product-header dark panel carries it integral, not decorative.
• Brass rivets at every corner of every panel — small bronze SVG/CSS dots. Visible on the product header panel (4 corners), every card (gallery thumbs, cross-sell cards, related product cards, painted-by-community tiles).
• Engraved gear dividers between EVERY section — gear-pattern SVG rendered as horizontal ornamental strips with full bronze opacity. EXCEPTION: NO gear divider inside the product header itself — preserve eye flow from gallery to title to price to ATC.
• 4px border-style: ridge bronze on cards — gallery thumbnails, cross-sell cards, painted-by-community tiles, related product cards, workbench cards. 2px ridge bronze on the primary ATC button.
• Stamped brass roundel for the loyalty earn — large, prominent, positioned adjacent to the price. The price-plus-loyalty pair is a stamped-metal data display, not plain numbers.
• Stamped badges for everything — review-rating pill (4.8★ in a stamped brass roundel), in-stock signal (stamped green-on-bronze pill), free-delivery-threshold tick (stamped tick badge), free-UK-shipping cell (stamped icon), 30-day-returns (stamped icon). Every micro-trust signal is a stamped marker.
• Modesto-condensed in caps at max scale for section heads with bronze underline rule. The product title takes the largest scale (clamp(40px, 6vw, 72px)) sitting at the top of the content column.
• Stamped-shadow CTAs — `box-shadow: 2px 2px 0 caput` (no blur) plus ridge bronze border. Applied to the primary ATC button, wishlist button, express checkout buttons.
• CRITICAL conversion rule — the immediate zone around the primary ATC button stays visually CLEAN of competing ornament. No gear divider crossing the ATC. No stamped badges overlapping the price. No rivets inside the price+ATC rectangle. The maximalism dials UP everywhere except the 200×300px zone owning the conversion peak. This is the engine of “brand atmosphere supports conversion, never competes with it.”
• Photographic register for product gallery — main image + 4 thumbs all photographic. Each photograph sits inside a plated bronze ridge frame with corner rivets.
• Sticky mobile ATC bar — small dark inverted bar fixed to viewport bottom on small screens, carrying product thumbnail + price + ATC stamped-shadow button. 4px ridge bronze top edge.

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.