Barcut

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Barcut is a website template for barber shops, hair salons and men’s grooming studios, built on Bootstrap 5, with a clean, professional design. The layout is responsive and mobile-ready, and the header stays fixed at the top of the screen as you scroll. There are ten pages: home, about, barbers, services, pricing, gallery, blog, blog post, elements and contact.

The home page has a photo slider hero with an intro video, an about section, services, style tabs, the team, testimonials with avatar thumbnails, pricing packages and the latest blog posts. The inner pages add a team page, a services page, six pricing packages, a photo gallery with a lightbox, a blog with categories, pagination and a sidebar, a blog post with comments and a comment form, an elements page with typography, buttons, lists, a table and form elements, and a contact page with a working contact form and a map that loads on click. Barcut gives you a ready-made site to present your shop, your barbers and your prices.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used Bootstrap 4.1.3 and jQuery), compiled from Sass together with the theme and the original Bootstrap 4 proportions, and plain JavaScript with no jQuery. Swiper 14 replaces Owl Carousel on the hero and testimonial sliders (the testimonial avatars still switch slides), PhotoSwipe replaces Magnific Popup in the gallery, the intro video opens in a built-in dialog, a CSS masonry grid replaces Isotope, native selects replace Nice Select and the style tabs are built-in accessible tabs. jQuery Sticky, parallax.js, a date picker and an availability calendar, which loaded on every page with nothing to run on, are gone. Lucide SVG icons and a 1.3 KB social-logo subset replace Linearicons and Font Awesome 4. npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter pages: the home page went from 6.7 MB and 60 requests to 1.0 MB and 36 requests, and the contact page from 2.3 MB and 44 requests to 434 KB and 11 requests. Every photo has an AVIF version with the JPEG or PNG as the fallback, real dimensions and lazy loading below the first screen, the oversized hero and background photos are re-encoded, and unused images and plugin files are gone. The download went from 11.4 MB to 3.9 MB.
• No third-party requests: Playfair Display and Roboto are self-hosted, the contact map is an OpenStreetMap map (no API key needed) that loads only when a visitor clicks “Show map”, the intro video loads 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, a script from cdnjs and the Google Maps script with a sample key.
• Working forms: the contact form, the blog comment form, the footer and sidebar newsletter forms and the elements sample form send through php/send-email.php, with validation, a spam trap and an in-page message. Before, the contact form’s mailer read fields the form did not have and put the visitor’s address into the mail headers unchecked, the comment form had no action and a link for a button, and the sidebar newsletter was a field without a form.
• Accessibility: a skip link and a main landmark on every page, one h1 per page with no skipped heading levels (pages had five to seven h1s), labelled form fields, names on icon-only links and buttons, menu dropdowns, style tabs and gallery overlays that work from the keyboard, visible focus rings, sliders that pause on hover and focus and under reduced motion, and WCAG AA text contrast, with a darker gold for gold text on white, dark text on the gold buttons and sidebar headings, darker body and meta greys and darker shades behind white text on photos.
• Fixed: the hero slider could never move (it had no arrows, no dots and autoplay was off); it now changes slides every five seconds and pauses on hover. The pricing “Order Now” buttons and the about “Learn More” button were not links at all (they now open the contact and about pages), links that pointed to “#” now go to posts, categories, the gallery or the contact page, the favicon was missing on every page, and a broken image on the blog page is gone.
• Demo content: barber shop copy instead of lorem ipsum and off-topic filler text, fictional barbers, clients, blog authors, commenters, address, phone and email, a stock barber video for “Watch Intro Video”, and photos that showed brand markings are replaced with photos without brand markings; the blog and elements pages use the template’s barber photos instead of unrelated stock.