One of the features of the Galleria theme we are most proud of is the ability to add fully custom product tabs to your product descriptions. Many themes offer this feature, 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.
With Galleria, you can now quickly and easily add unique product tabs to all your products and it's very easy to setup. It looks something like this:
- Begin by visiting the product you wish to edit in your Shopify admin area
- Switch over to code view by clicking the <> button in the upper right corner of the product description editor
- 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.
- Add this bit of text in your description [TABS] [/TABS] (the text should be uppercase and appear just like that}
- Now switch back out of code view back to your regular description editor you're used to. It should look something like this:
- Now, place your cursor after [TABS] and add your first tab name as shown here:
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 first add this in code view. Once you've pasted it in, you can switch back out of code view to the normal editor and edit the content.
[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]
If one of your tabs isn't working, it's likely that your tab title somehow was removed from the <h5> formatting. To restore it, select the tab name that isn't working in the editor and do what the animation above shows. Make sure it's a Heading 5. That should fix it.