Skip to main content

The UX Guide Vol. 1: Luxury Ecommerce

For CRO Strategists, UX Strategists, Ecommerce Teams and Chief Digital Officers who need to ground a storefront decision in something firmer than taste.

The details of a page matter, and when layouts need to change the design references you want are never within reach, until now. This is a compendium of the way luxury brands across the internet have settled those details, from the homepage to the collection page to the product page, on desktop and mobile.

Tony Castillo Founder, WISLR

Use this guide to spark an idea, to find the category norm, to place your own storefront against it, and to check an assumption before it costs you a sprint.

How to use this

Each component page is one decision, sorted along the axis that decision runs on. The add to cart buttons go from the roundest corner to the squarest. The inks go from the lightest grey to black. The category norm is the middle of the list, and your own storefront sits somewhere on it, which is a faster answer than a meeting.

Every value here came off a live storefront rather than a style guide, and every rebuild is shown next to the photograph it was built from. When the two disagree the photograph wins, and where a rebuild could not be made to match it is withheld and said so. That is the point of the pairing: a number you can quote in a review, with the evidence attached.

111Skin

beauty / Shopify

111Skin homepage on desktop, Shopify luxury beauty storefront captured at 1440 x 900 111Skin collection: all products on desktop, Shopify luxury beauty storefront captured at 1440 x 900 111Skin product page on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Palette
Typography Futura Cyrillic Book, Blair Medium 100% sans-serif

Open this guide

Amiri

fashion / Shopify

Amiri homepage on desktop, Shopify luxury fashion storefront captured at 1440 x 900 Amiri collection: all sale on desktop, Shopify luxury fashion storefront captured at 1440 x 900 Amiri product page on desktop, Shopify luxury fashion storefront captured at 1440 x 900
Palette
Typography Helvetica, helvetica-neue-lt-std-roman 100% sans-serif

Open this guide

Asprey

jewelry / Shopify

Asprey homepage on desktop, Shopify luxury jewelry storefront captured at 1440 x 900 Asprey collection: business & corporate gifts on desktop, Shopify luxury jewelry storefront captured at 1440 x 900 Asprey product page on desktop, Shopify luxury jewelry storefront captured at 1440 x 900
Palette
Typography Gill Sans, Gill Sans MT Pro 100% sans-serif

Open this guide

Augarten

home and design / Shopify

Augarten homepage on desktop, Shopify luxury home and design storefront captured at 1440 x 900 Augarten collection: florales & blätterdekore on desktop, Shopify luxury home and design storefront captured at 1440 x 900 Augarten product page on desktop, Shopify luxury home and design storefront captured at 1440 x 900
Palette
Typography Moderat, GT Super Display 86% sans-serif14% serif

Open this guide

Aurate

jewelry / Shopify

Aurate homepage on desktop, Shopify luxury jewelry storefront captured at 1440 x 900 Aurate collection: all on desktop, Shopify luxury jewelry storefront captured at 1440 x 900 Aurate product page on desktop, Shopify luxury jewelry storefront captured at 1440 x 900
Palette
Typography gt-america-standard-webfont, gt-america-extended-webfont 100% sans-serif

Open this guide

Away

luggage / Shopify

Away homepage on desktop, Shopify luxury luggage storefront captured at 1440 x 900 Away collection: all product (internal only) on desktop, Shopify luxury luggage storefront captured at 1440 x 900 Away product page on desktop, Shopify luxury luggage storefront captured at 1440 x 900
Palette
Typography Graphik, Lyon Display 76% sans-serif24% serif

Open this guide

Bayco

jewelry / Shopify

Bayco homepage on desktop, Shopify luxury jewelry storefront captured at 1440 x 900 Bayco collection: diamond collection on desktop, Shopify luxury jewelry storefront captured at 1440 x 900 Bayco product page on desktop, Shopify luxury jewelry storefront captured at 1440 x 900
Palette
Typography Proza Libre, gothambook 100% sans-serif

Open this guide

Fauré Le Page

leather / Shopify / Paris, 1717

Fauré Le Page homepage on desktop, Shopify luxury leather storefront captured at 1440 x 900 Fauré Le Page collection: all bags on desktop, Shopify luxury leather storefront captured at 1440 x 900 Fauré Le Page product page on desktop, Shopify luxury leather storefront captured at 1440 x 900
Palette
Typography EuclidFlex, BeaufortforLOL 100% sans-serif
Icon set icomoon

Open this guide

Filson

leather goods / Shopify

Filson homepage on desktop, Shopify luxury leather goods storefront captured at 1440 x 900 Filson collection: accessories on desktop, Shopify luxury leather goods storefront captured at 1440 x 900
Palette
Typography FoundersGroteskText, FoundersGroteskXCondensed 100% sans-serif

Open this guide

Greats

footwear / Shopify

Greats homepage on desktop, Shopify luxury footwear storefront captured at 1440 x 900 Greats collection: all low tops on desktop, Shopify luxury footwear storefront captured at 1440 x 900 Greats product page on desktop, Shopify luxury footwear storefront captured at 1440 x 900
Palette
Typography Helvetica Neue, WT Kormelink 100% sans-serif

Open this guide

Kith

fashion

Kith homepage on desktop, not disclosed luxury fashion storefront captured at 1440 x 900 Kith collection: 10 on desktop, not disclosed luxury fashion storefront captured at 1440 x 900 Kith product page on desktop, not disclosed luxury fashion storefront captured at 1440 x 900
Palette
Typography proxima-nova, Georgia 86% sans-serif14% serif

Open this guide

Lancel

leather goods / Shopify

Lancel homepage on desktop, Shopify luxury leather goods storefront captured at 1440 x 900 Lancel collection: all bags. on desktop, Shopify luxury leather goods storefront captured at 1440 x 900 Lancel product page on desktop, Shopify luxury leather goods storefront captured at 1440 x 900
Palette
Typography Poppins, Poppins ExtraBold 100% sans-serif

Open this guide

Oribe

beauty / Shopify

Oribe homepage on desktop, Shopify luxury beauty storefront captured at 1440 x 900 Oribe collection: all products excluding samples on desktop, Shopify luxury beauty storefront captured at 1440 x 900 Oribe product page on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Palette
Typography itc_avant_garde_gothic, adobe_garamond 100% sans-serif

Open this guide

Patou

fashion / Shopify

Patou homepage on desktop, Shopify luxury fashion storefront captured at 1440 x 900 Patou collection: a patou summer in white on desktop, Shopify luxury fashion storefront captured at 1440 x 900 Patou product page on desktop, Shopify luxury fashion storefront captured at 1440 x 900
Palette
Typography brandon-grotesque, Belwe 74% sans-serif26% serif

Open this guide

Shinola

leather goods / Shopify

Shinola homepage on desktop, Shopify luxury leather goods storefront captured at 1440 x 900 Shinola collection: $250 & under on desktop, Shopify luxury leather goods storefront captured at 1440 x 900 Shinola product page on desktop, Shopify luxury leather goods storefront captured at 1440 x 900
Palette
Typography AkzidenzGroteskBE, AkzidenzGroteskMCDN 100% sans-serif

Open this guide

SK-II

beauty / Shopify

SK-II homepage on desktop, Shopify luxury beauty storefront captured at 1440 x 900 SK-II collection: normal on desktop, Shopify luxury beauty storefront captured at 1440 x 900 SK-II product page on desktop, Shopify luxury beauty storefront captured at 1440 x 900
Palette
Typography AvenirNextLTProRegular, AvenirNextLTPro 92% sans-serif8% serif

Open this guide

Wedgwood

home and design / Shopify

Wedgwood homepage on desktop, Shopify luxury home and design storefront captured at 1440 x 900 Wedgwood collection: all tableware on desktop, Shopify luxury home and design storefront captured at 1440 x 900 Wedgwood product page on desktop, Shopify luxury home and design storefront captured at 1440 x 900
Palette
Typography p22-underground-book, p22-underground-medium 100% serif

Open this guide