Creating Tabs with Optional Tables

Overview

This tutorial covers the coding and setup to create tabs that print metafield data. All coding is copy/paste.

This setup can use existing data from any metafield in any namespace. This means that data can come from any source and the data is not tied to the display in any way. Adding and rearranging tabs and data points is done in the interface without writing any code. 

The setup includes two display formats, one for table display and one plain version. The table format is ideal for a specifications tab that includes many separate data points and includes a label column and a data column.

This tutorial will walk through:

1. Creating a Liquid template that will print the specific fields.
2. Creating a new Global (shop) field for configuration that will define the tab names, and the data in the tabs including one or more fields with labels, keys and namespaces, as well as a display format of either table or "plain".
3. Copy/pasting some generic Liquid code into the new template to handle printing the data and all HTML.
4. Updating your theme to print the new Liquid template.
5. Copy/pasting some generic JavaScript code to show and hide the correct tab.

Create Fields

Product Fields

First, create all the fields you need to store the product data you want displayed. If all of the fields you want to display already exist, skip this step. 

From the left sidebar, click on Products, then +Field. Set up fields as usual. Note the metafield namespace and key for each field as you go. These will be used later. If you're creating new fields, the default namespace is always custom_fields.

Liquid Template Field

Next, create the  Liquid Template field as a Product field. Call the template Tabs.

The template for this field will contain all the HTML and Liquid code needed to handle the tab fields in one place.

Later, this field will be placed in the theme using the Display system in the app. For now, just create the field, we'll deal with code and placement later in the tutorial.

Global Settings Field

Finally, create a  Global field. From the left sidebar, click on Globals, then +Field. Create a Field Collection. Label the Field Collection Tabs. It must have the key of tabs otherwise later steps will not work.

Once the Field Collection is created, we need to define the structure of each tab. Each tab will include a title for the tab and the display format for the tab at the highest level. Within each tab, one or more fields will be defined. Each field will have a label, a namespace and a key. 

To do this, add a text field on the new Field Collection called Tab Label. Next, add a Text List called Format. In the Format field, add two selection options: table and plain. This covers the tabs themselves and how the field data will be presented within the tabs.

Next, add a nested Field Collection to the existing Field Collection and call it Fields. Within the nested Field Collection, add one text field called Label, another called Namespace and a final field called Key. This covers what fields that will go inside of each tab.  

Configure the Tabs

Now that the tab structure has been defined, and would work with any number of fields or tabs, let's configure the tabs to suit your project. For our example project, we want 3 tabs with titles of Overview, Manufacturer and Specs.

In the next step we'll need to use the field keys and namespaces from your notes earlier about the key and namespace names for your metafields. 

If you need to get the keys and namespaces now, from the  left sidebar, click on Products, then Configure Fields click on the Code icon for the field, then open the Theme Info area. 

With all the keys and namespaces, from the left sidebar, click on Globals.

In the Tabs field, click +Tab.

Example

The steps from here will vary depending on your project. For our project we would fill out the first tab calling it Overview with one Field for Overview with the namespace of custom_fields and the key overview. We would leave the label blank to hide it. For the format we would choose plain.

For our second tab, we would click +Tab again and call this tab Specifications. We would add Field entries for multiple fields. For the tab format, we would choose table.

For our last tab, we would click +Tab again and call this tab Manufacturer. We would add Field entries for a few more fields and choose plain for the table format. 

See screenshot below for our setup.

Copy/Paste Code

Liquid Template Field

From the  left sidebar, click on Products, then Configure Fields. From the list, click the code icon under the Liquid Template field created earlier.

Generate the template by clicking on  Create Now with Create Default Template selected under More Actions.

Copy this code to your clipboard and paste it into the template, then Save. No changes are needed. The code will look like the screenshot below.

CSS & JS

Next, we need to make a few changes to your theme. These changes are all copy/paste. 

For the javascript, copy this code to your clipboard.

In Shopify, go to  Online Store then Themes then under Actions for your theme choose Edit Code.

In the  left sidebar in the code editor choose Assets then Add New Asset. 

Create a blank file. Name it  cf-tabs.js and click Add Asset

Locate the file in the sidebar, open it and paste in the code copied earlier. Save the file.

For the CSS, copy this code to your clipboard. Feel free to edit it to match your store's look and feel.

Add a second new asset for the CSS file. Name it cf-tabs.css

Again, locate the new file in the sidebar, open it and paste in the code copied earlier. Save the file.

Update theme file

For the theme file, copy this code to your clipboard. This will tell the page to use the two new files we just added.

In the left sidebar in the code editor search for theme.liquid and open the file.

Paste the code copied earlier just above the closing head tag and save.

Place the Field for Display

In the Custom Fields app, from the left sidebar choose Products, then Display Fields. Enable the field for display in the Inner Area.

Add Data For Testing

From the left sidebar, click on Products and locate a product to test with. Enter some test content into your tab fields on your test product. View the product on the front-end of your store and test.

Your test product should now have some tabs with the data points you defined.

Troubleshooting

Missing jQuery
The javascript code we added earlier relies on the jQuery library. Not all themes include jQuery. For example, Debut is one theme that does not ship with jQuery. When testing, if the page prints the fields but doesn't look like tabs, missing jQuery might be the problem. 

Visit the Setting up jQuery for Widgets article and follow the steps. Be sure to paste the code above the line for cf-tabs.js that was added to the theme in an earlier step. Once pasted, retest.