1.General
We would like to thank you for choosing Hairsalon WP. Built by the latest version of WordPress and used with WordPress only as well as using the powerful page builder plugin Visual Composer, Hairsalon WP brings to new experiences for users to create awesome beauty, spa & hair salon websites. Now let’s jump to the theme presentation.
1.1.Requirements for HairSalon WP
In this section, we present Recommended PHP configuration limits and How to verify your current PHP limits. But before that, make sure that you’re running the latest version of WordPress, PHP version 7.0 or higher and MySQL version 5.7 or higher.
Recommended PHP configuration limits
One of the issues you may run into is importing demo data fails. The first solution is to increase PHP limits. You can do this by yourself or contact your server provider to ask for the help to increase following PHP limits:
- max_execution_time 3000
- memory_limit 256M
- post_max_size 100M
- upload_max_filesize 81M
How to verify your current PHP limits
Verify your PHP limits in Dashboard >> Hairsalon >> System Status. Or contact the server provider to confirm your current PHP limits are and have them set it up again if neeed.
1.2.What’s Included in Theme Package
When purchasing our theme on Themeforest.net from your Envato account, in Download tab, you can select to download entire theme package (All files & documentation) or just theme file (Installable WordPress file only). The theme package is a zip file containing the following files:
- child-theme: There is a zip file child theme and a readme.txt about some notes about child theme.
- documentation: A link to this documentation.
- hairsalon: The WordPress theme.
2.Installation
2.1.HairSalon WP Installation
You can install the theme by 2 ways: Via WordPress or via FTP.
2.1.1.WordPress Upload
After you downloaded theme packages, exact theme package. The file you use to upload is a zip file named hairsalon. Following these steps below to upload theme via WordPress:
Step 1. Dashboard >> Appearance >> Themes >> Add New.
Step 2. Click Upload Theme button.
Step 3. Browser hairsalon.zip file in your computer and click Install Now button.
Step 4. Active Hairsalon WP.
Step 5. After active the theme, you will see Hairsalon WP notice!. Click “Install and active ThimPress Core to start now! “ to active core of HairSalon WP, move to importing demo data process.
2.1.2.FTP Upload
Following these steps below to upload theme via FTP:
Step 1. Login your FTP account via an FTP software to access your host web server.
Step 2. Unzip hairsalon.zip file.
Step 3. Upload the exacted theme folder hairsalon to wp-content/ themes folder.
Step 4. Active the theme in Dashboard >> Appearance >> Themes.
Step 5. After active the theme, you will see Hairsalon WP notice!. Click “Install and active ThimPress Core to start now! “ to active core of Hairsalon WP, move to importing demo data process.
2.2.Plugins
Hairsalon WP requires Thim Core plugin to work. This plugin have to be actived as soon as you uploaded the theme. As we mentioned in section Upload Theme, afer you upload the theme, there will be a notification message “Install and active ThimPress Core to start now! ” This is Thim Core plugin.
Revolution Slider plugin: Also a required plugin to install before importing demo data. This is a pemium from Thempunch. Revolution Slider plugin is in hairsalon/ inc/ plugins folder. Configure Revolution Slider for Hairsalon WP as below:
Find more information about Revolution Slider here.
WooCommerce plugin: The theme is integrated WooCommerce plugin for online shopping with full options of WooCommerce.
Our Team plugin: A plugin is developed by ourself. It creates Thim: Our Team shortcode which allows you to show off your team members.
Testimonials plugin: Another plugin is developed by ourself. It creates Thim: Testimonials shortcode which allows you to show off your testimonials.
2.3.How To Update The Theme
There are 2 ways to update the theme: Via Envato Toolkit – automatically update and via FTP – manually update. The updating will not loose your changes before but to be safety, you should backup files and database before updating. After updated, re-save customize in Dashboard >> Customize >> click Save & Publish.
2.3.1.Via Envato Toolkit
This is the easiest and fastest method to update theme. Do follow these steps to update by Envato Toolkit.
Step 1. Download Envato WordPress Toolkit here.
Step 2. Install and active the plugin in Dashboard >> Plugins >> Add new.
Step 3. Get your API keys.
Step 4. Dashboard >> Envato Toolkit >> input API keys (Marketplace Username & Secret API Key).
Step 5. After input API keys, there will be “Themes” tab. Now you can update theme automatically.
2.3.2.Via FTP
Sometimes, you may have troubles in updating by Envato Toolkit. So another way is to update via FTP. However, this way will take more time because you have to do step by step manually.
Step 1. Login you Envato account. In Download tab, find Hairsalon WP and choose the Installable WordPress Theme (the WordPress file).
Step 2. Login your server, then go to wp-content/ themes folder and backup your hairsalon theme folder if you want or delete it. The content in your site will not be lost but if you have modified code, the changes will be lost. You have to reapply them after updating over.
Step 3. Exact new file hairsalon.zip you have already downloaded from Themeforest.
Step 4. Drag & drop new theme folder hairsalon to wp-content/ theme to override the existing files.
2.4.Child Theme Installation
A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. If you modify a theme directly and it is updated, then your modifications may be lost. By using a child theme you will ensure that your modifications are preserved.
Hairsalon WP provides an available child theme so that you just need to upload to your site without doing anything else after installed the parent theme successfully. Child theme of Hairsalon WP is a zip file named hairsalon-child packed in child-theme folder after exacted theme package (child-theme/ hairsalon-child). Uploading child theme is similar to uploading parent theme.
Step 1. Appearance >> Themes >> Add New.
Step 2. Click Upload Theme button.
Step 3. Browser child theme hairsalon-child.zip file in child-theme folder and click Install Now button.
Step 4. Active child theme.
If you want to learn more about child theme and how to modify it, you can refer these links:
3.Demo
3.1.How To Import Demo
The easiest way to import our demo content is to use our Thim Core Demo Importer. Our importer will give you all pages and posts, several sample sliders, widgets, Customize Options, assigned pages, and more. This is recommended to do on fresh installs. It will not replace content like posts, pages, portfolio, etc , it will not delete current menus but configure our demo menus, and it will not replace but add sliders. Another method is manually importing.
3.1.1.Import Demo Automatically
Using Thim Core Demo Importer
Step 1 – Navigate to Dashboard > Import Demo.
Step 2 – Select a demo and click Import button.
Step 3 – Select what type of content do you want to import and click Import button.
The import process may take up to 5 minutes. Enjoy a cup of tea while you wait ?.
3.1.2.Import Demo Manually
In the event that your host will not make changes, or you cannot get the demo content to import, you can then import the individual elements manually. Continue reading below to learn how to manually import demo content.
Where To Find Demo Files
There is a “content.xml” file placed in folder name-themeincdatademos, just select a demo you want then find this file for importing demo.
How To Import XML Files
Step 1 – Go to Dashboard >> Tools >> click Import.
Step 2 – On the Import page, select WordPress from the list and install the WordPress Importer Plugin.
Step 3 – Click Choose File, then choose the content.xml file from your desired demo folder. For example, if you would like to install the Demo-02, you would install the content.xml inside the Demo-02 folder.
Step 4 – Once you’ve chosen the correct file, click the Upload File and Import button.
Step 5 – Select admin in the dropdown list, and don’t forget to check the ‘Download and Import File Attachments’ checkbox.
Step 6 – Wait until WordPress is finished importing, then click the Have Fun link to return to your dashboard.
How To Import Theme Options
Go to Dashboard > Demo Importer >> Select a demo that you imported XML file and click Import button >> Select content “Theme Options” and click Import button.
How To Import Slider .ZIPs
Step 1 – Go to Dashboard >> Slider Revolution >> Slider Revolution tab >> click “Import Slider” to import slider you want. (file slider.zip will be placed in the same folder you got the XML file you’ve just imported. Example: name-themeincdatademosdemo-02revslider).
Step 2 – Go to Dashboard >> Pages >> Edit Home page >> Edit Revolution Slider >> select your revolution slider you imported >> click “Save Changes” and “Update” to get the changes.
How To Import Widget Data
Step 1 – Install and activate the Widgets Settings Importer/Exporter plugin developed by Voce Communications.
Step 2 – Go to Dashboard >> Tools >> Widget Settings Import.
Step 3 – Click the Select A File button, and select the widgets_data.json file from the same folder you got the XML and theme option files you’e just imported. Example: name-themeincdatademosdemo-02widget.
Step 4 – Once you’ve selected the correct file, click Show Widgets Settings.
Step 5 – Click the Select All Active Widgets button first, then click the Import Widget Settings button.
Step 6 – You will receive a success message letting you know you’ve successfully imported the widget settings.
3.2.Elements Setup
After importing demo data successfully, some elements setup of the third-party plugins will not be included. You need to complete them.
3.2.1.Setup Contact Form
Once installed and imported demo data, you can manage it in the Dashboard >> Contact >> click Add New to create new contact forms for different parts of your website or edit the existing ones via the Edit option in Contact Forms tab.
How To Setup Contact Forms:
1. Form:
You can put any content of contact form and click button “Save” then a shortcode will be auto created. Just copy this shortcode into post, page, or text widget content that you want.
Demo Hairsalon WordPress theme has 2 style contact forms available for you, just click Edit option in Contact Forms tab then copy and paste below content into contact form:
Contact Page:
[submit “SEND MESSAGE”]
Book Online:
2. Email:
The most important settings you need to define are located in the Mail tab. To learn more about setting email, you can refer document of contact form plugin. Notes that click “Save” after setting.
3.2.2.Setup MailChimp
Setting MailChimp API:
Go to Dashboard >> MailChimp For WP >> MailChimp >> Setting your API Key then click “Save Changes“. To learn how to get API key, you can refer document of MailChimp.
Create MailChimp Form:
Go to Dashboard >> MailChimp For WP >> MailChimp >> Forms:
For more detail, you can read document of MailChimp For WP.
4.Customize
4.1.Header
4.1.1.Top bar
The top bar is located in the top section of the header and give you the option to display the data, top menu and social icons. Hairsalon WordPress theme comes with 3 templates to give you the freedom to customize this section to best fit your needs.
Top Bar Options:
We designed 3 beautiful layouts for the top bar to offer you multiple options for customizing your site. You can choose what items you want to display and how to order them in this section. Please see below how to customize it.
The Top Bar theme panel section contains the following options:
1. Layout: You can decide how to order the top bar items. To do that go to Dashboard >> Appearance >> Customize >> Header and expand the Layout section. Choose one of the three layouts and click on it.
2. Show Top Bar: The theme comes with the Top Bar enabled by default. If you would like to disable it just go to Dashboard >> Appearance >> Customize >> Header and expand the Top Bar section. Turn off the button in the Show Top Bar section.
3. Show Line After Top Bar: This option allows you to enable or disable a line after top bar. To do that go to Dashboard >> Appearance >> Customize >> Header and expand the Top Bar section. Turn on or off to Enable or Disable Line After Top Bar section.
4. Top bar Fonts: You can decide what font size or color of text you want to display on the top bar section. Go to Dashboard >> Appearance >> Customize >> Header and expand the Top Bar section. Select the desired font size and color from Topbar Fonts option.
5. Background Color: Choose whatever color of background color that you want.
After you finished customizing this section click the Save & Publish button.
4.1.3.Sticky Header
Hairsalon WordPress theme supports to has a sticky header option. For improved usability, as the user scrolls down a page, the sticky header activates ensuring the website’s main menu is always accessible. To manage the sticky header, Hairsalon includes several options for styling, as well as visibility options to enable or disable it on various screen sizes.
Sticky Menu Options:
Below is a list of all the available options for the Sticky Menu. These options are located in Dashboard >> Appearance >> Customize >> Header > Sticky Menu.
1. Show Sticky On Scroll: Enable/disable the sticky menu.
2. Select Style: Select style menu when scroll. If select “The same with main menu” then users do not need to configure for main menu when sticky anymore. If select “Custom” then users need to configure color for text, background, text hover for main menu.
After you finished customizing this section click the Save & Publish button.
Sticky Logo Options:
This option gives you the freedom to decide how to display the header logo on scroll. Go to Dashboard >> Appearance >> Customize >> General >> Logo.
1. Sticky Logo: Upload your logo and on your sticky logo will be loaded the header logo. If users want to change sticky logo, they can click “Remove” then “Change File” to replace sticky logo.
2. Retina Logo: This option allows you to add to your sticky menu a mobile logo.
After you finished customizing this section click the Save & Publish button.
4.2.Sidebar
The sidebar is an additional area on the site, where you may place information for your visitors. You might use the sidebar to navigate a site, advertise something, as a way to gain new subscribers and followers, showcase or highlight specific content.
With Hairsalon WordPress theme, there are 2 pre-made area sidebars for Blog page and Shop page. Therefore, you don’t need to create a widget area for them, you can simply add widgets to the pre-made widget area directly.
Sidebar Options:
To configure for widgets in Sidebar areas, go to Dashboard >> Appearance >> Customize >> Sidebars. Users can configure Tittle Fonts, Widget Background Color, Widget Margin Bottom for widgets of sidebar, footer sidebars, siebar shop, footer banner, mega menu widgets.
After you finished customizing this section click the Save & Publish button.
How To Create A Sidebar Area:
Hairsalon WordPress theme allows you to create unlimited amount of sidebars, and these sidebars can be assigned to several areas of the site such as the sidebar, footer sidebars, sidebar shop, footer banner, mega menu widgets. To learn more about widget ready areas, please see the steps below to understand how to create a sidebar.
Step 1 – Navigate to Appearance >> Widgets >> give name of a new sidebar under field “Create new sidebar” click the “Create” button. You can add as many sidebar as you need.
Step 2 – Once created, you’ll see your new sidebar on the right side.
Step 3 – On the left side, you will see all the widgets you can use.
Step 4 – Simply drag and drop the widget you want into your widget section. You can then customize the widget to your liking.
Step 5 – You can rearrange the order of widgets on a widget section by simply dragging the widgets to place.
Step 6 – Make sure you click the ‘Save’ button to save the widgets added to your widget section.
4.2.1.Blog Sidebar
Setting Blog Page:
Blog page is a page to show posts. To select a page is blog page, you need to go to Dashboard >> Setting >> Reading >> select “A static page” >> select page for “Posts page” >> click “Save Changes” button.
Blog Layout Options:
To configure layout for blog page, go to Dashboard >> Appearance >> Customize >> Blogs >> Layouts. This is the place for you to select an alignment for your Blog page – which is place to show posts or for single post. You can choose whether or not to use the sidebar, as well as positioning it in a layout with 1 or 2 columns.
1 – No side bar at all
2 – One sidebar, located on the left
3 – One sidebar, located on the right
4 – Two sidebar, located on the left and right.
After you finished customizing this section click the Save & Publish button.
How To Add Widgets To Blog Sidebar:
Hairsalon includes a wide array of custom widgets in addition to the default widgets WordPress offers. All widgets are found in the Dashboard >> Appearance >> Widgets tab. There are various customization options and fields for each individual widget, and they are all self explanatory. You can put as many widgets as you want inside of Blog Sidebar. Please read below for information on how to add widgets to Blog Sidebar.
Step 1 – Navigate to the Appearance >> Widgets tab to access the list of widgets and widget areas. The left hand side shows all the widgets you can use. The right hand side shows all the different widget areas you can add widgets to, including Blog Sidebar.
Step 2 – Simply drag and drop the widget you’d like to add into Sidebar area on the right side.
Step 3 – To rearrange widgets on a widget section, just drag and drop the widgets into the order you’d like.
Step 4 – When finished, make sure to click the “Save” button in the widget editing box to save your changes.
4.2.2.Shop Sidebar
Setting Shop Page:
Shop page is a page to show products, product categories. To select a page is shop page, you need to go to Dashboard >> WooCommerce >> Settings >> Products tab>> Display sub tab >> select Shop page >> click “Save Changes” button.
Shop Page Layout Options:
To configure layout for shop page, go to Dashboard >> Appearance >> Customize >> WooCommerce >> Layouts. This is the place for you to select an alignment for your Shop page – which is place to show products, product categories. You can choose whether or not to use the sidebar, as well as positioning it in a layout with 1 or 2 columns.
1 – No side bar at all
2 – One sidebar, located on the left
3 – One sidebar, located on the right
4 – Two sidebar, located on the left and right.
After you finished customizing this section click the Save & Publish button.
How To Add Widgets To Shop Sidebar:
Please read below for information on how to add widgets to Shop Sidebar.
Step 1 – Navigate to the Appearance >> Widgets tab to access the list of widgets and widget areas. The left hand side shows all the widgets you can use. The right hand side shows all the different widget areas you can add widgets to, including Shop Sidebar.
Step 2 – Simply drag and drop the widget you’d like to add into Shop Sidebar area on the right side.
Step 3 – To rearrange widgets on a widget section, just drag and drop the widgets into the order you’d like.
Step 4 – When finished, make sure to click the “Save” button in the widget editing box to save your changes.
4.4.Typography
All typography options are located within their specific Customize panel. For example, if you’d like to customize your main menu typography settings, then you would find those options in the Dashboard >> Appearance >> Customize >> Header >> Main Menu tab. If you don’t find the typography settings for a specific feature, it may be because it’s been combined into a header typography option in Dashboard >> Appearance >> Customize >> General >> Typography.
1. Body Typography Options: To customize the Body Font, navigate to the Appearance >> Customize >> General >> Typography >> Body Typography tab where all the Body Typography options such as font family, weight, size, etc. are found.
2. H1 – H6 and Post Title Typography Options: To customize the Headers and Post Titles Font, navigate to the Appearance >> Customize >> General >> Typography >> Heading tab where all the Headers and Post Titles Typography options such as font family, weight, size, etc. are found.
3. Specific Typography Options: To customize specific typography options, such as Main Menu, Top Bar, Page Title, Sliding Bar, Sidebar, navigate to their specific panels to access their different typography options such as font family, weight, size, etc.
Typography Options Setup:
1. Font Family: This option allows you to select a font family to use.
2. Variant: This option allows you to select a font weight and style to use.
3. Subset: This option allows you to select which subset to use.
4. Font Size: This option allows you to set the size of the text on display.
5. Line Height: This option allows you to set the spacing between lines.
6. Letter Spacing: This option allows you to set the spacing between letters.
7. Text Transform: This option allows you to set uppercase or lowercase.
8. Color: This option allows you to set the color of the text.
After you finished customizing this section click the Save & Publish button.
5.Hairsalon WP Shortcodes
Hairsalon WP is built from Visual Composer, a premium powerful plugin. Besides Visual Composer shortcodes, we also created our shortcodes.
1. Thim Our Team
The shortcode is created by Our Team plugin. You have to create members firstly in Dashboard >> Our Team.
2. Thim Services
3. Thim Testimonials
The shortcode is created by Testimonials plugin. You have to create testimonial posts firstly in
Dashboard >> Testimonials.
4. Thim Video
5. Thim Posts
6. Thim Counter Box
6.Support Service
When purchasing our themes, you will receive the free 6 months of support service for the questions and problems regarding the theme. Once the period of your support service is expired, you can extend support to 12 months. But no matter your support service of your product is over or not, you always receive free timelife updates for the theme.
We really care about customer support services and guarantee to response to all support topics within 24 hours on weekday (a bit longer over weekend) since you posted a ticket.
6.1.Knowledge Base & FAQs
Before submitting a ticket on our support forum, please ensure that you meet all the following requirements:
- Refer documentation.
- Read changelog and make sure that your site is running the latest version of Hairsalon WP.
- Disable all 3rd part plugins because sometimes they’re the reasons causing the issues.
- Clear all the caches after changing any settings in your site.
And check out our Knowledge Base and FAQs below to find out the answer for your question.
How to get license key of included premium plugins (Visual Composer, Revolution Slider)?
You can use included premium plugins such as Visual Composer, Revolution Slider for free when you purchase and download our themes from ThemeForest. So you don’t have to buy your own license to use these plugins.
However, as a note from that plugin’s author, you (theme buyer) can not active directly get support from them. But please don’t worry if you see warning messages about the plugin license activation or update required. You always get the latest version of Visual Composer, Revolution Slider when we update the theme. We will test these plugins before send it to you to make sure there are no conflicts with our theme.
Will customization be lost if I update theme?
No, your customization in Customize panel will not be lost if you update theme. Only the coding modification in original theme’s files will be lost and that’s why you should deploy in child theme.
Slider not found on home page
After imported demo data but revolution slider on home page is missing, that’s because you haven’t configure revolution slider for home page. Check Revolution Slider settings in Plugin section.
Customize can not be saved
When you make some settings in Customize panel but the changes can not be saved. There are some common following reasons:
- It’s due to your server error “500 Internal Server”. Read here to know about the error and how to fix it.
- User of server (e.g Apache, Nginx) can’t write file. Let chmod file style.css and config.less (all in the theme directory) is 777.
- Your PHP version is outdated. PHP version 7.0 or higher is recommended.
There are also some sticky tickets we posted in purchased theme support forum. Please take a look these tickets. In case you can not find out the answer, don’t hestitate to let us know by submitting a ticket.
6.2.Support forum
Regarding the problems with code customizations or 3rd party plugins, we are not able to provide free support service. We just can provide you customization service at a fee.
How to ask for support
Step 1. Click here to create an account on our website. You will need the Themeforest purchase code of your product.
Step 2. Go to support forum of your product and create your own topic. Here is support forum of Hairsalon WP.