Picking up the tab: Using tabs effectively in Shopify themes

One of the more popular features of many Shopify themes is the ability to break up product descriptions into a tabbed layout.

When using tabs, many store owners will use the first tab, which remains visible by default, for the main product description, while using the other tabs for more product details, specifications or information such as product warranties or support.

This can be an effective way to reduce clutter on the product page and enhance the user experience. However, because tabs also require editing HTML, there are also a lot of pitfalls for many users trying to implement them.

To tab or not to tab?

As with any feature of a Shopify theme, it’s important to consider if tabs are the best way to present content and not just use them because they exist or look sophisticated.

Stores with very brief product descriptions, for example, might find that breaking up the content contained in them is overkill. It creates unnecessary steps by requiring the user to click the different tabs for small bits of info that could have easily fit into one brief paragraph, for example, and thus creates more of a choppy user experience.

Think of it this way — if you’re going to make someone click a tab, make sure there’s sufficient content there that makes it worth taking the extra step.

Also consider if your customers may need to have all of your product description information available at a glance on a single screen. For example, some users may like to compare products on your site or your competitors’ by flipping between browser windows. Having a tabbed structure could make this difficult.

Also, if you want to provide more detail about your product, consider using the “split” feature available in most Shopify themes (link) to break your product description into two sections, where additional details and even images are displayed below the product gallery, description and “add to cart” form. Because this content can be wider, it’s much easier to create more varied and compelling product pages, which can be a great way to engage customers.

All that said, tabs can be highly effective in many cases. One of the best examples of their use is for highly technical specifications or details that most shoppers won’t necessarily care about but should still be listed (though some products may benefit from having these specs available “at a glance” as mentioned above).

Other uses for the tabs might be to provide links to manuals, data sheets or other, more esoteric information. Tabs are also a great way to provide additional information about product guarantees, how to get in touch with you and even links to related blog posts or other content.

How the HTML works

Setting up tabs for your product can be done in your product description editor, but it must be done only while in HTML (<>) mode. The most important point to note is that the HTML code used to create tabs can be a bit finicky and, for best results, needs to be used exactly as shown.

As shown in the how-to guide, the bold text are the areas that you can edit safely.

To better understand the code, let’s break it down section by section.

• The first five lines are used to, quite literally, create the tabs. Think of these as the “headings” or “labels” that users will click on to access the additional information. You can edit the bold text to say whatever words you’d like
• The remaining code defines the actual content of the tabs. Here again, simply edit the bold text to change the content.

Perhaps the most confusing part of how this code must be written is that the tab label isn’t directly near the actual tab content. Instead, all of the tabs are defined first, and then an entire new section of code is used to output content.

Conceptually, you’ll notice that the Tab 1 label comes first (which makes sense) and then, in the next section of code, the Tab 1 content comes first. Then, Tab 2’s label is on the next line in the first section of the code, followed by Tab 2’s content in the lower part and so on. In theory, this setup could continue beyond just three tabs.

Formatting issues

One of the most common issues is that, either on purpose or by accident, additional code is added where the tab labels and content are outputted. For best results, try removing any <span> and </span> tags that might get added.

For the simplest possible implementation, avoid using heading tags in the label names (such as <h3>Tab 1</h3>>). This can be done, however, but will require additional customization to the CSS.

In the tab content itself, the paragraph (<p>...content…</p>), bold (<strong>...content…</strong>) and italic (<em>...content…</em>) should work fine without any issues.

Adding bullet lists in tabbed content is also another common pitfall for when editing your HTML because it involves using lists inside of another list.

Out of the Sandbox’s Shopify themes, according to best practice in Web design, use unordered lists and list items (that’s what the <ul> and <li> tags stand for, respectively) to define the structure of the tabs, even though you don’t actually see any bullets or anything else that would really signal a true list. (Note that if you happen to switch back to WYSIWYG mode in the description editor after adding tabs, they may look like bulleted list items, but not to worry - they won’t actually display like this!).

The neat thing about the way the themes are developed and how HTML works, however, is that you can use another unordered list inside of one of the list items.

To effectively use bullet lists within tab content, it’s important to remember this structure:

On the first line of this code, we’re defining the first tab (“tab1”). Then, to start a bullet list, we need to use a <ul> tag. Next, is the list item (<li> and </li>) tags that wrap around the actual text of the first bullet. You can then repeat this for additional lines, being sure to start and close the tag properly each time.

You’ll then notice that, after the final list item, there is a closing </ul> tag. This tag is telling our code that we’re finished with the list inside of tab 1. You can include additional, not bulleted content above or below the text, too, as shown in the example.

Finally, on the second to last line, you’ll see a </li> tag that signals the end of tab 1’s content. Immediately following this is a <li> tag for “tab2.”

Tabs and Quick Shop

Tabs also have special considerations that should be addressed if your Shopify theme uses a Quick Shop popup window, which are covered in detail here.