A fully custom mobile-first WordPress theme for Jeanette's hair and beauty salon on Market Street, Atherton — editorial black and gold design, scallop header with dropping brandmark, swipeable services carousel, Google review integration, and live on the same day it was built.
Jeanette runs JS Hair Boutique — a well-established hair, nails and beauty salon based on Market Street in the heart of Atherton. With a 4.8-star Google rating and a loyal local clientele, the salon was thriving — but had no website. Bookings were coming in via phone and Instagram, and Jeanette wanted a proper online presence that reflected the quality of the work and gave new clients something to find when they searched.
The brief was deliberately focused: one page, done fast, done properly. No booking system, no blog, no unnecessary complexity — just a beautiful, fast-loading site that showcased the salon, the team's work, the reviews, and made it easy for anyone to get in touch and book. Every CTA on the site points to either the phone number or Instagram — matching how Jeanette actually runs her business.
The design direction was inspired by high-end international salon sites — dark, editorial, and confident — with the gold from the JS Boutique logo running through every section as the accent colour. The result is a site that feels premium without being inaccessible: warm, welcoming, and very much Jeanette's.
The JS Boutique logo — a gold glitter circle with white script JS monogram — set the tone immediately. The site palette is near-black #0a0a0a, pure white #ffffff, and warm gold #C9A96E, alternating between dark and white sections as you scroll. The typography pairing of Cormorant Garamond (an elegant high-contrast serif for headlines) with Josefin Sans (ultra-light tracked uppercase for labels) gives the site a luxury editorial feel — like a high-fashion magazine translated into a salon website.
The site was initially built desktop-first, then rebuilt from scratch the right way — mobile as the base, scaling up through 640px tablet and 1024px desktop breakpoints using min-width media queries. For a salon whose customers are predominantly searching on their phones ("hair salon Atherton", "gel nails near me"), this approach ensures the primary experience is optimised first. The mobile layout stacks cleanly: full-width hero grid, stacked CTAs, swipeable services carousel, and a 2-col Instagram grid.
On desktop, the navigation features a scallop dip — a CSS pseudo-element that creates a curved black shape dropping 24px below the nav bar, allowing the brandmark logo to sit proud of the header at 96px tall. The brandmark (JS monogram with gold circle) sits centred in this dip, with the nav links on the left and the gold "Call to book" CTA on the right. On mobile the scallop is hidden and the nav simplifies to a centred logo and a gold hamburger menu.
On mobile the four service categories — Hair, Nails, Beauty, and Lashes — are presented as a horizontal swipe carousel using native CSS scroll snapping. Cards are 75vw wide so the edge of the next card peeks into view, naturally communicating that there's more to swipe. Gold dot indicators at the bottom update as you scroll and are tappable to jump to a specific card. On desktop the carousel becomes a standard 4-column grid with larger typography.
With a 4.8-star rating across 21 Google reviews, the social proof is one of the salon's strongest assets. Three of the best reviews — from Raechel, Sian, and Ebony — are featured in a dark review section with italic serif typography, gold stars, and attributed author names. The Instagram section ("People Love to Talk") pulls four work shots from @jshairboutiqueatherton with hover zoom effects, linking directly through to the Instagram profile.
The site was built, reviewed, and live on jsboutique.co.uk in a single session. SSL was installed via Hostinger, Yoast generated the XML sitemap automatically at jsboutique.co.uk/sitemap_index.xml, and Google Search Console was verified and the sitemap submitted on the same day. The homepage URL was manually requested for indexing via GSC's URL Inspection tool — ensuring Google picked it up immediately rather than waiting on a crawl schedule.
Hair Salon Website Design Case Study: This case study details how Mako Digital designed and built a custom WordPress website for JS Hair Boutique, a hair, nails and beauty salon based on Market Street, Atherton, run by Jeanette. The project delivered a fully bespoke mobile-first WordPress theme with a black, white and gold editorial palette, Cormorant Garamond and Josefin Sans typography, a scallop header with dropping brandmark logo, split photo hero grid, animated scrolling ticker, swipeable services carousel with CSS scroll snapping, full-width CTA banner, Google review cards, Instagram grid integration, and a four-column footer.
The project also covered SSL installation via Hostinger, XML sitemap generation via Yoast, Google Search Console verification and sitemap submission, and same-day indexing request. Every Mako Digital project is built without page builders — pure PHP templates with inline CSS — ensuring fast load times, full control over markup, and no plugin bloat. If you're a hair salon, beauty business, or local service provider in Wigan, Atherton, or the wider Greater Manchester area, get in touch.
Whether you're a salon, a consultant, a trades business, or a SaaS startup — we'll build something that positions you properly and gets you found.