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.

3. 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.
4. 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.
5. Subgallery title. We have specified the title of the haircut here. You can specify the type of services offered at your salon.  
6. 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.

In this version, we have improved the product with several new features and a set of updates and bug fixes. Video gallery cover has become one of the most prominent features of this release. Let’s review its benefits and all other changes below:

• Gallery video cover with preview.  Earlier you could use only images as preview covers for your galleries, now you can also use videos as preview covers. The video is automatically played on hovering. Video preview cover allows to animate your galleries enabling your customers to quickly scan through the gallery content. This feature is particularly helpful for businesses using catalogs and portfolios to showcase their products and services.

Documentation reference: Galleries.

• Beauty design. A new Beauty design with new fonts and green/spa colors is a sound solution for beauty industry websites. Now you have more options for styling your galleries.
• Option defining the length of gallery/image preview description. Now you can set the length of the gallery/image preview description. This feature allows to save screen space and improve web page usability. It is particularly helpful when a gallery/image description is too long.

Documentation reference: Displaying settings.

• Lightbox for all designs. Lightbox allows to view images on the same page without leaving it. Thus, the user receives information faster and doesn’t have to take extra actions. Now Lightbox is available for all designs - Palaroids, Pinterest, Classis, Default, and Masonry.
• New full image preview lightbox script. The previous lightbox script cropped images and had glitches on responsive views. We have replaced the script to ensure better visual presentation and good user experience.
• Removed formatting from gallery preview description.In order to improve the readability of the gallery preview image, we have removed formatting from gallery preview description. Now the description on the gallery preview image is displayed as plain text.
• Default gallery cover parameter. We have added this parameter to make it possible for you to choose a gallery cover from the images that are already present within the gallery. Thus, you don’t need to upload it manually every time you need to set a gallery cover.

Documentation reference: Galleries.

• Slideshow/latest module display via file/gallery description.We have added the ability to insert a slideshow or latest module into the image description. This feature is particularly helpful if you need to provide additional information to the image/gallery.  
• Download button for a menu item. This feature allows for more flexibility. For example, if you use FW Gallery not as a photo gallery, but as a tool to promote your products and services, you might not need a download button on all pages. So now, if you don’t need the download button to be present for all galleries, you can easily disable it where it is needed.
• Files counter for a menu item.If the number of files is not required to be displayed for a particular menu item, you can disable/enable the parameter on the menu item level.
• Safari optimization. We have optimized the component for Safari to ensure smooth Safari experience.
• Watermark display. We have resolved the problem with watermark text display over the images.
• Comments display.It was impossible to disable comments via menu item settings. Now you can work with comments on both levels -  menu item and default gallery configuration.
• Latest module optimization for a lightbox. We have fixed the problem with Latest module layouts display within the lightbox. Now all layouts work fine with lightbox.
• Links display in gallery preview description.We have resolved the issue with incorrect links display within the gallery preview description.
• Show backlink option for default gallery settings. It was impossible to set show backlink option via default gallery settings. Now it is available in default gallery settings.
• Bellow gallery description display.We have fixed the problem with the below description option. Now you can place a description underneath the gallery.
• Gallery preview display in Masonry. We have aligned the gallery preview image for Masonry format.
• Files ordering.We have added files ordering buttons in the files section.
• Language files update. We have updated language files to fix some missing translations.  

Get familiar with FW Gallery documentation to find more information about our product. Please use the comments section at the bottom of each documentation page to comment and suggest improvements that will make the product experience better.