FW Gallery Showcase: Beauty Industry Website

Gallery Websites

08 March 2019

Beauty industry websites are all about visual presentation of products and services to the audience. All websites dealing with presentation can be created based on galleries. FW Gallery is a powerful tool for visual presentation. There are many different types of beauty industry websites in the marketplace - spa salons, nail bars, skin care shops, hair design studios, and many more. In this article, we will review a professional and good-looking hair salon showcase created with FW Gallery.

The showcase is dedicated to a specific kind of salon services - hair design.  However, you can use any other beauty industry direction instead of the hair design. If you are offering different range of salon services at one place, then each direction should be configured separately, similar to the hair salon showcase.

We will describe each page of the hair salon showcase, its elements, and business idea behind each element. Make sure to understand that to proceed with creating the same website you need to prepare media content and install FW Gallery to your Joomla platform. To learn how to get started with FW Gallery, review Getting started documentation page.  If you have media content and FW Gallery in place, it takes around one hour to build the same website. The overall process for creating such a website looks as follows:

  1. Prepare media content - photos and videos grouped by services.
  2. Install FW Gallery to present your services with a clean design.
  3. Create required galleries to show service categories and different types of products inside them.
  4. Display all images to show services with their pricing, description and related products.
  5. Configure the slideshow module to create the atmosphere for each section and/or promote products/services.
  6. Configure the latest module to show related products for sale.

Check out our Hair salon guide for more details on configuring Hair salon showcase. Let’s, review the showcase page by page in the sections below.

Page with Salon Services Directions

If you are offering different kinds of salon services at one place, you need to create a page with multiple galleries. Each gallery will represent a specific service direction, for example, manicure, cosmetology, hair design, etc. However, if you are offering a specific service, you can skip this step.
We have created a Beauty industry page to showcase different beauty industry directions. The hair salon showcase is realized via galleries view. Each gallery on this page represents a particular direction of the beauty industry.

Salon services directions

Here you can see the following elements:  

  1. Title of the parent gallery. We have created a Beauty industry parent gallery.  If you are creating a website for a beauty salon offering different services at one place, there should be a title of the beauty salon.
  2. Description of the parent gallery. The description conveys general information about gallery content. We have provided general information about the beauty industry directions here. You can insert a mission of your beauty salon here.
  3. Subgallery. In our showcase, the subgallery represents a specific beauty industry direction. However, you can use a subgallery for each particular service type offered at your beauty salon.
  4. Subgallery video preview. Preview cover is an effective promotion tool. We have placed a video on the preview cover of the hair salon gallery to add more dynamics to the page. But there is a possibility to use the image as gallery preview cover.  You can use both types on preview covers for different galleries on one page to make it look more entertaining.
  5. Subgallery title. We have specified the title of the showcase here. You can specify the type of services offered at your salon.  
  6. Subgallery description. We have placed general information about services offered at the hair salon. You can also specify some general information about each service type or its price.

Page with Service Types

This page is a show window of the hair salon. It should be eye-catching and clearly laid out with an informative text message, logo, images, etc. It represents different types of services offered at the hair salon. To show all service types on one page, we use galleries view - one gallery for a specific type of services.

Page with service types

Here you can see the following elements:  

  1. Subgallery title. We have entered the title of the showcase here. You can specify the title of service direction.
  2. Subgallery description.  Our subgallery description includes:
  • Text description. Mission of the hair salon.
  • Image. Logo of the hair salon.
  • Slideshow module. The slideshow of services to ensure effective promotion.

Specify a general description of the services here. You can also place different elements into the description area of the gallery, just as we did.

  1. Subgalleries of the Hair salon subgallery. Each subgallery represents the type of service offered at the hair salon.  Use subgalleries for all types of services you offer for a specific direction.
  2. Subgallery image preview cover. We have used images as preview covers for the types of hair salon services. However, you can set either video or image preview covers for the subgalleries on this page. It depends on your media content and vision.
  3. Subgallery title. We have specified the title of the haircut here. You can specify the type of services offered at your salon.  
  4. Subgalley description.  We have specified an approximate price for a service type here. You can specify what’s included in the services and/or its price.

Page with Hairstyles

This page displays a lookbook of hairstyles done at the hair salon. It is realized via gallery view. The gallery view allows to show beautiful images of the hairstyles. It also provides a reference to the hair care products sold at the hair salon.

Hairstyles lookbook

Here you can see the following elements:

  1. Subgallery title. We have specified the title of the service here.
  2. Suggallery description. We have used this area for service description and its price.
  3. Images included to the gallery. These are the images of hairstyles. You can display the images of looks you have created for your customers.
  4. Images titles. We have specified the titles of the hairstyles and their prices here. You can specify the title of the look achieved using your services.

Page with a Single Hairstyle

On this page, we can see a strong association between a single hairstyle and hair care products sold at the hair salon. The page is implemented via a single image view. Single image view provides a detailed view of the product/service you are offering. It also allows to provide more details about the service/product through the elements outlined below.

  1. Image title. We have specified the title of the hairstyle here. You can specify the title of the look here.
  2. Ratings. Ratings encourage the activity of registered users. We use star ratings, but you can choose between stars, hearts or thumbs.
  3. Image section. This section displays the image of the hairstyle. You can display a look achieved using your services.
  4. Image description. Except for the hairstyle text description, we have added the latest module with hair care products to create a dependable line between the product and service. You can use the description the same way to provide additional information for a single image view.
  5. Slider. The slider allows to access the gallery with other hairstyles right by clicking the image within the slider, without going to the upper level. Use the slider to showcase other looks included to the gallery and simplify navigation.

Creating such a great website with FW Gallery is not difficult at all. If you like the concept of the website, you can create a similar one with your own hands. We have clearly outlined all steps required for creating such a website in our Hair salon guide. Should you have any problems while configuring the website, feel free to ask questions in the comments section at the bottom of the documentation page.