44 colourways
Eight body colours and a choice of sleeves. Shown the usual way, that's a dropdown nobody opens or a grid nobody finishes.
Fashion · Varsity jackets · Made in England
Forty-four jackets, one fit.
College Classics is the ready-to-wear line of an English workshop that has made custom varsity jackets since 2011. We designed the store in Figma and built it on Shopify in 28 days: an editorial look that sells a £245 jacket without a sales call, and a colourway system that keeps 44 combinations easy to browse.
- Client
- College Classics
- Scope
- E-commerce design, Shopify development
- Timeline
- 28 days
- Live store
- View the store ↗
The challenge
A maker since 2011. A shop from day one.
For fourteen years the workshop made varsity jackets to order for universities, clubs and companies. Every sale started with a conversation. College Classics is the first jacket with their own name in the collar: finished, boxed and ready to ship.
That meant a store that had to do the selling on its own. It needed to show 44 colourways without turning into a wall of thumbnails, explain why a jacket costs £245, and feel like a heritage brand on the first visit, not a new shop nobody has heard of.
- Sell online with no sales call
- Make 44 colourways easy to browse
- Earn trust for a brand-new name
A price to explain
£245 is fair for 24oz melton and full-grain leather. But the quality doesn't show in a thumbnail, so the page has to explain it.
From custom to ready-made
Fourteen years of reputation sat with the custom business. The new brand needed to borrow that trust without confusing the two.
How we worked
28 days, three milestones, one launch.
The project ran in three fixed milestones. Each one ended with something the client could open, click through and approve before the next began.
Direction
Heritage menswear, not streetwear
We agreed on a look before drawing a single page: cream and black, a heavy slab serif and calm product photography, closer to a classic outfitter than a hype drop.
- Mood and references
- Store structure review
- Type and colour
Milestone 1
Homepage in Figma
Hero, colourway grid, featured jacket, reviews, "why it costs", the story and the service strip. Desktop and mobile.
- Homepage desktop
- Homepage mobile
- Component set
Milestone 2
Inner pages in Figma
Collection with colour filters, product page with swatches and size guide, our story, delivery and returns, FAQ.
- Collection and filters
- Product page
- Content pages
Milestone 3
Shopify build and QA
A custom theme built from the Figma files, 44 products linked by colour, then a full QA pass on real phones before launch.
- Custom Shopify theme
- Swatches and filters
- 16-point QA fix list
At a glance
0Colourways, each its own productLinked by swatches
0 daysFrom first design to launchFigma and Shopify
0Sizes, from XXS to 6XLOne size guide for all
0Fixes found and closed in QABefore the store went live
The idea
Pick a body, pick a sleeve.
Every colourway is a separate Shopify product with its own photos, URL and stock. On the page they act like one: swatches jump between them instantly, and the collection can be filtered by body or sleeve colour. Shoppers get a simple choice, Google gets 44 indexable pages.
Try it. This is a simplified version of the swatch picker.
The Varsity JacketRoyal / White£245 · one fit, every colour
Body
Sleeves
Colourways
The whole range, on one screen.
Right under the hero, every colourway sits in a single swatch grid, split body and sleeve like the real jacket. One tap opens that exact product, so people who know what they want skip the browsing.
Product
Built like the ones they don't make any more.
The featured jacket gets a full spec table: body, sleeves, lining, trims and where it's made. One price for all 44 colourways, and delivery, returns and sizes repeated right under the buttons.
Price
Why it costs what it costs.
Instead of discount banners, three plain cards explain the price: the 24oz wool, the full-grain leather and the in-house making. Things that never show in a photo, said out loud.
Story
Fourteen years of borrowed trust.
A new name needs a history. The story block tells how the workshop spent fourteen years making jackets for other people, next to the bear mascot drawn for the brand, so the shop feels established from day one.
Mobile
Most orders start on a phone.
Product photo first, headline second, two full-width buttons and the key facts in one row. The swatch grid scrolls sideways, so all 44 colourways stay one thumb away.
Key decisions
Choices that sell a £245 jacket without a salesperson.
How do you show 44 colourways?
The usual answer
One product with a long colour dropdown.
What we did
44 products linked by swatches, plus body and sleeve colour filters on the collection.
How do you defend the price?
The usual answer
Sale badges and countdown timers.
What we did
One honest price and a section that explains the wool, the leather and the making.
What should it look like?
The usual answer
A stock streetwear theme with loud banners.
What we did
An editorial layout in cream and black, a heavy slab serif and lots of air around the product.
How does a new brand earn trust?
The usual answer
Launch and wait for reviews.
What we did
Lead with the 14-year maker story, Google reviews and "made in England" in the first screen.
The result
A heritage store on day one.
28 daysfrom the first Figma frame to a live Shopify store
44 pagesone indexable product page for every colourway
One priceexplained on the page instead of discounted
Editableproducts, colours and content managed in Shopify by the team
What College Classics
walked away with
- A store design in Figma, desktop and mobile
- A custom Shopify theme built from it
- 44 colourway products linked by swatches
- Body and sleeve colour filters
- A product page with spec table and size guide
- Story, delivery, returns and FAQ pages
- A 16-point QA pass before launch
- Newsletter sign-up for the next drop
Your project next