12 Jan

Adding Tabs to Your Shopify Products Description

As a Shopify store owner, you probably want to sell some products, and what better way to sell your products than by giving them excellent descriptions? One part of an excellent description is presenting the information in a clear way, and this is where product description tabs in Shopify come into play. There are several methods for adding tabs to your product descriptions, but the first step for any method is to install jQuery UI.

Step 1: Check your Shopify Theme Files for jQuery UI

jQuery UI is a library that will take care of most of the functionality of the product description tabs in your Shopify store.

  1. First, check your theme files to see if jQuery and jQuery UI are already installed. In my experience, all Shopify themes now have jQuery installed, but most do not have jQuery UI installed.
  2. Head on into your theme files by clicking on “Online Store”; this might be under “Sales Channels” following a recent update to the Shopify admin panel.
  3. From here, click on themes. On your active theme, click the three dots button. While we’re here, we’ll make a backup of our theme by clicking “Duplicate”.
  4. Now, enter the theme files by clicking “Edit HTML/CSS”. Open up the “theme.liquid” layout file, and do a quick search (ctrl + f on Windows or command + f on Mac) for the term ‘jQuery’. If you see a file titled jquery-ui being loaded in as a script asset, you are good to go, and you can skip ahead to step 3.

jQuery UI included in Theme File

Step 2: Install jQuery UI

If you do not have jQuery UI installed, you can do one of two things to install it yourself.

  1. You can copy the contents of [this JS file] and create a new asset titled ‘jquery-ui.min.js’.
  2. Alternatively, you can head to [the jQuery UI website] and click the button that says “Stable”. This will download a zip file. Unzip this and look for the file titled ‘jquery-ui.min.js’. Now, go back to your Shopify template files, and upload this JavaScript file as an asset. Don’t forget to include this asset in your theme.liquid layout file somewhere in the head tag, by inserting the following code: {{ ‘jquery-ui.min.js’ | asset_url | script_tag }}.

Note: make sure to include this line after jQuery is included, as this library relies on the jQuery library being installed.
With the groundwork laid we’re now ready to start working on our product description tabs.

Adding an Asset to your theme files

Step 3: Picking the Correct type of Product Description Tabs for your Shopify Store

As I mentioned earlier, there are different kinds of tabs for your product descriptions: static tabs that will load the same information on every product, and dynamic tabs that load different information based on the product. Whichever method you choose, you must first locate where your theme loads the basic product description. This code should look like this: “{{ product.description }}”

Static Product Description Tabs

Static Product Description Tabs load the exact same content on every product. They are useful if you want to load something like your store’s shipping terms, sizing chart with all products on it, or return policies on every product on your store.

  1. To set up static tabs, go into your ‘product.liquid’ theme template file. Locate where your theme loads the product description. Replace that line with the following: [Static Product Tabs HTML].
  2. Next, modify the code you just pasted in to fit your needs. For example, “Tab 1 Title” will likely be “Description”. Other than the titles, the only other thing you should need to change is to replace each instance of “page-handle” with the [handle] of the page with the desired content. For example, if you wanted to show the content of the page “About Us”, you would change the code to read: “{{ pages.about-us.content }}”. Alternatively, you could simply replace “{{ pages.page-handle.content }}” with the desired text. You can add or remove tabs, as long as you follow the same basic structure where the header is a list item in the unordered list with a link to the content and the tab content is in a div with a unique id.

Congrats, your tabs are in! You can skip ahead to step 4.

Dynamic Product Description Tabs

You may be asking now, what if every product needs different content within the tabs? The previous method only allows for one tab changing content (the description), while the other tabs are static pages. The next method we will discuss allows for every product to have different content in each tabs. This method involves splitting the product description into different sections, usually with an HTML comment (<-- split -->).

  1. The first step to setting up these dynamic tabs is to locate where your theme loads the product description as described above.
  2. Then, copy [Dynamic Product Tabs HTML Code] and replace the default description with it. Again, you can add or remove tabs as needed, as long as you follow the existing pattern. Make sure to update the titles while you are here (your first title will likely be “Description”).

Now that you have added this code, you are ready to set up your products.

Inside your products, you will need to use the HTML editor. Anything before the first split tab will appear in the first tab. When you are ready to start the content for your second tab, paste a split tag: . Anything after the first split tag will appear in the second tab. This will continue in such a fashion and line up with the code you pasted in.

Product Description HTML Editor

Step 4: Make Your Tabs Beautiful with CSS

Your tabs should be appearing on your product pages at this time; however, they might not look very pretty. Here is some [Simple CSS] that can get you started in styling the tabs as desired. Simply open up the assets folder in your theme files and add the code to the bottom of any .CSS or .SCSS file. This file will likely be named “theme.scss.liquid” in most of the common Shopify themes. Of course you can customize this to fit your sites needs, and since everything is basic HTML and CSS, you have complete control! Enjoy your new product tabs, and increased sales!

Matthew C
No Comments

Post A Comment