Adding tabs or accordions to product pages (video tutorial)

All of our themes allow you to add tabs or accordions to break up blocks of content on your product pages. This content can either be static (the same on all product pages) or dynamic (different on each product page). We have prepared a video tutorial below showing you how to add both types of tabs to all of our themes.

Legacy themes

In our ShowTime (6.x versions) and Galleria themes (prior to version 3.0), it is possible to add custom product tabs to product pages using some simple markup in the product description field.  Many themes offer a tab feature of some sort, but due to limitations with Shopify only offering a single product description in which to pull content from, you often have to use the same content in all the tabs on all your product pages.  While this can still be useful, it's much better if you can use your own unique content on each product.  This was previously impossible without using product metafields with extra coding or by using an app.  We're happy to report that it's possible!  Here's what it looks like:

Galleria

ShowTime

Setup instructions

1. Begin by visiting the product you wish to edit in your Shopify admin area
2. Switch over to code view by clicking the <> button in the upper right corner of the product description editor
3. Scroll to the end of your code (if you wish to add your tabs after your current product description) or locate where in your product description you want to add your tabs and place your cursor there.  Make sure it is not within any unclosed HTML tags.  For example, do not perform the steps below within a tag or you might break the layout of your page.
4. Add this bit of text in your description: <!-- TABS --> and <! -- /TABS --> (the text should be uppercase and appear exactly like the above). Note: If you are using Galleria 2.0.2 or earlier, or 6.0 - 6.1.2 of ShowTime, please use [TABS] and [/TABS] instead.  This was the original syntax we used with the theme but later changed it to the new syntax, which is better for SEO.
5. Now switch back out of code view back to your regular description editor you're used to.  If done properly, you won't see the text you just added.  That's because it's essentially an HTML comment, which is not visible when previewing the site.
6. Now, back in code view, place your cursor after <! -- TABS --> and add your first tab name using the simple coding shown below. Afterwards, simply continue the same process until all tabs are created.

If it's easier, here is a snippet of code you can use to quickly and easily add tabs to your product.  Simply edit the content as you see fit, just remember that you must add this in code view.

<!-- TABS -->
<h5>Tab 1</h5>
<p>Content for tab 1.</p>
<h5>Tab 2</h5>
<p>Content for tab 2.</p>
<h5>Tab 3</h5>
<p>Content for tab 3.</p>
<!-- /TABS -->	 

Troubleshooting

If some or all of your tabs aren't working, it's likely that your tab title somehow was removed from the <h5> formatting, or you have other HTML tags wrapped around your <!-- TABS --> and/or <! -- /TABS --> tags.  Remember that these references must be added in code view. If you just add them in the editor, it will wrap paragraph tags around them and the functionality will not work.