--- name: standard-storefront type: standard license: CC BY-NC-SA 4.0 description: >- The quality bar an e-commerce storefront must clear — the anatomy and bar per surface (homepage, collection, product page, cart and checkout, account and order status, search and navigation, empty states), trust and conversion fundamentals stated as run checks (mobile-first, speed budget, delivery and returns clarity, payment options, social proof, WCAG 2.2 AA), the product imagery system and the PDP minimum set, packaging and unboxing as a storefront surface, and a scoring rubric that feeds skill-discovery-audit's App category set. Read before designing, extending, or assessing any venture's or client's storefront (skill-storefront-merchandising) so quality is judged the same way every run and an existing store can be scored rather than merely used. Sits beside convention-retail, which holds the touchpoint chain and KPI vocabulary, and convention-shopify, which holds the tooling. Owned by Pixel. Surfaced by APP-1080; first draft 2026-09-03. --- # Storefront standard What a good e-commerce storefront must contain, stated as a bar the work can pass or fail. This is a *standard*, not a convention: each requirement below is derived, and a store can be scored against it. Owned by Pixel; read by `skill-storefront-merchandising` before designing or extending any storefront, and in read mode when scoring a store Pixel did not build (madebyneud/BARA, Keroma). `convention-retail` holds the touchpoint chain and KPI vocabulary this standard sits within — surfaces are named in its terms, not restated; `convention-shopify` holds the tooling; the venture's `convention-brand` instance holds the look. Sonar's App audit (`convention-audit`) is the strategy-level view — this is the craft-level bar beneath it. ## The bar — anatomy and bar per surface Each surface has a minimum anatomy and a bar. A missing part is incomplete; a part present but below its bar is a finding. * **Homepage.** Anatomy: one statement of what the store is and who it is for, above the fold; a path into the range; proof (reviews, press, maker story); the current story (drop, season, edit). Bar: a first-time visitor can say what is sold and why it matters within one screen, and reaches a product in one tap. A carousel of promotions with no statement fails. * **Collection / PLP.** Anatomy: a titled, described collection; a grid with one card anatomy (image, name, price, variant cue, availability); filters on the axes customers actually choose by; a sort with a sensible default; pagination that preserves position. Bar: grid images share one framing and ground so the page reads as a range; filter and sort state survive a back navigation; an empty filter result offers a way out. Two card templates on one grid fails. * **Product page (PDP).** Anatomy: the imagery minimum set (below); name, price and variant selection, with the price updating on selection; stock and lead time; delivery cost and timing and the returns terms, visible without leaving the page; a description answering what it is, what it is made of, how big it is, and how to care for it; reviews; cross-sell (goes-with, not more-of-the-same). Bar: everything a buyer needs to decide is on the page; add-to-cart sits within the first mobile screen for a product without variants; out-of-stock is stated with an alternative. Delivery terms discoverable only at checkout fails. * **Cart and checkout.** Anatomy: a cart showing each line with image, variant, quantity and price, and a running total with delivery estimated; a checkout with legible progress, a guest option, address autocomplete, express payment and a clear summary. Bar: no surprise cost after the cart; errors are inline and specific; the final step states exactly what will be charged. On Shopify the checkout is the platform's, so it is scored on configuration (payment methods, express options, policies attached), not on a layout Pixel cannot change. * **Account and order status.** Anatomy: order history, status with tracking, saved addresses, a route to start a return. Bar: a customer can answer "where is my order" without emailing; the post-purchase emails and the account page tell the same story. * **Search and navigation.** Anatomy: a primary nav that mirrors the collection structure in the customer's words; a search with suggestions and typo tolerance whose results page behaves like a collection page. Bar: the top ten queries return the products they mean; every nav item lands on a populated page; a zero-result search offers collections, not a blank. * **404 and empty states.** Anatomy: 404, empty cart, empty search, empty collection, out-of-stock — each on-brand, each with a route onward. Bar: no dead end anywhere; the tone is the venture's, never the platform's default string. ## Trust and conversion fundamentals — the bar, stated as checks Seven checks. Each is run and recorded, never asserted; an automated-only pass is scored **partial**. 1. **Mobile-first.** Run the whole purchase on a mid-range phone over a throttled connection. Every surface above is complete on mobile, the primary action is thumb-reachable, and nothing depends on hover. 2. **Speed budget.** Core Web Vitals on the homepage, a collection page and a PDP, measured on mobile: LCP under 2.5 s, INP under 200 ms, CLS under 0.1. Images are sized to their slot and served in a modern format; every third-party script is named and justified. Report the numbers, not "fast". 3. **Delivery and returns clarity.** From the PDP, without leaving it: the delivery cost, the delivery window, and the returns window and cost. The same terms appear on the cart, at checkout and on the policy page, and they agree. 4. **Payment options.** The methods the venture's market expects are present — card, the platform wallet, and at least one express wallet such as Apple Pay or Google Pay — and visible before checkout. Where instalments are offered, the terms are stated plainly. 5. **Social proof.** Reviews or equivalent proof exist, are genuine and dated, sit on the PDP, and include the unflattering ones. A bare star count is partial; manufactured urgency is a fail (a real, dated drop is not urgency — see the BARA instance in `convention-brand`). 6. **Accessibility — WCAG 2.2 AA.** Run the six checks in `standard-design-system` (contrast at the token pair, focus visibility and order, target size, motion preference, semantic structure, the documented contract) across the purchase journey rather than per part: a keyboard-only purchase from homepage to order confirmation completes; every product image carries meaningful alt text; variant selectors and quantity steppers are operable and announced; checkout errors are associated with their fields. `standard-prioritisation` treats a failure here as Critical. 7. **Legibility of the offer.** Price, variant and availability are never ambiguous — the currency is stated, a sale price shows the was-price beside it, and a variant that changes the price changes it visibly. Where a bar cannot be met, record it as a named exception carrying a reason and a ticket. ## The product imagery system Imagery carries most of the decision on a homeware or apparel store. Five shot types, each with a job: * **Hero** — the one image that sells the product; lifestyle-leaning, used on cards and as the PDP lead. * **Packshot** — the product alone on a consistent ground; the shot that makes a range compare. * **Detail** — texture, finish, maker's mark, seam, glaze; the shot that answers "what is it really like". * **Lifestyle** — the product in use, in a setting that argues the brand (per `convention-aesthetic` and the venture's `convention-brand` — never the generic AI/UGC look). * **Scale** — the product beside a hand, a body or a familiar object, or dimensioned; the shot that prevents the size-related return. **Consistency rules.** One ground and one lighting recipe per shot type across the range; one crop ratio per slot (card, PDP gallery, homepage); packshots within a collection framed so the products read at the same visual size; colour managed so the same glaze or dye reads the same across products. A range shot in three studios on three grounds fails, whatever each image looks like alone. **The PDP minimum set.** Hero, packshot, at least one detail, at least one lifestyle, and scale — five images, in that order, for every product. Variants that change appearance each carry their own hero and packshot. Fewer than five scores partial; a packshot alone fails. Where the set does not exist, that is a photography need to flag through `skill-storefront-merchandising`, not a reason to lower the bar. ## Packaging and unboxing — a storefront surface The parcel is the last touchpoint the storefront controls and the first physical one the customer meets; on the `convention-retail` touchpoint chain it sits after checkout and before repeat. It is named here as a storefront surface so a store audit scores it — outer pack, inner presentation, insert (care, story, return route) and reveal — rather than treating the experience as ending at order confirmation. The bar and the craft belong to `skill-packaging-unboxing`, which is **not yet authored** (APP-1086, gated on the APP-1080 epic); until it lands, score this surface **unknown** unless a parcel has been inspected directly. ## Scoring an existing store When ingesting a store Pixel did not build, score each surface and each check above **pass / partial / fail**, and tag each finding **known** (observed directly), **assumed** (inferred), or **unknown** (not inspectable). Score per surface and per check, never as one blurred store verdict: a PDP that passes imagery and fails delivery clarity is two findings. Map each finding to the App audit category set in `convention-audit` — Accessibility (check 6), Bugs (a broken flow or dead end), Brand & Content (imagery system, empty-state tone, offer legibility), UX (surface anatomy, checks 1 to 5), UI (card and grid consistency) — so the scored inventory drops straight into `skill-discovery-audit` as Finding cards, with severity per `standard-prioritisation`. Produce it once; let Sonar's strategy layer read it. ## Guardrails * The bar judges the storefront, not the taste — aesthetic judgement lives in `convention-aesthetic` and the venture's `convention-brand` instance; the retail model lives in `convention-retail`. * Score what is observable; name what is not (unknown), never fill it. * Conversion is served without cheapening the look: no dark patterns, no manufactured urgency, no pre-ticked upsells — a check passed by manipulation is a fail. * Accessibility is a bar, not a preference, and is not traded against a treatment. * A failed bar is a finding to raise, not a licence to restructure a live store; theme changes are specified for Forge per `convention-shopify`, never made through the connector.