> ## Content Index > Fetch the complete content index at: https://www.ectobuilder.com/llms.txt > Use this file to discover other available public pages before exploring further. # Barber Shop Theme for Ghost: List Your Services, Take Bookings and Show Your Barbers - URL: https://www.ectobuilder.com/blog/barber-shop-ghost-theme/ - Published: 2026-10-24T20:31:21.000Z - Updated: 2026-10-24T20:31:21.000Z - Description: A step-by-step guide to the Barber Shop theme for Ghost: list your services and prices, send every Book button to your booking page, show the shop and your barbers, add reviews and a map, set up your menu and check your SEO. - Author: Michal Wlosik - Tags: Guides, Themes, Local business 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](#part-1-set-up-your-services-and-prices), with a Book button on each one. - [Take bookings](#part-2-take-bookings-from-every-book-button) from every Book button. - [Show the shop and your barbers](#part-3-show-the-shop-and-your-barbers) with your own photos. - [Add reviews, your address and hours](#part-4-add-reviews-your-address-and-hours), with a map. - [Set up your menu](#part-5-set-up-your-menu) in the menu editor. - [Check your SEO with Site audit](#part-6-check-your-seo-with-site-audit) before you launch. To follow along, open the theme from the [Ectobuilder theme gallery](https://www.ectobuilder.com/themes/) and connect your Ghost site under Settings → Integrations → Ghost Admin API. [![CTA Image](https://www.ectobuilder.com/content/images/size/w256h256/2026/06/Ecto_builder_logo_sq_small.png)](https://editor.ectobuilder.com/start/0b95ca27-83e8-41f9-a699-162274cffe16?ref=ectobuilder.com) ****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 ](https://editor.ectobuilder.com/start/0b95ca27-83e8-41f9-a699-162274cffe16?ref=ectobuilder.com) ![The Barber Shop theme homepage: a dark barbershop with brick walls, mirrors and black leather chairs behind the headline Sharp cuts. Straight razors. No rush., with a gold Book a chair button](https://www.ectobuilder.com/content/images/2026/10/image-mvmuibn8.webp) The homepage hero, with a Book a chair button on the photo and in the header. ## 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. ![The Services and prices section: rows for Classic haircut, Haircut and beard, Beard trim and shape and Hot towel shave, each with a duration, a price and a Book button, and a Walk-ins welcome box underneath](https://www.ectobuilder.com/content/images/2026/10/image-mvmuj5wd.webp) Services & prices: name, length, price and a Book button on every row. ### 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. ![Ectobuilder Settings, Integrations, Booking page address field](https://www.ectobuilder.com/content/images/2026/10/image-mvmrzyys.webp) Settings → Integrations → Booking page. ### 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](https://www.ectobuilder.com/blog/add-booking-to-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. ![The Inside the shop gallery: one large photo of a brown leather barber chair and four smaller ones of a clipper cut, a shelf of grooming products, a beard trim with scissors and a long row of chairs](https://www.ectobuilder.com/content/images/2026/10/image-mvmuj7db.webp) Inside the shop: one large photo and four smaller ones. ### 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](https://www.ectobuilder.com/blog/ghost-lightbox/) has the details. ![The hands behind the chairs: four barbers in black and white and color portraits, Jack Miller, founder and classic cuts; Tyler Brooks, skin fades; Marcus Hayes, beards and razor work; Cole Bennett, texture and longer styles](https://www.ectobuilder.com/content/images/2026/10/image-mvmuin26.webp) The team section: one card per barber. ### 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. ![Word from the chair: three short reviews from Ryan T., client since 2021, Chris M., regular, and Derek W., client since 2023](https://www.ectobuilder.com/content/images/2026/10/image-mvmuioad.webp) Three reviews, each with a name and how long they have been a client. Further down, **Visit the shop** has your address, opening hours, phone and email next to a map. ![Visit the shop: address 123 Main Street, Austin, opening hours, phone and email on the left, and a Google map of the area on the right](https://www.ectobuilder.com/content/images/2026/10/image-mvmuipae.webp) Visit the shop: the details on the left, the map on the right. 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. ![The Ectobuilder editor with the Menu panel open: Home, About, Blog with Guides under it, Contact and Pricing, several with icons; the page's header shows the same links with their icons](https://www.ectobuilder.com/content/images/2026/10/image-mvms0fmw.webp) The Menu panel beside the page. Icons show in the header as you pick them. ### 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](https://www.ectobuilder.com/blog/edit-ghost-menu/). ## 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. ![Ectobuilder Settings, Site audit results: counts for To fix, To improve and Passed, with an Auto fix button and a list of issues, each with a manual button and an Auto fix button](https://www.ectobuilder.com/content/images/2026/10/image-mvmsfvay.webp) Settings → Site audit: what to fix, what to improve, and Auto fix. Example data. ### 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](https://www.ectobuilder.com/blog/ghost-seo-audit/). [![CTA Image](https://www.ectobuilder.com/content/images/size/w256h256/2026/06/Ecto_builder_logo_sq_small.png)](https://editor.ectobuilder.com/start/0b95ca27-83e8-41f9-a699-162274cffe16?ref=ectobuilder.com) ****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 ](https://editor.ectobuilder.com/start/0b95ca27-83e8-41f9-a699-162274cffe16?ref=ectobuilder.com) ## 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](https://www.ectobuilder.com/blog/ghost-custom-fonts/) and use them across the site.