Tabs Studio

Built for Shopify

Welcome to Tabs Studio! Whether you're new to Shopify or you're selling thousands of products, Tabs Studio can help you organize your online store's product descriptions into professionally designed and developed tabs that convert visitors into customers.

In this article, you'll learn about the important concepts and features of Tabs Studio and how it can be a valuable addition to your online store. You'll also find helpful links to our guides, a complete setup checklist, where to go for help, and more.

Our mission is to help you build, manage, and grow your Shopify store using our expertly crafted apps. So, let's dive in and explore how Tabs Studio can be a part of our mutual success!

Getting started

We highly recommend that you read through this entire article to get a better understanding of the app before moving on to the guides. If you've already read everything here, or if you'd like jump straight in, you can:

Complete the getting started guide — A step-by-step tutorial that leads you through the tasks you need to complete to get up and running quickly.
Complete the setup checklist — A checklist that outlines all of the tasks you need to complete to fully set up, customize, and use the app.
Browse all guides — A collection of tutorials that include detailed instructions, how-to videos, and tips that help you customize the app, get the most out of its features, and achieve your goals.

Purpose

A product description is a written explanation of the product's features, benefits, and value.

A detailed description can enhance the overall shopping experience, build loyalty, improve brand reputation, and reduce returns. Most importantly, it provides all of the information that a potential customer might look for so that they can be confident in their purchase without experiencing the product in person.

A vague or incomplete description can leave potential customers feeling uninformed and unsure about whether the product meets their needs. Evidence from an e-commerce study conducted by Nielsen Norman Group shows that 20% of unsuccessful purchases are due to lack of relevant information in product descriptions.

While it's important that a description be detailed and complete, a long wall of text can overwhelm potential customers and cause them to lose interest and abandon the product page before making a purchase.

Tabs Studio provides you with the tools you need to easily organize your detailed product descriptions into attractive, intuitive tabs so that your potential customers can effortlessly find the information they need, ultimately leading to higher engagement and conversion rates.

Overview

These key concepts, features, and benefits provide a quick overview of how the app works, what it can do for you, and why it's the right fit for your store.

Tabs work with any theme — In most themes, tabs show automatically after you activate the app embed. If tabs don't show automatically, then you can use the app embed settings or add the app block to show tabs in your theme. Tabs Studio does not add, change, or remove any theme code.
Tabs work with any content — The default content that's organized into tabs is the product description on the product page on your online store. If the app can't find the product description, then you can use the app embed settings to select it or any other content to organize into tabs, even content on non-product pages. Tabs show where the content that they're created from is located on your online store.
Tabs are created from headings — A tab is created from each Heading 3 in the product description (or other content that's organized into tabs). The heading text is the tab title, and the content below the heading is the tab content. Use headings to create tabs for content that is unique to the product, such as features or ingredients.
A default tab can be created for every set of tabs — You can enable or disable the default tab on the Tabs page in the app. When enabled, a tab with the title Description is created in the first position of each set of tabs. The tab content is the entire product description, unless the description contains headings that create additional tabs. Use the default tab to create a Description tab for every product without having to add a heading into every product description.
ProTabs save time and add powerful features — You can create ProTabs on the Tabs page in the app. A ProTab can be applied to every product in your store, or to a group of products based on collections, tags, types, and/or vendors. The tab content can be content that you enter directly using the rich text editor, any element from your online store's product page (such as a related products section), an app (such as a reviews or size chart app), custom Liquid code, snippets from our Descriptions Studio app, and more. Use ProTabs for general content that's shared by multiple products so that you don't need to add the same content into multiple product descriptions.
The three tab types work together — A set of tabs can, and usually does, have the default tab, tabs created from headings, and ProTabs. The default tab is used for a general overview of the product, tabs created from headings are used for details that are unique to the product, and ProTabs are used for app integrations and general content that's shared by multiple products.
Tabs can show in a horizontal or vertical layout — The layout of the tabs can be horizontal or vertical (aka an accordion), or it can automatically switch between horizontal and vertical based on screen size or available space.
The app block has its own settings — If you add the app block, then you need to use its settings to control how it works. The block only inherits style settings from the app.
Tabs are optimized for speed — We've taken great care to make sure that Tabs Studio does not negatively impact store loading speed. All asset files are lightweight, compressed, and served from Shopify's CDN for optimal performance. JavaScript files are loaded asynchronously and are not render-blocking.
Tabs are SEO friendly — Tabs are rendered using advanced techniques to help hidden content (inactive tabs) be visible to search engines. Headings used to create tabs are preserved in the tab structure so that they maintain their semantic hierarchy.
Tabs are W3C web standards compliant — Tabs adhere to the WCAG 2.1 guidelines for adaptable content and the W3C WAI-ARIA Authoring Practices for Tabs with Automatic Activation for interoperability, security, privacy, web accessibility, and internationalization.
Tabs Studio is 'Built for Shopify' — Tabs Studio has achieved Shopify's prestigious Built for Shopify status, the highest level of excellence, recognition, and achievement that an app can reach. Achieving Built for Shopify status indicates the app has been thoroughly evaluated by Shopify, and meets or exceeds their strict set of quality standards for safety, security, reliability, performance, ease of use, and usefulness.
Tabs Studio is crafted by professionals — Our small, award-winning team has a combined 40+ years of industry experience in disciplines ranging from systems architecture to UI/UX design. We've worked with Shopify since 2008, and in that time have written for the official Shopify blog, developed highly successful Shopify themes, and consulted on major platform implementations. Today, we combine our obsessions with technology, design, and business to build exceptional Shopify apps that help merchants succeed. We are committed to excellence, and our passion for quality is evident in every line of code we write, every pixel we place, and every app that we craft.

Best practices

Follow these best practices to use the app efficiently and effectively, and get the most value out of its features.

App setup

Make sure the theme displays the original product description — The default content that's organized into tabs is the product description on the product page on your online store. To help the app find the product description, use the theme settings to disable the theme's tabs and any other theme features that change the display of the description. If the theme changes the display of the product description in any way, then tabs may not show until you use the app embed settings to select the description or other content to organize into tabs.
To move the tabs, move the product description — Tabs show where the product description is located on your online store. To change the location of the tabs, use the theme settings to change the location of the description.
If you add the app block, disable the automatic location for tabs — To prevent multiple sets of tabs when using the app block, select Off under Find location for tabs in the app embed settings.

Creating tabs

Keep the product description focused on the product — The content that you enter in the Description area on the product details page in your Shopify admin should only contain information about the product. It shouldn't include information that is more specific, such as details about individual variants (because the information can't change when different variants are selected), or information that is more general, such as details about the collection or vendor (because you need to add the same information into multiple product descriptions).
Organize the product description in a logical structure — Your product description should be organized in a logical manner that makes it easy for your visitors to follow. Use headings and subheadings to separate the content into sections, use lists for easy digestion of information, and make sure there's a smooth transition between ideas.
Create tabs from the main headings — A tab is created from each Heading 3 in the product description. The heading text is the tab title, and the content below the heading is the tab content. If you separate the main sections in your product description with a different heading level, such as Heading 2, then select that level on the Tabs page in the app to create tabs from those headings instead.
Use Descriptions Studio for specific details - Details that are specific to individual variants of the product, such as the SKU, inventory quantity, or value of a variant metafield, should not be entered directly into the product description because they can't change when different variants are selected. To make variant details automatically update for the selected variant, use our Descriptions Studio app to add snippets and variables into a tab. You can also use Descriptions Studio to show content based on conditions. For example, you could show an 'Out of Stock' notice if the inventory quantity of the selected variant is 0, and/or show an 'In Stock' notice if the inventory quantity is greater than 0.
Use ProTabs for general information - Information that's shared by two or more products, such as an overview of the collection, a profile of the vendor, or a shipping and returns policy, should not be entered directly into each product description because you will need to update it in numerous places each time you want to change it. To save time, ensure consistency across products, and automatically show the information for new products that it relates to, create a ProTab and apply it to a group of products based on collections, tags, types, and/or vendors.
Use ProTabs for apps and complex content — Apps and complex content, such as reviews, related products, additional product options, a newsletter signup, or metafield values, can not be inserted with Shopify's rich text editor. To show content in a tab that you can't insert with the rich text editor, use the theme editor or an app to add the content to the same page as the tabs. After you add the content to the page, make sure it looks and works the way you want. Then, create a ProTab and edit its details to show the content in the tab instead of its original location.
Use the theme settings to change the appearance of tab content - You can customize the appearance of your tab titles using the style settings, but the appearance of your tab content, including fonts, colors, tables, text sizes, image sizes, and spacing, is inherited from the theme. Tabs Studio does not add, change, or remove any styles that are set by the theme, so content inside of a tab looks exactly the same as it would outside of the tab. To customize the appearance of your tab content, use the theme settings or ask your theme developer to add custom style code into the theme for you.

Writing an effective product description

The product description is the content that you enter in the Description area on the product details page in your Shopify admin. A great description communicates the value and benefits of the product to potential customers and persuades them to make a purchase.

To write an effective product description:

Know your audience — Understand who your target audience is and tailor your language and tone to resonate with them. Speak directly to their needs, desires, and pain points.
Highlight benefits — Instead of just listing features, focus on the benefits your product offers. Explain how it solves a problem or improves the buyer's life.
Use descriptive language — Paint a vivid picture with your words. Use adjectives and adverbs that evoke emotions and imagery to make your product come alive in the reader's mind.
Include key details — Provide essential information such as dimensions, materials, colors, and any other relevant specifications. This helps customers make informed decisions.
Tell a story — Incorporate storytelling elements to engage your audience and create a connection with your product. Share the inspiration behind the product or how it has positively impacted others.
Optimize for SEO — Use relevant keywords in your product description to improve its visibility in search engine results. However, make sure the keywords are seamlessly integrated and don't compromise the readability of the text.
Answer potential questions — Anticipate and address common questions or concerns that customers may have about the product. This demonstrates your understanding of their needs and builds trust.
Create a sense of urgency — Encourage customers to take action by highlighting limited availability, special promotions, or exclusive offers.
Include social proof — Incorporate customer reviews, testimonials, or ratings to build credibility and reassure potential buyers about the quality and value of your product.
Provide clear calls to action (CTAs) — Directly prompt the reader to take the next step, whether it's making a purchase, signing up for updates, or learning more about the product.
Proofread and edit — Make sure your product description is free of grammatical errors and typos. A polished and professional description reflects positively on your brand.
Regularly update — Keep your product descriptions up-to-date with any changes or improvements to the product, pricing, or availability.

Setup checklist

Use this checklist to track your progress on the tasks you need to complete to set up, customize, and use the app.

Help

As part of our commitment to excellence, we are dedicated to delivering quality at the highest level in everything we do, from the design, functionality, and value of our apps, to the help we provide. Through this commitment, we aim to build a long-lasting relationship with you based on trust, reliability, and mutual success.

If you have any questions or concerns about Tabs Studio, if it doesn't look or work as expected, or if you'd like to make customizations, you can get help from these resources:

Help center — For quick answers to your questions, and to learn how to set up, customize, use, and get the most out of the app, search or browse the articles in this help center.
Help team — If you can't find the information you need in these articles, then our help team will be happy to assist via email. Before reaching out, please review our Help Policy to make sure you're familiar with the level of support we're able to provide. If you've read and agree to the terms in the help policy, then we welcome you to send us a help request.
Theme developer — Tabs Studio integrates with your online store's theme, so it can be affected by the theme's code. Most cases of tabs not looking or working as expected are due to external factors such as theme styles, issues with theme code, or other apps. For help with problems caused by the theme, please contact the theme developer.
Shopify partners — For professional help with customizations that are not covered by our Help Policy, you can hire a Shopify Partner. Explore the available services in the Partner Directory to find the perfect match among 800+ Shopify Partners.

Feedback and suggestions

We highly value your feedback. If you have any ideas, feature requests, or suggestions for improving the app, please feel free to share them with us . We'd love to hear from you!