Software Tutorials

How to: Add Tabs to Your Product Pages Monday, 8 July 2013  |  Cate

Skill Level: Beginner - Intermediate

Product Tabs allow you to make your product pages less cluttered as each tab can contain its own unique piece of text, images or form. This can help to make your pages become clean, easy to read and much more inviting, which, of course, leads to better conversion rates. Tabs can easily be assigned to the product pages on your Bluepark site by following our guide below.

Configuration

Firstly, you will need to set the position and basic look of the tab in Configuration > Product.
NB. These settings will only work for non-customised product HTML

Product Tabs Position

The position of the tabs on the product page has four standard options which are as follows:

1. Above Page Content – The product tabs will sit above any information you have entered into the Page Content field in the Product Editor and across the width of the page underneath the product images.
2. Below Page Content - The product tabs will sit below any information you have entered into the Page Content field in the Product Editor and across the width of the page underneath the product images.
3. Above Additional Content – The product tabs will sit above any information you have entered into the Additional Content field in the Product Editor and to the side of product images underneath the pricing information.
4. Below Additional Content – The product tabs will sit below any information you have entered into the Additional Content field in the Product Editor and to the side of product images underneath the pricing information.

Tabs Border

This option allows you to set the styling of the border around the tab content area and, again, there are four standard options.

Whole tab curved – The entire tab area will have a border around it with curved corners.	Whole tab straight – The entire tab area will have a border around it with straight corners. This does not include the tab headers.
Top and bottom only – Only the top and bottom of the tab area will have a border. The side borders are removed.	Top only – Only the top of the tab area will have a border. The side and bottom borders are removed.

Tabs Fixed Height

In this field you can set a fixed height for your tabs and then the content will fit into it using a scroll bar on the right. This is helpful when setting the product tabs to the side of the image so that the page doesn’t jump about when switching between tab content of varying heights.

Leaving this field blank will allow the tabs to fit around the content dynamically and will adjust the content area height accordingly. This is better used when the product tabs sit across the page, below the image.

Create Your Product Tabs

Next you need to create the tabs you want to appear on the product pages. Go to Catalogue > Product Tabs and click on the Create New  icon to create your first tab.

The name set within the Tab Title field is what will appear within the tab header on the website. The Reference field can then be used as an internal reference if you plan to create more than one tab with the same name.

The Body field is the actual content of the tab and this will appear on any product you add this tab to. If you wanted to add the same piece of information to each product you would type it directly into the Body field. For instance, it could be text which contains delivery or returns information.

Alternatively, if you want to have a tab with different information on each product, i.e. ingredients or care instructions you can use product variables (small pieces of code that automatically pull through pieces of Product information) to populate the content of the tab with dynamic content.

For instance, adding the variable %product_content will populate the tab with text from the Page Content field of each product within the Product Editor.  This would be set up as follows:

Product tab set up

Product tab content in Product Editor

This will produce the following on the product page

The most common variables are listed below the Body field in the Product Tabs section and a full list can be viewed by clicking on the ‘View Variable List’ link underneath. The Custom Data variables can be used to add in extra information into your product tabs and correspond to the Custom Data fields within the Channels tab in the Product Editor.

Assigning the tabs to the product page

Within the Product Manager go to the product you wish to add your tab to, then go to the Content tab and scroll down to the Product Tabs section. Click on the tabs you wish to appear on this product. To select more than one tab hold down the CTRL key on your keyboard and then click on the tab names. Each one will highlight when it has been selected.

Alternatively, you can add the tabs in bulk by using the Import Product Data feature. This will save you a lot of time when adding the same tabs to multiple products.

Remember, if the field you have set as your tab variable is empty in the Product Editor the tab will appear blank on your product page.

NB. If you have customised the Product Detail Page HTML you will need to make sure the Product Tabs variable is included in the HTML for the tabs to appear on the website.

Tweet