In our ShowTime (6.x versions) and Galleria themes (prior to 3.x versions), 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 now 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 </p> 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 just like that).

   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 here:

   

7. Simply continue that process until all your 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.