Shop

Item: Shop
Rating: 7.2

Shopify's shopping app for discovering brands and tracking orders.

7.2/10MABTU rating

DESKTOP · 1440 × 6,412/ ↗

MOBILE · 390

Section outline · Home

01heroProduct collage, wordmark, search pill, category chips
02categoriesWomen, Men, Beauty, Home photo mosaics
03brand rowHorizontal brand cards with product tiles
04brand rowHorizontal brand cards
05brand rowBrand cards
06brand rowBrand cards
07brand rowBrand cards

Rating · Home

Visual design7.6

UX & clarity7.6

Originality7.0

Craft & consistency7.6

Motion6.5

Performance & a11y5.5

This page scores 7.2; the site score weights the home page double.

Main colours

Light·white background·muted

Typography

GT Standard Mheading · font · self-hosted GT Standard Mbody · font · self-hosted Interaccent · sans · self-hosted

Stack & style

Remix / React Router Tailwind CSS React

Photography-led Rounded / soft Product-UI-led Horizontal scroll Sticky header

Also: Cloudflare

Design DNA

Light grey page with a slim left icon rail. The hero is a collage of floating product cutouts and cards around the purple Shop wordmark, a large rounded search field and a row of category chips with round thumbnails. Below, category rows (Women, Men, Beauty, Home) use 2x2 photo mosaics, then horizontally scrolling brand cards: a mood photo with the brand name in its own type, rating, and three white product tiles along the bottom. Purple is reserved for the logo and a few accents.

Worth borrowing

Build brand cards as a mood photo with the brand logo, rating chip and three product tiles docked at the bottom.
Open with floating product cutouts around a large search pill instead of a headline.
Use 2x2 photo mosaics as category entry tiles with labels in the corners.