From Instagram messages to a shop
Elle & Her sells jewellery, bags and accessories, and took its orders through Instagram messages. This shop lets a customer do the whole thing on the site: browse, fill a cart, give a delivery address, and pay in cash when the parcel arrives. No card, no account.
The pictures on this page show demo products, each stamped “DEMO”. The brand adds its own catalogue from the admin.
A look taken from the logo
Every colour in the shop is read off the brand's logo, and only those colours are available, so pages stay consistent.
The bow's pink is the brand's signature, but white text on it is too faint to read. So pink only decorates, and every button is cocoa.
An order, start to finish
Six screens from the first visit to the order number.
-
Home
The brand, its three categories, the pieces it wants to feature, and how ordering works in four steps.
-
Shop
The catalogue by category, with search, sorting and an “available only” filter.
-
Product
Photos, and options such as colour or finish. Each option can have its own price, stock and photo. The delivery fee and the cash-on-delivery note are on the page.
-
Cart
The cart stays in the browser between visits and is priced again by the server each time it is shown. When delivery becomes free from an amount, it says how much is left to add.
-
Checkout
Name, phone, city and address. Cash on delivery is the only payment method, already selected. No card details are asked for.
-
Confirmation
An order number, the items, the delivery details and the amount to pay on delivery. The page says clearly that the order is not paid yet.
Orders that cannot go wrong
With cash on delivery, a wrong order costs a wasted trip. Most of the work in this shop is in the moment the customer presses the button.
Press the button as many times as you like. The shop saves one order, however often it is pressed or retried.
The price the customer saw
Prices, stock and the delivery fee are checked again when the order is sent. If anything changed, nothing is saved and the customer sees what changed first.
No overselling
Stock is locked while an order is being placed, so two customers cannot buy the same last piece.
Past orders never change
Each order keeps its products, options, prices and delivery fee as they were. Editing the catalogue later does not touch it.
No public order links
Order numbers are random, and the confirmation page opens only in the browser that placed the order.
The staff side
A private admin replaces the Instagram inbox.
-
Overview
Orders by stage, the cash still to collect, and a checklist of what is left to do before opening the shop.
-
Orders
Filter by status, or search by order number, name or phone.
-
One order
An order moves from new to confirmed, preparing, out for delivery and delivered. Cash is recorded separately when it is collected. The history shows who did what, and a delivery slip can be printed.
-
Products
Names and descriptions in each language, options with their stock, and photos. Photos are resized, converted to a lighter format, and stripped of their location data.
Confirmed over WhatsApp
Staff can send the customer a WhatsApp message with two buttons. The answer updates the order by itself: confirming moves it forward, cancelling puts the stock back.
Try the two buttons in the message.
Bonjour Cliente, merci pour votre commande EH-K7M3QX chez Elle & Her 🎀
Montant à payer à la livraison : 333 DH.
Merci de confirmer votre commande pour que nous la préparions.
- Order placed
- WhatsApp confirmation sent
Made for the phone first
The shop was designed for the phone first. Every page works at phone width, in all three languages.
Built with
- Shop
- Next.js 16, React 19, TypeScript, Tailwind CSS 4
- Data
- PostgreSQL 17 with Drizzle ORM
- Photos
- sharp, stored on the server or in an S3-compatible bucket
- Messages
- WhatsApp Cloud API
- Tests
- Vitest, with order tests run against a real PostgreSQL database
- Runs on
- Docker with automatic HTTPS, or a hosted platform