Creating Tabs

Overview

In this advanced tutorial, we'll show you how to create content that is displayed in tabs on your product pages. 

final_look_tagsCF.png

In this example, we walk you through how to set up HTML fields and labels for tabs, then we provide you with all the code necessary and explain where it goes. The coding is generic, you just need to copy and paste it in the right places and it will work. No changes necessary.

Getting Started

*Please note, this tutorial is provided as a starting place for experienced coders. We cannot provide support for your custom development efforts. If you're not comfortable coding, we suggest hiring a professional to build this for you. 

1.) Create HTML fields in the app on products. 

Generally, tabs look best when there are between two and four tabs total. Your theme may look good with more or less. Make sure to hide these from display.

Yolo.png

2.) Create a new Liquid Template product field.

The name does not matter as it is only shown on the admin side. 

user.png

Once created, paste this code into the Snippet Editor, replacing the default liquid code.

Edit_Code_Section.png

3.) Create a new Global Field called "Tab Definition" 

This is where you will add names to the tabs you are creating.

Note: the machine name of this field must be tab_definition in order for the rest of the tutorial to function correctly.

Tab_Definition.png

4.) In Edit Globals, edit the code for Tab Definition.

If you created a tab on products called "Tab 1" then, the machine name would be tab_1

The code should look something like "YOUR-MACHINE-NAME"="DISPLAYED-NAME"|"YOUR-MACHINE-NAME"="DISPLAYED-NAME" etc.

hello_world.png

Note: The order you enter the tabs in the global field is the order they will be output on the front-end.

5.) Create a file called custom-fields-tabs.scss in your assets folder.

5.1) Open the Assets folder in your theme and press “Add a new asset”

Add_new_Asset.png

5.2) In the pop-up window click "Create a blank file", then choose .scss format and enter “custom-fields-tabs” in the name and save

Addddddd.png

5.3) Copy and paste the code from this code to your newly created asset and save:

The code in this file determines the look and feel of your tabs. This is only a starting point. It will produce simple gray tabs and inherits the rest from your theme. If you want to change the look of your tabs, this is the place to do it.

new_prodigy.png

6.) Create a file called custom-fields-tabs.js in your assets folder

same way as described above and paste in this code and save the template. It's very unlikely that you'll need to make any changes to this file.

JSSS.png

7.) Update theme.liquid to add this code snippet to the <head> section.

New_Code.png

8.) Fill in the Custom Field values on a test product and check your work!

final_look_tagsCF.png