Haircare

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Haircare is a website template for hair salons, barbershops and beauty studios, built on Bootstrap 5. The layout is responsive and mobile-ready, the menu sticks to the top as you scroll, and the page headers scroll with a parallax effect. There are seven pages: home, services, gallery, about, blog, blog post and contact.

The home page has a full-height hero, men’s and women’s services, a services menu, an appointment booking form, a team slider, a work gallery with a lightbox, price lists and a client testimonials slider. The inner pages add a services page with the services menu, the booking form and the prices, a gallery page, an about page with the salon’s story, a video, the team and testimonials, a blog with a sidebar (search, categories, recent posts and tags), a blog post with comments and a comment form, and a contact page with the address, phone, email, opening hours, a working contact form and a map that loads on click. Haircare gives you a ready-made site to present a salon, its stylists and its prices, and to take bookings.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used Bootstrap 4.3.1 and jQuery 3.2.1), compiled from Sass together with the theme and the design’s original proportions, and plain JavaScript with no jQuery. Swiper 14 replaces Owl Carousel on the team and testimonial sliders, PhotoSwipe replaces Magnific Popup in the gallery, a video dialog plays the about page video, Jarallax replaces Stellar on the page headers, a small built-in module replaces Waypoints and animate.css, the browser’s own date and time fields replace the jQuery date and time pickers, and the unused AOS, Scrollax, animateNumber and easing scripts are gone. Lucide SVG icons and a 1 KB social-logo subset replace Open Iconic, Ionicons, icomoon and Flaticon (the Twitter bird is now the X logo), with the logo’s scissors badge and the beard service icon redrawn in Lucide’s style. npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter pages: the home page went from 4.6 MB and 59 requests to 1.5 MB and 41 requests, and the contact page from 3.1 MB and 51 requests to 606 KB and 14 requests. Every photo has an AVIF version with the JPEG as the fallback, the gallery and blog photos have real dimensions and lazy loading, each page preloads its hero photo, and the full-screen preloader is gone. The download is now 4.3 MB (it was 5.3 MB).
• No third-party requests: Poppins and Barlow Condensed are self-hosted, the contact page map is an OpenStreetMap map that loads only when a visitor clicks “Show map”, the about page video is a stock barbershop clip that plays in a dialog from YouTube’s privacy-enhanced player only after a click, and a Google Analytics 4 snippet stays commented out until you add your own ID. Before, every page loaded its web fonts from Google Fonts and the Google Maps script, although no page had a map.
• Working forms: the booking form on the home and services pages sends through includes/appointment.php, the contact form through includes/send-email.php and the blog comment form through includes/comment.php, all with validation, a spam trap and an in-page message, and the blog sidebar search opens the blog. Before, the booking form posted nowhere and neither it nor the comment form had field names, so nothing could be sent. The booking form now has email and phone fields and the browser’s own date and time fields.
• Accessibility: a skip link and a main landmark on every page, one h1 per page, names on icon-only links and buttons, labelled form fields, a visible focus ring and WCAG AA text contrast: a darker gold for gold text on the cream backgrounds, dark text on the gold buttons (white text on the gold was 2.8:1), darker body text, and a darker shade behind the text on the hero, page title, service and gallery photos.
• Fixed: the contact page was a copy of the blog page and is now a real contact page with contact details, opening hours, a contact form and a map that loads on click; the gallery captions linked to a page that does not exist; the testimonial slider’s dots no longer overlap the client’s name; placeholder links that pointed to “#” now go to the matching pages; and every page has its own title and description, with Open Graph tags, a favicon and hair salon structured data.
• Demo content: salon copy replaces placeholder text in the services, prices, team, gallery captions and footer, the blog has six hair-care posts with matching categories and tags, five different client testimonials replace five identical ones, and fictional names and contact details are used throughout. Two photos that showed brand signs are replaced with Unsplash photos, and small brand marks in eight others are blurred.