Structural brief for the Nerdworks WooCommerce product page. Covers sealed TCG product (booster boxes, packs, precons). Many sections are category-conditional — they render only for the relevant product type. The Singles vertical is a separate brief (PBNW5).
Thin strip above the hero on anchor ground. Label-font in saffron. Format: Home › Category › Sub-category › Product name. Final breadcrumb is the product title, truncated with ellipsis past 40 characters. Preceded by 20px top padding, followed by 10px bottom padding before the hero. No background contrast — sits directly on the page background.
Primary conversion zone. Layout: two-column-split-55-45 on anchor ground. Hero section is tall enough that both columns fill the viewport on a 1440-wide desktop (roughly 720px tall).
GALLERY_COLUMN (55% width, left): – MAIN_IMAGE (parent-width, aspect ratio per styleguide, rounded card) – THUMBNAIL_ROW (beneath MAIN_IMAGE, 5 thumbnails in a flat row, gap 10px, each thumbnail is 80px square, active thumbnail has a 2px saffron border, inactive thumbnails have no border) – ZOOM_AFFORDANCE (subtle magnifier icon bottom-right of MAIN_IMAGE, indicates click-to-zoom behaviour)
PURCHASE_PANEL (child of hero section, 45% width, right, sticky within hero): – EYEBROW_ROW: brand or set code in label font, saffron, followed by a product-type tag badge in saffron with anchor text – PRODUCT_TITLE: heading-font, weight 700, 36-44px, bright, sentence case – REVIEW_SUMMARY_BAR: 5-star rating visualised as filled/empty stars in saffron, followed by review count “(N reviews)” in label font bright-alpha 0.7 — this establishes social proof high in the flow – PRICE_BLOCK: large price in label font weight 500, saffron, 28-32px. Strikethrough RRP in bright-alpha 0.5 above the active price if discounted. “Klarna from £X/month” in label font 12px beneath price – STOCK_BADGE: pill-shaped badge, saffron fill with anchor text for in-stock, anchor fill with saffron text for low-stock (with “Only N left” count), primary fill with bright text for pre-order (with release date) – VARIANT_SELECTORS (conditional): labelled row of pill-shaped swatches for size/edition/language. Active swatch is saffron border 2px with bright text, inactive is bright-alpha 0.2 border with bright text. Price updates live on swatch change – QUANTITY_SELECTOR: horizontal [−] [ 1 ] [+] widget, 44px tall, anchor-elev background, bright text, saffron on hover – PRIMARY_CTA: Add to cart, saffron fill with anchor text, 52px tall, full PURCHASE_PANEL width – SECONDARY_CTA: Wishlist, ghost variant (saffron border + saffron label), full width, directly beneath PRIMARY_CTA – TRUST_SIGNAL_ROW: three inline items in a row, each icon + text-line. Icons in saffron, text in bright-alpha 0.8 label font 12px. Items: “Free UK delivery over £50”, “30-day returns”, “Secure checkout” – PAYMENT_METHOD_ROW: single horizontal row of payment logos (Visa, Mastercard, Klarna, PayPal, Apple Pay), bright-alpha 0.6, 24px tall, left-aligned
MUST PRESERVE: – Two-column split held — gallery left, purchase panel right, never stacked – PURCHASE_PANEL contained at 45% of hero section, never spanning full width – Price, stock badge, and ATC button all visible above the fold on a 1440×900 viewport – PRIMARY_CTA (Add to cart) at full PURCHASE_PANEL width – REVIEW_SUMMARY_BAR sits between PRODUCT_TITLE and PRICE_BLOCK — never below ATC – Conversion path (title → reviews → price → stock → variants → qty → ATC) reads top-to-bottom within the panel, never left-to-right – THUMBNAIL_ROW is a flat row beneath MAIN_IMAGE, never overlaid on it, never to the left of it Section name (exact, do not rename): “Hero”
Layout: compact-horizontal-band on anchor ground. Thin dense utility strip, 64px tall max, sitting flush beneath the hero. Not a full editorial section — a metadata ribbon.
Content: single horizontal row of key/value pairs, evenly spaced with vertical hairline rule separators in bright-alpha 0.12 between each item. Six slots in exact order: “Publisher / Brand”, “Game system or format”, “SKU”, “Release date”, “Edition”, “Category tags”
Each slot has a uppercase eyebrow label in label font 11px saffron, with the value beneath in label font 14px bright. Values are factual — no marketing copy, no claims, no prose. Slot wraps to two rows only if the viewport demands it, otherwise single row. No icons. No background contrast on slots — the band itself carries the visual weight.
MUST PRESERVE: – Band height ≤ 64px – All six slots rendered in a single row on desktop – Vertical hairline rule separators between slots — never horizontal – Eyebrow-above-value format, never side-by-side within a slot Section name (exact, do not rename): “Meta Strip”
Layout: two-column-split-60-40 on bright ground. All content visible — no accordion, no tabs. Scannable full-page layout.
DESCRIPTION_COLUMN (60% width, left): – Section sub-heading “About” (label font eyebrow in primary) – Rich-text product description, 3-5 paragraphs, body font weight 400, 16px with 1.65 line-height – Pull quote or standout line rendered at 22px bright text inside a primary-coloured vertical bar treatment (4px wide primary bar on left, 20px padding, italic)
SIDECAR_CARDS (40% width, right, stacked vertically, 20px gap between cards): – WHATS_IN_THE_BOX card (anchor surface, bright text per baseline-6 bright-ground card rules): eyebrow “What is in the box”, bulleted list with each item prefixed by a small saffron checkmark icon, label font 14px – SPECIFICATIONS card (anchor surface, bright text): eyebrow “Specifications”, two-column key/value table with hairline rule separators between rows, keys in label font bright-alpha 0.6, values in label font bright – STAFF_NOTE card (primary surface, bright text, anchor text would be illegal per baseline-6): eyebrow “From the shop floor” in saffron, short italic quote from a named staff member about why Nerdworks stocks this product, byline in label font saffron
MUST PRESERVE: – Two-column 60/40 layout, never tabs or accordion – Sidecar cards stacked vertically, never horizontal – Each card has a distinct surface tone — anchor, anchor, primary — to avoid three identical cards Section name (exact, do not rename): “Description”
Structured facts panel, category-aware. TCG: set name/code, release date, card count, booster contents, format legality. Warhammer: system, faction/army, piece count, assembly/paint flags. Board games: player count, age, play time, complexity weight, mechanics tags. Omitted for accessories, dice, and utility products.
TCG sealed only. Positioned directly below Set Technical Specs as a value motivator. Not shown for singles, accessories, or non-TCG products.
Layout: grid-4×1. Four named chase-card slots, 24px gap, cells in exact order: “Chase A (highest rarity)”, “Chase B (secondary rarity)”, “Chase C (alt art)”, “Chase D (numbered variant)”
Each slot shows: card artwork (4/5 aspect), card name, rarity tier badge, pull rate percentage, market price in label font. Cards treated as collectible objects — no discount pricing, no sale flags.
Layout: full-bleed-with-overlay-content on anchor ground. Cinematic background art spans the entire section width, height 480px. Content sits in a max-width 720px centred column overlaid on the image.
BACKGROUND_IMAGE: full-bleed, cover-fit, aspect-ratio-agnostic. A linear-gradient overlay scrims the image at rgba(25, 28, 25, 0.7) to rgba(25, 28, 25, 0.3) from left to right, preserving the image’s visual character on the right while ensuring contrast for text on the left.
OVERLAY_CONTENT (centred column, 720px max, vertically centred in the section): – Eyebrow “The story” in saffron label font – Heading-font H2 weight 700 — “The {faction/set/world} you are buying into” (generator to specify context) – Body paragraph, 150-300 words, body font weight 400, 18px bright-alpha 0.95, 1.65 line-height, soft-justified – Category-aware: TCG renders set story arc, Warhammer renders faction lore, board games render thematic setting
MUST PRESERVE: – Background image spans full section width, not contained within max-width – Overlay content centred at 720px max — never full-width – Scrim gradient left-to-right, never top-to-bottom, never uniform opacity – Text contrast against the scrimmed area ≥ 7:1 — regenerate scrim if necessary Section name (exact, do not rename): “Lore”
Conditional on the product’s game system having organised play events at the store. Shows 2 to 4 upcoming event cards (name, system, date/time, Book CTA). Drives community engagement and in-store footfall. Omitted entirely if no events are available for this product’s system.
Layout: full-bleed-hero-with-left-content on primary ground. Cinematic banner section, height 320px. TCG sealed products only — omitted for non-TCG and accessories.
LEFT_CONTENT (50% width, vertically centred): – Eyebrow “Trade at the shop” in saffron label font – Heading H2 weight 700 — “Browse the {set code} singles catalogue” – Sub-copy 18px bright, 2 short sentences about the advantage of buying singles for specific builds – PRIMARY_CTA: “Browse {set code} singles →” — bright fill with anchor text per baseline-6 primary-section button rule
RIGHT_ZONE (50% width, no content, image or card-art bleeds through): Three angled card-art images rotated at subtle angles (-6deg, 2deg, 8deg) overlapping each other like cards being fanned out. The fan is contained within the right 50%, never spilling into LEFT_CONTENT.
MUST PRESERVE: – Full-bleed section on primary (green) ground – LEFT_CONTENT anchored to left 50%, never centred – Fanned card art contained in RIGHT_ZONE — never occupying full section width – CTA links to the Singles archive pre-filtered by set code Section name (exact, do not rename): “Singles Link”
Contextual cross-sell by same set, faction, or brand. Layout: grid-4×2 (up to 8 items, minimum 4). Section heading populated dynamically. Hidden when no related products exist.
WooCommerce reviews integration. Aggregate star rating, individual review cards, review submission CTA. Standard pattern with no TCG-specific filters.
Layout: centred-column-with-grid on bright ground. Separate UGC stream visually distinct from the standard Customer Reviews section above. Conditional — only renders for TCG, miniatures, graded/signed items, or collector-relevant products.
HEADER_ROW (centred, 720px max): – Eyebrow “From the community” in label font primary – Heading H2 weight 700 “Collector reviews” – Sub-copy 16px anchor about what collector reviews cover: condition, authenticity, pull rates, shipping care
COLLECTOR_GRID (grid-3×2, 6 reviews visible, 24px gap between cards): Each collector-card is distinct from a customer-card — anchor surface (per baseline-6 bright-ground contrast rule) with bright text, includes: – Reviewer name + COLLECTOR_BADGE (small hex-shaped badge in saffron with “Verified Collector” microcopy on hover) – Star rating broken into four dimensions: Condition, Authenticity, Pull rate, Shipping (each rated 1-5 in saffron stars, stacked vertically along the left edge of the card) – Review text 14px bright, 3-4 lines with a “Read more” expand if longer – Photo thumbnail strip (3 small square thumbnails) of the actual product received — this is the key differentiator from standard Customer Reviews – Timestamp in label font 11px bright-alpha 0.6
FOOTER_CTA (centred beneath grid): “Submit a collector review” ghost button on bright ground (saffron border, primary label), linking to a collector-specific submission form with prompts for the four rating dimensions.
MUST PRESERVE: – Visually distinct from Customer Reviews above — same prompt structure is incorrect – COLLECTOR_BADGE present on every card – Four rating dimensions shown per review, not a single overall star rating – Photo thumbnail strip present on each card — the signature differentiator – Card surface is anchor (bright-ground contrast rule), never bright-on-bright Section name (exact, do not rename): “Collector Reviews”
Conditional on click-and-collect availability. Dark strip above footer: in-store stock status, store name/address/hours, pickup lead time. Logistical only — no marketing copy. Hidden for online-only products.