← War Dungeon

War Dungeon — Shop Archive (leaf category) Build Brief

BBWD12 Category Page War Dungeon

Page intent

A War Dungeon Shop Archive page is a leaf-category product grid — the surface where browsing intent narrows enough that the visitor wants to see every option. It’s a refinement of the existing v1 archive template, with conversion-optimisation additions and the locked Maximalist Industrial expression. The visitor arrives knowing what kind of product they want (a Combat Patrol, a paint pot, a codex); the page’s job is to help them filter to the specific SKU efficiently and add to cart. This is NOT the place for editorial brand voice or curated discovery — top/mid categories (Product Category mini-homepage) own that.

Subject leaf category (for the mockup)

Use Combat Patrols (Space Marines) as the subject leaf category. Justification: ~12–18 SKUs visible (a realistic leaf size — not a single-result edge case and not a thousand-product torture test), recognisable products, naturally tests pagination + filtering + Quick view + AJAX ATC at typical density. Each product has clear differentiation (different chapters / starter levels) so the filter and sort tools do meaningful work.

Mandatory structure (top to bottom)

  1. Pre-header announcement bar — brand chrome. Reuses the announcement-bar block.
  2. Global header — brand chrome. Reuses the site-header block.
  3. Breadcrumbs — Home / Warhammer / Warhammer 40,000 / Space Marines / Combat Patrols.
  4. Archive page header — compact inverted panel containing: category title in modesto-condensed display (“Combat Patrols”), 1-sentence positioning lede in palatino body (“Ten miniatures, one starter army, every chapter in the Imperium…”), and a small result-count line (“Showing 14 of 14 Combat Patrols”). NO hero composition — the archive header is informational, not editorial. The category mini-homepage above this in the hierarchy owns the editorial treatment.
  5. Filter + sort row — full-width strip below the header: sort dropdown on left (Featured / Newest / Price: Low to High / Price: High to Low / Top rated / Bestsellers), result count + active-filter chips in centre, view toggle (grid 3-col / grid 4-col) on right. On mobile this collapses to a “Filter” button + sort dropdown.
  6. Body — filter sidebar (LEFT) + product grid (RIGHT) — two-column layout, sidebar 280px wide.
    • Filter sidebar contains: Faction (Salamanders, Imperial Fists, Blood Angels, Ultramarines, Dark Angels, Raven Guard, Generic — checkboxes, with count per faction), Points cost (under 500 / 500–1000 / 1000–2000 / 2000+ — radio), In stock only (toggle), Price (range slider with input fields), Game system (40K 10th ed / 40K 9th ed legacy — checkbox), On sale (toggle). Each filter group has a collapse/expand handle. Filters persist via URL params.
    • Product grid renders 3-up (desktop default, ~280px cards) or 4-up (compact toggle, ~220px cards). On mobile: 2-up.
  7. Product cards — each card carries: product image (4:5 or 1:1, with hover swap to a second shot if available), loyalty earn pip (small bronze roundel showing “+pts” — top-right corner), wishlist heart (top-right corner of image, ghost button), eyebrow tag (Chapter / Faction), title (modesto-condensed), star rating + review count, price block (current + RRP strikethrough if discounted), in-stock signal (small bronze dot with “In stock — ships 24h” — for performance, only render the 24h text on hover or for the first row), Quick view CTA (sienna inline button, opens modal), Add to Cart CTA (sienna primary button, AJAX). The card itself is dark cowboy with 4px ridge bronze — same methodology as the homepage product cards.
  8. Pagination — under the grid: “Previous” / numbered pages / “Next” buttons in the brand’s stamped-badge vocabulary. Also a “Load more” alternative button if pagination feels heavy.
  9. Curated bottom slot — “Workbench picks for Combat Patrols” — 2 cards: 1 how-to guide relevant to this leaf (e.g. “Edge highlighting Combat Patrol Marines”) + 1 painting showcase highlight (a customer’s painted Combat Patrol). Sits below the grid, providing editorial relevance for the visitor who scrolled to the end. Conversion lever: keeps the visitor in the brand even if they didn’t find a fit; offers an alternative engagement.
  10. Newsletter signup — single-row strip. Reuses the newsletter-signup block.
  11. Global footer — brand chrome. Reuses the site-footer block.

Quick view modal

The Quick view CTA on each product card opens a modal with a condensed product header: gallery (smaller), title, price, loyalty earn, in-stock signal, variation chips, qty stepper + ATC + wishlist, “View full details” link to the product page. NOT the full product page — the visitor stays in the archive context. Modal close returns them to their grid position with filters preserved. The mockup may render the modal in an open state for the operator to review the treatment.

Excluded from the Shop Archive (belongs elsewhere)

Conversion principles

Voice notes

The archive header lede uses the saloon-shopkeeper register but more compressed than the category mini-homepage — one sentence, not a paragraph. Filter labels and sort options stay plain (Filter / Sort by / In stock — no “Lasso my faves”) because they’re functional UI, not voice surfaces. Product card eyebrows use chapter names (Salamanders, Imperial Fists) which carry the IP’s own voice. Lily owns final copy of the header lede and any curated-bottom-slot CTA microcopy.

Render direction

Locked methodology: Maximalist Industrial at the Frontier styleguide (SWD1). See canonical references MWD5 (homepage) and MWD9 (product page) for methodology. The brand’s 35-block reuse catalogue auto-supplies the chrome blocks. Author NEW for the archive-specific blocks (archive-header, filter-sidebar, filter-group, sort-bar, pagination, archive-product-card-extended) following the same methodology: dark cowboy inverted panels for the archive header, filter sidebar, and curated bottom slot; bronze gear-pattern background fill at 10% on the inverted panels; 4px ridge bronze on product cards; bronze gear-divider between major sections (filter+grid section, pagination, curated bottom slot). Conversion-clean-zone discipline carries into the Quick view modal — price + ATC inside the modal stay clean of competing ornament.

Desktop composition (locked brand rule, 2026-06-07)

War Dungeon is desktop-first. Mockups render at 1440px as the primary composition; mobile is graceful collapse via @media breakpoints, not the starting point. The Shop Archive’s filter sidebar + product grid is naturally two-column at desktop; the rest of the page composition must follow the same principle.

Desktop composition rules for this page

Conversion peak preserved: the price + ATC clean-zone discipline inside the Quick view modal carries the same rule as the product page modal. Two-column modal layout doesn’t change clean-zone enforcement — the right-side content column protects the price + ATC from competing ornament.

Technical constraints