Barber Shop Theme for Ghost: List Your Services, Take Bookings and Show Your Barbers

The Barber Shop theme is a dark, classic Ectobuilder theme for barbers, salons and studios running their site on Ghost. Its homepage opens with a full-width photo of the shop and a Book a chair button, then shows your services with prices, a photo gallery, your barbers, client reviews, your latest posts and a map with your opening hours.

This guide walks through what most shops set up first:

• Set up your services and prices, with a Book button on each one.
• Take bookings from every Book button.
• Show the shop and your barbers with your own photos.
• Add reviews, your address and hours, with a map.
• Set up your menu in the menu editor.
• Check your SEO with Site audit before you launch.

To follow along, open the theme from the Ectobuilder theme gallery and connect your Ghost site under Settings → Integrations → Ghost Admin API.

Want this theme for your site? Open the Barber Shop theme in Ectobuilder and make it yours. Starting is free, and you only pay if you’re happy with the design.

Start with the Barber Shop theme

Part 1: Set up your services and prices

The Services & prices section lists what you offer, one row per service: a name, a short description, how long it takes, the price and a Book button. The sample has a classic haircut for $40, haircut and beard for $60, a beard trim for $25 and a hot towel shave for $45. Under the list, a Walk-ins welcome box tells people they can drop in.

Step 1: Change the services

1. Double-click a service name, description, time or price to type over it.
2. To add a service, click a row and use Items in the panel on the right to duplicate it, then type over the copy. The arrows move it up or down, and the cross removes it.
3. The sample list shows Haircut & beard twice, both with a gold outline. Turn one into your own service, such as a kids' cut or a skin fade, or remove it.

Step 2: Keep the walk-in note honest

Edit the Walk-ins welcome text to match how your shop works. If you only take appointments, say so here. It saves people a wasted trip and saves you a phone call.

Prices change? Edit them and click Deploy. It takes about a minute.

Part 2: Take bookings from every Book button

The theme has a lot of booking buttons: Book a chair in the header and on the hero photo, and a Book button on every service. In the gallery copy they point at /book/, a page your site doesn't have yet. Here is how to send them all to your booking page.

Step 1: Get a booking page

Use the booking tool you already have. Barbers often use Square Appointments, Booksy or Fresha; Calendly or Cal.com work well for a one-chair shop. Copy the address of your booking page.

Step 2: Add it in Ectobuilder

Open Settings → Integrations → Booking page and paste the address.

Step 3: Point the buttons at it

Every link to #booking opens your booking page. Click each Book button, and Book a chair on the hero, and set its link to #booking. Calendly, Cal.com, Google Calendar, TidyCal and Acuity open in a window over your site; tools that don't allow that open in a new tab.

Step 4: Deploy and test

Click Deploy and try a button on your live site, on your phone too: most people book from their phone. To take bookings from Google Search and Maps as well, read How to add online booking to your Ghost site.

Part 3: Show the shop and your barbers

People choose a barber by what the place looks like and who will cut their hair. Two sections cover that: Inside the shop, a gallery of five photos, and The hands behind the chairs, with a photo, name and specialty for each barber.

Step 1: Replace the gallery photos

1. Click a photo, then Replace in the Image panel to upload your own. Use your real chairs, your real team at work and the front of the shop.
2. Fill in each photo's Description too. It helps people using screen readers, and it helps your photos show up in image search.
3. Change the line under the heading, Leather chairs, good music and a strong coffee while you wait, to what makes your shop yours.

To let visitors open photos full size, set Click to enlarge to All under Settings → Features. The lightbox guide has the details.

Step 2: Add your barbers

1. Double-click a name or specialty to type over it. A short specialty, like Skin fades or Beards & razor work, helps clients pick the right person.
2. Replace each portrait with Replace. Photos in the same style and light look best side by side.
3. More or fewer barbers? Click a card and use Items to duplicate or remove it.

Part 4: Add reviews, your address and hours

Word from the chair shows three short reviews with the client's name and how long they've been coming. Replace the samples with real reviews from Google or from regulars who are happy to be quoted, with their first name and last initial.

Further down, Visit the shop has your address, opening hours, phone and email next to a map.

1. Click the map. Under Map in the panel, type your address in Address. Your shop's name works too, if Google Maps knows it.
2. Double-click the address, hours, phone and email to type yours. The phone number is a link, so people can tap it to call.
3. Keep the hours exactly as they are on your Google Business profile. People notice when the two don't match.

Part 5: Set up your menu

The header shows Services, Barbers, Journal and Visit, plus the Book a chair button. The footer has Services, Privacy and Visit. These links live in Ghost, not in the design, and Ectobuilder lets you edit them right beside your page.

Step 1: Open the Menu panel

1. Add a Ghost staff token once, under Settings → Integrations → Ghost staff token. It must belong to an Administrator or the site's Owner.
2. Click Menu in the left rail. Switch between Main menu (the header) and Footer menu.

Step 2: Add, rename and reorder links

• Click Add a link, give it a label, then type an address or click Pick to choose one of your pages, posts or tags.
• Click a link to rename it. Drag it by its handle to move it.
• Drag a link slightly to the right to put it in a dropdown under the link above it.
• Click the square next to Icon to give a link an icon.
• In the Footer menu, set Layout to Columns and use Add column for footer columns with headings.

For a barber shop, keep the main menu short: services, your team, where to find you. A Prices link with a scissors icon, or a Gift cards link, are good additions. If you have two locations, put both under a Visit dropdown.

Step 3: Deploy

There's no separate save. Your menu changes go to Ghost when you click Deploy, together with the rest of your design. Undo changes brings back what Ghost has. The full walkthrough is in How to edit your Ghost menu in Ectobuilder.

Part 6: Check your SEO with Site audit

Before you tell your regulars about the new site, check it the way Google sees it. Most people find a barber by searching for one nearby, so the basics matter.

Step 1: Run the audit

1. Connect your Ghost site under Settings → Integrations → Ghost Admin API, if you haven't yet.
2. Open Settings → Site audit and click Run audit. It reads every public page, about a minute for 100 pages.

Step 2: Work through the list

Issues come in two groups. To fix costs you visibility now: missing descriptions, cut-off titles, broken links. To improve can wait a little. Each row has a button that takes you where the fix belongs, and Auto fix where Ectobuilder can do it for you. Auto fix writes meta descriptions, SEO titles and tag descriptions from your own text, and shows you every suggestion first. Edit or untick any of them, then click Apply.

For a local shop, look out for these in particular:

• Site description. The line under your name in search results. Mention what you do and where, such as Barber shop in East Austin: fades, beard trims and hot towel shaves.
• Sharing image. What shows when someone sends your site in a message. A photo of the shop works well.
• Page descriptions. Auto fix writes them for your posts and pages, so each one gets its own line in search results.
• Broken links. Moved from Squarespace or Wix? Old addresses still in Google lead nowhere. Send each one to the right page under Settings → Redirects.

Run it again after you fix things: the second list is usually short. More in Ghost SEO audit: find and fix search problems.

Ready to build yours? Everything in this guide works on your own copy of the Barber Shop theme. Start free, connect your Ghost site when you’re ready, and only pay if you like the result.

Start free

Next steps

• Change the colors and fonts under Style. The theme uses a gold accent on a dark background, and both apply to every page at once.
• The footer asks visitors to subscribe for Grooming tips and the occasional offer. Each address becomes a member of your Ghost site. Set up your newsletter in Ghost Admin under Settings → Newsletters, then send with Publish and email.
• Use the blog (Journal in the menu) for new styles, product picks and team news. Posts appear on the homepage under From the journal, and they help people find you in search.
• Have a sign or logo with its own lettering? You can upload your own font files and use them across the site.