Template · Fashion store + admin
A fashion store that gets the size right, and the admin to run it.
Hemline is a ready-made front-end for a clothing brand: a fast storefront with a three-step size advisor, and an admin dashboard where the team packs orders, restocks by size and sees which pieces run small.
- Storefront + Admin
- React · TypeScript · GSAP
- 16 pages
- Light + dark
Full source code in a private GitHub repo. Prices on request.
- pages: 8 storefront, 8 admin
- 16pages: 8 storefront, 8 admin
- runtime dependencies
- 3runtime dependencies
- sample orders over 60 days
- 782sample orders over 60 days
- data file where a backend plugs in
- 1data file where a backend plugs in
The reel · 24 seconds
See Hemline in motion.
Every screen in the reel is the real template, from the storefront to the dark-mode admin.
- 01Explore
- 02Product page
- 03Size advisor
- 04Lookbook
- 05Phone layouts
- 06Admin overview
- 07Orders
- 08Campaigns
- 09Dark mode
The screens
The shop and the admin, side by side.
Case study · The idea
Fashion stores lose money on the wrong size.
When a shopper has to guess their size, some of those orders come back. Each return costs shipping, handling and often the sale itself.
Shoppers also want speed. They browse on a phone, between other things, and leave when a page makes them wait or think too hard.
And the team behind the store needs one place to pack orders, restock the sizes that sell out and see which pieces fit badly. I designed Hemline around those three problems.
For shoppers
How I designed it for shoppers
The size advisor takes three steps: height and weight, body shape, then a size with the reasons behind it. It remembers the answer, so every product in the shop shows which size is yours.
The bag shows how far the shopper is from free delivery and takes discount codes. The lookbook adds a whole outfit to the bag in one tap, already in the right sizes.
Everything is quick to load. Motion is used to explain what changed, never to decorate, and it switches off for anyone who prefers reduced motion.
- Three-step size advisor that remembers your fit
- "Your size" marked across the shop
- Free-delivery meter and discount codes in the bag
- Lookbook adds a whole look in your size
For the team
How I designed it for the team
The dashboard and the website live in one app, with a switch between them. The overview shows a live order feed and revenue against the previous period.
Orders move from new to packed to courier, and returns sit in the same flow. Stock is shown as a grid by size, so a missing medium is obvious at a glance.
Fit insights show which pieces run small or large. When one does, the team can tell the size advisor to lean a size for that piece.
- Dashboard / Website switch in one app
- Orders → packed → courier, with returns
- Stock by size grid
- Fit insights that tune the size advisor
How it's built
How it's built
One design-token system drives both light and dark themes. Motion runs through a small set of GSAP helpers, so it stays consistent.
Dropdowns, menus and drawers are custom and keyboard friendly, with focus kept inside open panels. A ⌘K search finds products, orders, customers, codes and returns.
All data goes through one file, store.ts, so a real backend plugs in at one place. The build is static and deploys to Vercel, Netlify or Cloudflare, with a security headers file included.
- Design tokens for light and dark
- GSAP motion helpers
- Custom dropdowns, drawers and modals with focus trap
- ⌘K search and toasts with undo
- One data layer file: store.ts
- Static build, security headers included
What's inside
16 pages, ready to use.
Storefront8 pages
Explore
Banners, departments, new this week
Shop
Filters, with your size marked
Product
Gallery, colours, size advisor
Lookbook
Add a whole look in your size
Saved
Pieces kept for later
Bag
Free-delivery meter, codes
Checkout
Delivery and payment steps
Account
Orders and your saved fit
Admin8 pages
Overview
Live orders, revenue vs last period
Orders
New, packed, courier, returns
Products
Stock by size
Customers
Customer list and orders
Campaigns
Discount codes and banners
Fit insights
Which pieces run small
Settings
Store settings
Support
Customer support
Under the hood
Small, clean and easy to extend.
Tech stack
- React 18
- TypeScript
- Vite 5
- GSAP 3
- Hand-written CSS with design tokens
- 3 runtime dependencies
Static build. Deploys to Vercel, Netlify or Cloudflare, with a security headers file included.
Sample data, so every screen works
- 24 products in 4 departments
- 42 customers
- 782 orders over 60 days
- 115 returns
- 5 discount codes
- 4 shop banners
All of it lives behind store.ts. Swap that file for API calls and the whole app runs on real data.
Get the template
The full source code, ready to make yours.
What you get
Front-end template
The full source code, ready to brand and connect to your own backend.
Price on request
- Full source in a private GitHub repo
- Storefront and admin, 16 pages
- Sample data so every screen works
- README with setup and structure
- Light and dark themes
- Phone, tablet and desktop layouts
Prices on request, agreed per project. Tell me how you'll use the template and I'll confirm the price and licence before you pay.
Do I need a backend?
Not to try it. The template runs on sample data, so every page works out of the box. To take real orders you need a backend, and all data already goes through one file, store.ts, so it connects in one place. I can build it for you on request.
Can I use it for client projects?
Yes. Tell me how you plan to use it when you message me, and I'll confirm the licence for your case before you buy.
What do I get?
Access to a private GitHub repo with the full source: 8 storefront pages, 8 admin pages, sample data, light and dark themes, a security headers file and a README.
Can you match my brand?
Yes. Colours, fonts and spacing all come from one set of design tokens, so a new brand is applied in one place. I can do it for you, along with copy and photos.
Want Hemline for your brand? Let's talk.
Full source code in a private GitHub repo. I reply within one working day. Need something bigger? See the custom systems and mobile apps I've built.
Templates
Get the template for your brand.
Tell me which template you want and a little about your brand. I reply within one working day with the price and the licence.
What happens next
- The price and licence for how you'll use it
- Private GitHub repo access once you buy
- Help matching it to your brand, if you want it