--- title: "BRAND Nike 2026 · Page: product-detail" url: https://memocore.ai/memos/6ab6490faf51aac421da88cf project: "Brand Styles" tags: "brand-nike" updated_at: "2026-09-25T10:15:38.060Z" --- # BRAND Nike 2026 · Page: product-detail HEADER brand: Nike; design_date: 2026-09; page_type: product-detail; variants: all /t/ product pages (footwear, apparel with letter sizes, "Coming Soon" products without size grid and with a Notify Me button) example_urls: https://www.nike.com/t/pegasus-42-mens-road-running-shoes-S1bYkOza/IQ0454-001; evidence: measured on that URL (US, English) 2026-09-25 from computed styles and the product app styles unless marked purpose: pick fit, colorway and size and add to bag skeleton: centered two-column block (gallery 648px incl. 48px left padding + buy column 376px) starting at x 167 at 1440, 16px apart; recommendation carousel full width below; total height ~4040px desktop, ~4380px mobile; sidebar none overrides: promo bar under the header (60px #F5F5F5, rotating underlined 12px 500 message with chevron arrows) SECTIONS S0 header + promo bar - as Overview; promo text "Send a Gift Card" / "Members: Free Shipping on Orders $50+" S1 product-hero / gallery-left-buybox-right padding: 48px below the promo bar (content top y 204 at 1440) -> mobile title 20px below the promo bar layout: gallery column (sticky, top 40px, padding-left 48px, gap 16px) = thumbnail rail 60px + main image 524px; buy box 376px at x 847 gallery: thumbnail rail: vertical flex, 8px gap, 60x60 thumbs, radius 4px, bg #E5E5E5 behind the image; 10 images plus a video thumb; the rail is as tall as the main image and scrolls; selected/hovered thumb: image darkened by a #111111 overlay at ~0.1 or a 1px #111111 border (est; hover swaps the main image) main image: 524x655 (4:5), radius 8px (est from screenshot), bg #F5F5F5, product cut-out object-fit contain; two 36px white round icon buttons (prev, next chevrons) bottom right, 16px from the edges, 8px apart buy box (top to bottom): H1 title4 20px/24px Helvetica Now Display Medium 500 #111111 ("Nike Pegasus 42") subtitle H2 16px/24px 400 #707072 ("Men's Road Running Shoes") price 16px/24px Text Medium 500 #111111, 10px below (y 262); sale: current + struck #9E9EA0 + "% off" #007D48 (est) "Select Fit" legend 16px/28px 400 #111111, 32px below the price; fit boxes: 2 columns 184.5x48, 7px gap, radius 4px, 16px 400 centered; default 1px #E5E5E5 ring (box-shadow), selected inset 1px #111111 colorway picker: 32px below; grid of 70x70 image chips, 4px column gap, 10px row gap (79px pitch), 5 per row, radius 4px, bg #E5E5E5, 1.33px white inner border; selected: 1px #111111 border around the chip (est 2px offset); last chip "Design Your Own" (Nike By You) with a colorful ring icon size selector: margin 20px 0 32px; header row "Select Size" 16px/24px 500 left, "Size Guide" link right (24px ruler icon + 16px 500, 4px gap); grid 2 columns 183.8px, 7px gap, 12px top padding; boxes 48px tall, radius 4px, 1px #CACACB border (0.67px on hi-dpi), labels 16px/28px 400 centered ("M 9 / W 10.5"); selected 1px #111111; sold out bg #F5F5F5, text #CACACB line-through, not selectable; hover border #111111 (inf) financing line: centered 14px/1.5 400 ("From $14/month, or 4 payments at 0% interest with Klarna Check purchase power"), amount in 500, link underlined; 32px above the buttons (est) Add to Bag: 376x60, bg #111111, text white 16px/24px 500, radius 30px, padding 18px 24px, margin-bottom 12px Favorite: 376x60 secondary pill (transparent, 1.5px #CACACB ring), label + 24px heart icon right of the text (4px gap) shipping block: 36px below: "Shipping" 16px 500, "You'll see our shipping options at checkout." 16px 400; "Free Pickup" 500 then "Find a Store" underlined link; 24px between items (est) description: padding-top 28px; paragraph 16px/24px 400 #111111, ~60 words; bullet list (disc, 16px, 24px indent): "Shown: ..." and "Style: IQ0454-001"; "View Product Details" text button 16px 500 with 1px bottom rule (inset box-shadow 0 -1px 0 #111111) accordions: "Shipping & Returns", "Reviews (0)" with 5 outline stars 16px; summary 20px/24px Helvetica Now Display Medium, padding 30px 0 (84px rows), chevron 24px right; separators inset 0 -1px 0 #E5E5E5 responsive: <960 single column: title block first (padding 24px), then full-width image slider 390x488 with a 3-dot progress indicator (small grey pill for the active image, est) and a thumbnail strip, then fit, colorways (horizontal scroll row of 70px chips), sizes (2 columns 163px), buttons full width (342px); a fixed bottom bar with a full-width black "Add to Bag" (390x63, radius 0) appears until the in-page button is reached (est) S2 product-rail / You Might Also Like - cross sell margin-top ~270px after the accordions (y 2783); H3 24px/28.8px Helvetica Now Display Medium at x 48; arrows 48px circles top right (disabled prev #9E9EA0 icon on #F5F5F5) slides ~300px-wide square images on #F5F5F5 (4.6 visible), 12px gap, then title 16px 500, subtitle 16px #707072, price 16px 500, struck original price #9E9EA0 below when discounted structure: Recipe filmstrip-carousel (product rail variant) S3 footer - as Overview (no pre-footer block) PAGE COMPONENTS choice-box (fit, size): see Overview COMPONENTS; 48px, radius 4px colorway-chip: 70px square image, radius 4px, bg #E5E5E5, selected 1px #111111 frame gallery-arrow: 36px white circle, 24px chevron #111111, hover bg #E5E5E5 (est) sticky-atb (mobile): fixed bottom, full-width black bar 63px, text 16px 500 white INTERACTIONS thumbnail hover/click swaps the main image instantly (est); arrows step through images; the gallery column is sticky (top 40px) while the buy box scrolls selecting a colorway navigates to that product URL (new page, the chip becomes selected) selecting a size highlights the box; Add to Bag without a size shows an error message under the size header in #D30005 ("Please select a size.", est) and a red 1px border on the grid (est) Add to Bag opens a bag confirmation panel from the header (right-aligned white panel under the header with product thumb, "Added to Bag", View Bag (secondary pill) and Checkout (primary pill)) (est) accordions open with height transition (nds-details is-animated, 250ms est) STATES loading: #F5F5F5 image boxes sold out size: bg #F5F5F5, struck #CACACB text coming soon: no size grid; "Notify Me" black pill replaces Add to Bag (est) error: size not selected, see above SCREENSHOTS - file: nike_2026_product-detail_d1440_top.jpg shows: first screen at 1440x900, live 2026-09-25: promo bar, thumbnail rail, 524x655 main image on #F5F5F5 with round arrows, title 20px, subtitle #707072, price, Regular/Wide fit boxes, 5-column colorway chips with the current one framed do not copy: product photos - file: nike_2026_product-detail_d1440_full.jpg shows: full page at 1440: size grid (2 columns, sold-out sizes greyed), Klarna line, Add to Bag and Favorite pills, shipping, description, accordions, You Might Also Like rail, footer - file: nike_2026_product-detail_m390_full.jpg shows: full page at 390: title block, image slider with dots, fit and size grids, buttons, description; the fixed bottom Add to Bag bar is captured mid-page (y ~780) because it is position fixed