Salon is a beauty, hair & spa WordPress theme. It lets you display your services and personnel in a stylish yet organized manner. The theme provides you with space for your photo galleries so that your work is extensively and beautifully demonstrated.
Try Salon for free!
Want to try a theme before deciding? We completely understand! That's why we provide you with a 15 day trial period. Check out the theme without commitment.
Create an account
We install everything
You try it for free
Setting up your theme
This theme has the WooCommerce plugin pre-installed for you. If it is deactivated, you can go under Plugins > WooCommerce and activate it. Also go under WooCommerce > Settings and in the Products tab set the image sizes that best fit your shop under the Product Image Sizes section, in case you need different values than the theme sets by default.
1) Creating basic pages
Start by adding the first pages you are going to need. Go to Pages > Add New and create the following:
- Home. This will serve as your homepage. Assign to it the Frontpage Template page template from the Page attributes panel and publish the page. In the Front Page Options panel that appears below the main text editor, you can select a particular category of slider items to display on the homepage’s slider. If left empty, all slider items will be displayed.
- Blog. This will be your posts page. Just create and publish a blank default page named “Blog” (or whatever you wish to name it) without adding anything else.
- Contact. Here you can place your contact form, which you will create using the Contact Form 7 plugin.
- Galleries. In this page you will list your features. Apply to it the Galleries Listing template. From the Galleries Listing Options panel (that appears once the template is set), select the number of columns you want the template to have, toggle masonry and/or isotope filtering and set the number of items displayed per page. Publish the page.
- Videos. In this page you will list your features. Apply to it the Video Listing template. From the Video Listing Options panel that appears once the template is set, select the number of columns you want the template to have, toggle masonry and/or isotope filtering and set the number of items displayed per page. Publish the page.
- Services. In this page you will list your services. Apply to it the Service Listing template. From the Service Listing Options panel that appears once the template is set, select the number of columns you want the template to have, toggle masonry and/or isotope filtering and set the number of items displayed per page. Publish the page.
- Team. In this page you will list your services. Apply to it the Team Listing template. From the Team Listing Options panel that appears once the template is set, select the number of columns you want the template to have, toggle masonry and/or isotope filtering and set the number of items displayed per page. Finally, publish the page.
(TIP: all page titles serve as examples, you can name your pages according to your needs.)
Once the pages are created, navigate to Settings > Reading. Set the Home page to be your static frontpage and the Blog page to be your posts page, as demonstrated in the image below.
2) Populating your blog
To add new posts to your blog, go to Posts > Add new, title your post and enter the content in the editor. Upload a featured image by clicking Set featured image on the Featured Image panel, add a category and/or tag to the post, from the respective panels and publish the post by clicking Publish.
3) Adding Slideshow items
To add items to your homepage’s slider go to Slideshow > Add New, set a title for the slider item and upload a featured image (which will be the image displayed on the homepage, images for the slider should be at least 1920×850). In the Slide Options panel you can (optionally) set a URL to which the user will be redirected when clicking the slide button. Change the button’s text or use a URL to a video that will be displayed on the slider item. Finally, publish the slider item. Slider speed and auto-slide functionality can be adjusted under CSSIgniter settings > Homepage options.
4) Adding Video items
To add a video item go to Videos > Add New, set the item’s title and apply a featured image. Next, add text in the editor and move to the Video Settings panel below. In the Details tab you can set the date the video was created and add the video’s URL in the designated box. In the Information tab, you can create fields with information related to the video, such as length, cost etc. Finally in the Sidebar tab you can select whether you want the post’s sidebar to the left or right. Once you are done, publish the item.
5) Adding Gallery items
To add a gallery item go to Galleries > Add New, set the item’s title and apply a featured image. Add any text in the editor and move to the Gallery Settings panel below. Here you can toggle the image captions, upload your images and select the number of columns you want the gallery item to have. For information on how to upload the images check the Additional Info section of this document. Once you are done, publish the item.
6) Adding Team Members
To add a team member go to Team Members > Add New, set the person’s name as a title and apply a featured image. Add text in the editor and move to the Team Settings panel below. In the Information tab, you can create fields with information related to the person, such as job title, training etc. Finally in the Sidebar tab you can select whether you want the post’s sidebar to be on the left or right side. Once you are done, publish the item.
7) Adding Services
To add a service item go to Services > Add New, set the item’s title and apply a featured image. Add any text in the editor and move to the Service Settings panel below. In the Information tab you can set the service’s price and create fields with information related to it, such as cost, session length etc. Finally in the Sidebar tab you can select whether you want the post’s sidebar to be on the left or right side. Once you are done, publish the item.
8) Adding products
(Optional – Only if you choose to use WooCommerce)
In order to add your products, check the detailed guide provided by WooThemes here.
9) Creating your menu
Now that your content is in place, you will need a menu. Go to Appearance > Menus, check the pages you want on your menu and add them. Give your menu a name and save it. You will need to set your menu as Main menu. This can be done either by checking the Main menu box in Menu Settings just below your menu items in Menu Structure, or by going to the Manage Locations tab and selecting the menu you just created. The theme also features a secondary menu which appears just above the main one. The secondary menu can be created and set just like the main one.
(TIP: for more info on creating and managing menus, please read the WordPress Menu User Guide here)
10) Setting up your homepage
The homepage of Salon consists slideshow items and a widget area, in order to provide maximum flexibility on the content displayed. The widget area can be accessed under Appearance > Widgets > Front Page Widgets.
Duplicating the demo’s layout
The homepage on the demo has three slideshow items and a few widgets. These are: CI Callout, CI Text with some introductory text, CI Items displaying three service posts in a three column layout. One CI Split Content displays a single page, one CI Items displays three team members on a three column layout, one CI Items displays three galleries on a three column layout, one CI Items displays six products on a three column layout and finally, a CI Items that displays two video items in a two column layout.
11) Changing Footer text
12) Change the blog’s layout
Under CSSIgniter Settings > Blog Options you can select whether you want a blog with a sidebar or a full width one and the number of columns it will have if you choose the full width option.
13) eCommerce Options
Under CSSIgniter Settings > eCommerce Options you can customize the number of columns and products on shop pages, enable or disable related products and more.
The theme features several custom widgets made to help you properly display your content. They can be found under Appearance > Widgets
To create a gallery using the gallery management system, simply follow these steps:
- On the Gallery Information panel click the Add Images button.
- To upload your images, drag & drop them in the Edit Gallery window that will pop-up or select Add to Gallery in order to select already uploaded images. Once you are done, click the Update Gallery button on the lower right side.
- Your Gallery Information panel will look like this:
- You can re-arrange the order of images by drag & drop.
- If you wish to remove an image from the gallery, hover your mouse over it and click the X as shown below:
- By checking the Randomize order box your gallery images will appear in a random order that will change on every page refresh.
- When you are done, publish the gallery item.
If you need to add images after the gallery’s creation just follow the same procedure.
- CSSIgniter Shortcodes You can use this shortcode plugin to create a variety of layouts and elements on your site. Instructions can be found here.
- Socials Ignited Use this plugin to create a widget that links to all your social profiles. You can also customize it with icons and add new social networks. A guide can be found here.
- Contact Form 7 Use this plugin to create a contact form. Copy the shortcode it gives you and paste it in an empty page.
- WP Instagram Widget: Use this plugin to help you display your Instagram feed in any of the theme’s sidebars.
The recommended image sizes for the Salon theme are:
- Post thumbnail: 750x500px
- Blog thumbnail: 750x370px
- Site header: 1920x160px
- Homepage slider: 1920x850px
- Square thumbs (widgets, listing pages etc): 750x750px
- Masonry thumbs: 750px in width, not restricted in height
- Blog full width listing thumbs: 1140x380px
Please keep in mind that any image uploaded should be larger than 750px for best results. Generally for each section the images should be at least larger or equal than their recommended width.