An editorial commerce surface built around one idea: the product photography is the interface. Everything else — navigation, labels, price, structure — recedes into a monospace utility layer, so the imagery carries the brand and the shopper never loses the thread from hero to cart.
This document reconstructs the delivered interface as abstracted compositions. Client name, logotype, domain and photography are withheld; the visual system, structure and setup are shown as built.
The fold is a fork, not a pitch. Two gendered entry points sit at the outer edges as vertical labels, so the first decision a shopper makes is the only one the hero asks for.
The logotype is set vertically at display scale behind the image edge, doing the work of a divider. It brands the fold without occupying the reading line.
Search, account, wishlist and bag are a single icon cluster, right-aligned, on every surface. Nothing else competes with the imagery for persistent screen space.
Two neutrals carry every surface; the three chromatics are rationed. Signal red marks section openers and the active state only, steel blue marks anything new or incoming, clay comes from the photography rather than the brand.
Three roles, no overlap: condensed caps shout, mono narrates the interface, the grotesque handles anything a customer has to read at length. Letterspacing does most of the hierarchy work, so the type ramp stays short.
The rule the tree enforces: depth is capped at three clicks from home to a product, and growth happens sideways into filters rather than downwards into new nesting.
One canonical URL per product, unique titles and descriptions per template rather than per page, and filter parameters kept out of the index.
Sitemap submitted and verified in Search Console; cart, account and search routes excluded from crawling so budget goes to products.
Product, Organization and BreadcrumbList markup so listings can carry price and availability rather than a bare blue link.
Collection pages carry the category language, product pages carry the specifics. Each page answers one query intent and links to its neighbours.
Hero imagery sized and preloaded, everything below the fold lazy-loaded, image dimensions reserved so nothing shifts as the page settles.
Storefront analytics plus a measurement property, with the funnel events named the same way in both so the numbers can be reconciled.
Contrast held on the bone background, focus visible on every control, icon-only buttons labelled, and the vertical display type never used for real information.
Business profile claimed and matched to the storefront — same name, categories, hours and contact route — so local search and the site tell one story.
Theme code in version control, one branch per surface, so a change is reviewable and reversible instead of edited live.
Preview environment for the client to walk each surface before it ships. Sign-off happens on the real thing, not a static comp.
Deploy on merge to the production theme, custom domain and certificate handled at the same time so launch is one event.
Merchandising is editable without touching code: collections, imagery and the featured edit are all content, not markup.
Orders and enquiries land in the business inbox in a fixed format, with the source attached. Fulfilment and marketing both start from the same record.
Filters read as a sentence under the title; the carousel keeps a long category browsable without pagination.
One plate proportion across the whole catalogue. Title and price sit in mono beneath, so mixed photography still reads as one grid.
The split hero stacks; vertical labels become the section markers. Bag and search stay in the bar at thumb-reachable size.
Mono for every label, grotesque for every sentence, display for openers only. It lets photography change completely without the interface losing its voice — the most portable part of the system.
Capping navigation at three items and absorbing new categories as filters kept the tree shallow. I'd start any catalogue this way now, and only promote a filter to a route when demand proves it.
Empty cart, empty wishlist, no results. Designing them alongside the happy path — not after launch — is the cheapest credibility a small storefront can buy.