Shopping Cart
Log in | Create account

Description Tabs User Manual

subdirectory_arrow_right

Setup up the product description tabs

face

Hi there, great to have you on this site. By now you have probably purchased the gorgeous tabbed product description feature, and we have installed the code on your page.

This manual consists of three parts which explain: 

  • chevron_rightIdentifying the possible settings for this feature
  • chevron_rightSetup your tabbed description area
  • chevron_rightMechanics and technical stuff

warning

This feature will replace your themes default product description area. It will have the same dimensions and alignment within you product page content.

 We have designed our features to allow you to set as many options as possible yourself. Please let us know if you miss something or find the explanation hard to follow!

looks_one

Check the possible Settings

The settings are located in your normal theme customizer area. In you Shopify Admin Area, please go to "Online Store" --> "Themes"and click on "customize theme". In the left hand side list of theme settings, scroll all the way to bottom. You will find a new area "Description Tabs". There is a list of settings available, where you can control

  • chevron_rightThe number and the naming of the tabs
  • chevron_rightDimensions 
  • chevron_rightVarious color settings
  • chevron_rightBehavior for click, hover, active

Open a product page in the preview editor and navigate to a product where the description tabs are active to see the settings in action. The settings are the same for all product pages. 

Admin Settings Admin Settings Admin Settings

looks_two

Activate the feature

The description tabs are activated using an separate product template. In your shopify admin, open a product and see the template selector drop down on the right side of the page. When the product.description-tabs is selected, the content of the text editor will be split into separate parts. You control each part by setting a keyword part* around the text like so:

*part1
This text will appear in tab 1
*part1

*part2
This text will appear in tab 2
*part2

*part3
What do you think, where will this text appear?
*part3

Admin Settings

looks_3

Mechanics

If you are versed in liquid and you want to change the behaviour of the tabs beyond the settings, here is a quick overview of how the thing works.

First, there is a template and a snippet included. The product.description-tabs.liquid is  copy of your default product template, where your product description area is commented out, instead the content ist generated using {{ include 'description-tabs'}} 

 In the snippet description-tabs-liquid, you can see the structure of the tabs related html and an additional javascript that handles the switching activities. Feel free to play around, you can always reset the file to the original version with the rollback functionality.

Change the position of the description tabs

If you wish to include the tabs functionality on a different area of your page, just change the location of the include statement. You can also enable the default text description area and add our tabs. We recommend to start with the standard description text in the editor, and later enter the *part divided content for the tabs.