Salon Website: Free WordPress Template & Instructions

Clients need a salon website to find directions, compare prices and make an appointment. It doesn’t need to be complicated, but it does need to run smoothly, and do a good job of representing your brand.

That’s what inspired us to create Fit Web Themes: Salon Edition. It’s the most cost effective way to create a modern salon website that’s simple, fast and has all the features customers love to use. As a WordPress theme, our template can be easily customized with your own branding. It just takes a few clicks—no coding required.

This guide will explain how to create a setup a WordPress salon website in just 30 minutes. If you have any questions along the way, you can submit a question in our user forum.

Fit Web Themes: Salon Edition

Our website template has all the must-have salon website features, including photo galleries, booking buttons, and mobile functionality. At the same time, you’ll get full control over the style and format of your website. You can adjust colors, fonts, and add/remove sections from a simple menu. There’s no programming required.

To use Fit Web Themes: Salon Edition you’ll need a WordPress account. If you have one already, you can skip to installation instructions below. Otherwise, we’ll show you how to set up a WordPress account next. Using Bluehost, you get a WordPress website, custom domain (www.YourSite.com) and business email, all starting at just $2.95/month.

Step 1: Get Your Domain & Hosting

To create a business WordPress website, you first need a hosting plan. We recommend Bluehost because they combine everything into one package (website, domain AND professional email accounts) starting at just $2.95/month.

To get started, simply follow the link and click “Get Started Now.” The first step is to choose your hosting package. Their basic plan is just $2.95/month when you sign up for 36 months. It should be sufficient for most single-location salons. The “plus” plan is really only necessary if you need to create more than one website, or plan on using more than 5 business email accounts.

The next step is to choose your website domain— e.g. www.YourSalon.com. While Bluehost lets you choose between different extensions, such as .net or .biz, most salons opt for a .com name, since its the most popular and well known. If your top choice is taken, consider adding an extra word, like your city name, or check out our top 25 domain name ideas for additional tips. You can also enter ideas below to see what’s available:

Lastly, you’ll enter your payment information and finalize your order. Keep in mind, in order to get the best pricing, you do need to pay for 3 years upfront. However, you can also cancel within 30 days for a full refund.

Step 2: Set Up WordPress

Once you’re signed up for Bluehost, you’ll be prompted to set a password and confirm your email address. After this, you’ll be routed to the Bluehost welcome page. There’s 3 quick settings to change here:

• Click “My Sites” on the left panel, then “Manage Site.”
• Find the “Settings” panel. In the box that says “Site URL,” change the temporary URL to the one you just purchased. This ensures your new domain is linked up with your new site.
• Now click the “Security” tab. In the box that says “Free SSL Certificate” click enable. This will change your website to an “https,” which is better for search engine rankings.

Once you’re finished, click “Log in to WordPress” and we’ll start designing your site.

Step 3: Install & Customize Fit Web Themes

Clicking “Log in to WordPress” will bring you to the WordPress dashboard. This is where you’ll design your website pages, make edits, add blog posts, etc. Before getting started, however, you need to get Fit Web Themes: Salon Edition installed on your site. To do this, hover over “Appearance” on the left menu and click “Themes.”

Now click “Upload” in the top-right corner:

Now click the button “Upload Theme” at the top of the screen. This should open a prompt to upload a file. Download Fit Web Themes: Salon Edition here, then upload this entire .ZIP file onto WordPress. Once loaded, click “Install Now.”

Once finished, click “activate.” You’ll now have our theme installed on your site. The next step is to start designing!

Customization Menu

Designing your website is as easy as adding your business information and uploading your photos (or using our provided rights-free images). If you like, you can also make simple adjustments to the color scheme and format of the site.

Fit Web Themes: Salon Edition was designed to be as user-friendly as possible. Yet, it’s also highly customizable: You have full control over colors, fonts, and page formatting, all managed from the easy-to-use customization menu.

To get started, hover over “Appearances” on the left-hand toolbar, then click “Customize.”

The customization menu is divided further into subsections, like Header and Social Links. Click on the buttons below for instructions on each section— and remember, you can also ask a question in our user forum.

Click Box For Instructions

Header

Design the header panel to your website. You have the option of uploading a logo for your salon, or simply entering your business name as text (you’ll be able to adjust the font later.) Below that, input your street address and phone number.If you still need a logo, check out designers on Fiverr. You can hire a designer for as little as $5.

By default, the header color is transparent black. This allows you to easily read the white text, while still making your background image visible behind it. If you want to change the header or text color, simply click the box and use the sliders to adjust it.

Adjust colors easily using the color selector (middle) and transparency slider (far right).

Social Links

Add social media icons to the top-right corner of your website. Simply paste your page link under the appropriate field and the icon will automatically appear. There’s also an option to add an email address with a mail icon.If you haven’t created social media accounts yet, learn about the benefits of Facebook, Yelp, and Instagram for business. This is especially important for a salon or spa business, where visual content can make or break your business.

Social icons appear on the right side of the header.

Design

Choose your website’s font and color themes. By default, the site uses Comfortaa for headers, and Open Sans font for the body. However, you can select different fonts and preview them instantly to the right.

Body font is used in paragraph sections like “About” or “Hours.” Your headings font appears in section titles, and sub-headings is used for buttons, and your main navigation menu.

Body Fonts	Header Fonts
Open Sans Montserrat Lora Playfair Display Comfortaa Raleway Arimo	Anton Roboto Slab Fjalla One Francois One Vidaloka Shrikhand Volkhov Satisfy Dancing Script

Default Background Color will adjust the background color for certain sections and pages on your website. The reason it doesn’t change the background color everywhere is because some sections (like Location and Gallery) have their own color controls.

If you want to use the same background color across your whole website, simply choose your color, then locate the 6-digit HEX color code. Write this down, or copy it to your clipboard, then apply it anywhere else you want to use this color.

Copy/paste this code to re-use colors.

Section Order

Choose which sections you want to appear on your homepage, and in what order. Simply click and drag a section to re-arrange. Or, click on the eyeball icon to remove a section from your website.

Click the eyeball to hide a section, or drag to rearrange.

Here’s a rundown of the 6 homepage sections available for this theme:

• Hero. Features a title, background photo and 2 (optional) buttons. This should almost always appear at the top of your website.
• Gallery. Adds a simple image gallery to your homepage.
• About. A place to add a short bio, list of services or price sheet for your salon.
• Location. Displays your address, hours, and contact information, plus an embedded Google Map.
• Footer. Add text, links, or images to the bottom of your website.
• Email Capture. An optional mailing list signup form powered by Mailchimp.

Section: Hero

The hero section features a large banner image with bold, capitalized text, and 2 (optional) buttons underneath. Think of this as the main “headline” of your website. It should capture your visitors’ attention, provide a simple summary of your business, and give visitors a easy way to proceed via the 2 buttons.To add an image, you can select one of the 3 default images we’ve provided (brushes, haircut, or towels), or upload your own. If you don’t have a high quality image of your business just yet, you can find more royalty-free photos on Pixabay, Unsplash, or Pexels.

Once a photo is uploaded, pay careful attention to your color scheme. If your photo is dark, make sure your text white or brightly colored— or if your photo is fairly bright, use dark colored text instead. The “Background Color” allows you to further lighten or darken your image by adding a transparent layer over the image.

Comparison: The left side is a raw image. The right side has a 50% transparent black layer.

For example, above I added a transparent black layer over my image (right side). Notice how much easier it is to read the text and button compared to the original image (left side).

Adding Buttons

To add buttons, simply enter button text, and a URL where the button should lead. Also choose a color and button style that matches your website theme.

To change the button font, head back to the Design menu on the previous page. Change the “subheadings font” to adjust the button text font.

Section: Location

A simple menu to add essential business information, including your address, hours of operation, and contact information.This section also features an embedded Google Maps widget that shows your address as a pin on the map. To set this up, you’ll need a Google or Gmail account (which you can create for free), then follow these instructions from Google to get an API key.

Section: Gallery

A simple gallery to display photos of your best work, or shots of your salon/spa interior. You can upload as many photos as you like. The photos will appear as thumbnails, and visitors can click to zoom-in.By default, your photo gallery appears just below the hero since this is a prime spot to display what your business offers. If you wish to move or remove the gallery, you can do by heading back, then clicking Section Order.

A photo gallery with 1 row, 7 columns and no title.

Layout Columns changes the number of columns in your photo gallery. You can use it to increase or decrease image sizes. For example, changing it to 3 will feature larger rows of 3 images each.

Section: About

Add a paragraph description of your salon/spa. You can also use this section to list your services or prices. We’ve provided a rich text editor so you can add links, photos, or change the style of your font.

By default, the about section has a black background with white text to match the gallery right above it. If you want to change this, simply click the Background Color and Text Color boxes.

Section: Email Capture

This is an optional section for Mailchimp users who want to add an email newsletter signup form on their website. Simply write a header and subheader, then add your Mailchimp API Key and List ID. This will make an email signup field appear below.As with all the sections, you can move email capture to wherever it fits best on your website. If email marketing is a major priority for your salon, consider moving it just below your hero to maximize signups. Simply head to Section Order and drag email capture above the other sections.

If haven’t started email marketing yet but are interested in trying it out, Mailchimp has a free version for small businesses. Click here to sign up, or learn more about what they offer in our email marketing software buyer’s guide.

Section: Footer

Like the header, your footer appears on every page of your website. It’s typically used to post website credits, photo credits, and copyright information. You can also add up to 6 accolades, which are small icons that represent awards, achievements, or press links for your business.

Accolades can include salon awards, certifications, press links, social media links and more.

Simply click “Add new Accolade,” and upload an image. Ideally this should be a transparent PNG, so it doesn’t clash with the background color of your website. You also have the option to link a URL, e.g. the article that mentions your business.

To find these logos, just use Google Images. Set the color to “transparent” on the top menu bar.

Navigation Menus

Create your main navigation menu, which will appear on the website header.Click “Create new Menu” and name it “Main Navigation” or something similar. Check the box that says “Navigation Menu” and click Next.

Now Click “Add Items.” This opens a menu where you can decide which links to add to your navigation bar. Because you’ve only created 1 page so far (Home) there won’t be too many options. Just click “Home” for now— you can add more later.

Once you’ve finished making edits on the customization menu, click the gear icon up top and select “Save Draft.” Then click the X to head back to the main dashboard. You can come back to the customization menu at any time to keep working.

Step 4: Add More Pages To Your Website

While not always necessary, many salons like to add additional pages to their website, such as About, Services, or Our Story. It gives you the opportunity to add extra information without making your homepage too crowded. If you have a long menu of services or products for sale, this is particularly good way to display your prices.

To create a page, head back to your dashboard and click “Pages” on the left toolbar. Then click “Add New.”

For each page you create, there are 3 key elements to complete:

1. Page Title. Add at the very top.
2. Page Slug. The URL of the page you’re creating; add just below the title.
3. Page Contents. Add in the large box below. To include a photo, click “Add Media.”

Once finished, you can preview your page, save it as a draft, or just click “Publish” to go live. You can always make edits later, even after it’s published.

Remember to add additional pages to your navigation menu, so they’ll be linked at the top of your website!

Create a Blog For Your Salon Website

If you want to create a blog to post news updates, share style tips, promote special events, etc. WordPress is an excellent platform for this.

Simply head to “Posts” on the right left menu bar, and click “Add New.” Just like creating a new page, you’ll add a title, write text and add images/media content.

I recommend saving each blog posts under the same category name, like “Blog” or “Updates.” This way, adding your blog to your main navigation bar is easy. Just click “Add Items” > “Categories” > “Blog”

If you wanted to create 2 different blogs (e.g. one for style tips, another for news and updates), then simply use 2 different categories. Then you can link to them separately on your navigation bar.

Step 5: Publish Your Site

When you’re ready to go live, click the Bluehost button on the left menu:

Now locate the box that says “Launch Your Site” and click “Launch.”

This will make your website go live. You should now be able to type your URL and access your site. If you’re getting an error, head back to Step 2 and confirm that you entered the right URL under the “settings” panel.

The Bottom Line

In addition to your website and domain name, Bluehost also provides 5 professional email accounts that use your domain (you@yoursalon.com). To set this up, check out our guide on creating a business email account.

As a new website owner, you’ll also want to learn how to rank high on Google searches. Be sure to also check our marketing section for even more tips in tricks on improving website traffic and getting more customers through the door.

If you’re still having trouble setting up your website, or have any remaining questions about how to use Bluehost or WordPress, you can also drop us a line on our user forum.