FW Gallery
Photo & video gallery with tags, ratings and front-end management.
Demo Website Product Page

Hair salon

Overview and structure

This guide is a detailed reference for creating a professional and stylish hair salon website with FW Gallery. Feast your eyes on the showcase we created - https://fwgallery.fastw3b.net/show-cases/hair-salon.html.

It allows for:

  • Clear and eye-catching presentation of your services.
  • Creating a catalog of products and services.
  • Uploading photos from your PC, Facebook or Google galleries.

We will describe the process for creating such a website in the following order:

Create and configure galleries

Galleries are a great tool for representing your products and services as a catalog. FW Gallery allows to upload photos to the galleries from your Google, Facebook account or PC.

First, let’s create and configure galleries.

  1. Create a parent Hair salon gallery. The parent gallery serves as a folder for other galleries. To create a parent gallery, review Galleries tutorial.

  1. Create subgalleries for the parent gallery. The suggalleries represent the services offered by the hair salon. In order to create a subgallery for the Hair salon parent gallery, choose Hair salon in the Parent dropdown. As a result, the gallery being created will become a subgallery for the Hair salon gallery. Create as many subgalleries as you need. In our showcase, we have created the following subgalleries:
  • Wedding hairstyle
  • Loose waves
  • Men’s hairstyle
  • Loose volume
  • Pixie haircuts
  • Up-do’s

After you are done, your screen should look similar to the screenshot below.

Once the parent gallery and its subgalleries are created, let’s add images to each gallery.

  1. Upload images to each subgallery you have created:
  • To upload images via single image upload/batch upload, review Images tutorial.

  • To upload images from your Google account, review Google images import tutorial.

  • To upload images from your Facebook account, review Facebook import tutorial.

As soon as the images are uploaded, you can see them in Files section.

  1. Display Hair salon gallery. To display the Hair salon gallery, repeat the steps below:
  • Create Hair salon menu item.

  • Select Hair salon gallery in the Select gallery dropdown.

  • Assign the Single gallery layout to the menu item. The layout allows to display galleries and subgalleries on your website. For more details on how to create and display a menu item, review our documentation page

  • Configure Single gallery layout. While configuring Single gallery layout options, you can set the number of galleries being displayed, gallery design, social sharing, and many more. Set layout settings as it is shown in the screenshot below:

As a result, the menu item has been created and configured. Go to the front-end to view how it is displayed.

Set preview covers

When it comes to creating a beauty industry website, preview covers are a must-have feature. A gallery preview cover is a great tool for promoting your products and services. FW Gallery allows to display images and videos as preview covers for your galleries.

  1. Set a video cover for your parent Hair salon gallery.

  2. Set image covers for the sub galleries of the Hair salon gallery.

To learn how to set image/video preview covers, review our documentation page.

Create hair care products catalog

Along with a wide range of services, you can sell hair care products. FW Gallery allows to showcase your products in a spectacular Latest module or via Content plugin. See the pictures below:

Latest module

Content plugin

First, let’s learn how to display your hair care products in Latest module.

  1. Create Hair care products gallery. To learn how to create a gallery, review our documentation page.

  2. Create Hair care products latest module and configure it as is shown in the screenshot below.

  1. Assign the module to the Hair salon menu item.

For more details about latest module configuration and settings, visit our documentation page.

  1. Associate the module with a single service. In other words, you need to place the module into the image/gallery description. To learn how to do this, follow the steps below:
  • Locate file/gallery settings.

  • Enter the following tag into the description area: {loadposition Unique}. The second word of the tag is the title of the position you have assigned in the step 2. Your screen should look similar to the screenshot below.

  1. Don’t forget to save your configuration. As a result, the latest module with hair care products will appear within the description area of the service creating a dependable line between the service and products.

You can also display the Hair care products gallery via FW Gallery Content plugin:

  1. Enable FW Gallery Content plugin.

  2. Locate gallery/file settings.

  3. Insert a gallery via FW Gallery button in the editor area.

To learn how to insert a gallery via FW Gallery Content plugin, review our documentation page.

Now, let’s learn how to enable the slider underneath the image.

  1. Locate Hair salon menu item layout settings following Menus=>All Menus=>Hair salon direction.

  2. Locate Options tab and set Hide gallery files slider option as Yes. Go to the front-end to see the result.

Add a 'Buy in salon' button

You can add a Buy in salon button to Hair care product page. We use Bootstrap framework for creating responsive site elements. In order to create the Buy in salon button similar to the screenshot below, you need to assign a predefined Bootstrap class to the link via the Edit link section in the editor. To learn how to do this, do the following:

  1. Select the class of the outline button in Bootstrap library - https://v4-alpha.getbootstrap.com/components/buttons/#outline-buttons

  1. Copy the required class.

  2. Go to the file settings and enter “Buy in salon” text line into the editor area.

  3. Click link button.

  1. Choose Edit link from the dropdown.

  2. Locate the Link info tab.

  3. Locate URL textbox and enter the URL of the page you want to link to.

  4. Go to the Advanced tab.

  5. Locate Stylesheet classes textbox and enter bootstrap class you have already copied.

  6. Click OK button.

  1. Go to the front-end to check the result.

Create an advertising banner

FW Gallery allows to create an advertising banner for the services you are offering at your hair salon, see the showcase - https://fastw3b.net/fwgallery/index.php/en/show-cases/hair-salon/services.html.

To create such a beautifully designed slideshow for your hair salon banner, make sure to do the following.

  1. Create Hair care products slideshow module and configure it as it is shown in the screenshot below.

  1. Assign the module to the Hair salon menu item.

For more details about slideshow module configuration and settings, visit our documentation page.

  1. Associate the module with the Hair salon page, where we need it to be displayed on. In other words, you need to place the module into the Hair salon gallery description. To learn how to do this, follow the steps below:
  • Locate Hair salon gallery settings.

  • Enter the following tag into the description area: {loadposition my}. The second word of the tag is the name of the position you have assigned in the step 2. Your screen should look similar to the screenshot below.

As a result, the slideshow module will appear on top of the Hair salon page.