Get started with Tabs Studio

Welcome to Tabs Studio! This guide leads you through the tasks you need to complete to get up and running quickly.

Before you get started, we recommend you read the Tabs Studio article for a complete introduction to the app. It explains important concepts and features that are used in this guide, provides you with a setup checklist that you can use to track your setup progress, and shows you where you can find help if you need it.

Install Tabs Studio

You can install Tabs Studio from the Shopify App Store.

To install Tabs Studio:

Log in to the Shopify App Store.
Go to the Tabs Studio app listing page.
On the app listing page, click Install.
In your Shopify admin, to authorize the use of the app, click Install app.

After the app is installed, you can view and use it from the Apps page in your Shopify admin.

Activate the app embed

To use Tabs Studio on your online store, you need to activate the app embed in your current theme.

The Tabs Studio app embed in the Shopify theme editor.

To activate the app embed:

From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
From the theme editor page selector, select a product template (eg Products > Default product).
On the sidebar, click the App embeds icon .
Select the Tabs Studio app embed.
Beside the Tabs Studio app embed, click the toggle to activate it.
Optional
View and customize the settings for the app embed by clicking the expand icon next to the app embed name.
Click Save.

Make sure tabs show on your online store

After you activate the app embed, navigate to a product page in the theme preview window or select a product template (eg Products > Default product) from the theme editor page selector.

You should see a tab with the title Description on the product page.

The product description showing in a tab with the title 'Description'.

The Description tab is the default tab, and its content should be the entire product description, unless the description contains headings that create additional tabs.

If you want to organize your product descriptions into tabs and you see the description in a Description tab on the product page, then you can continue on to manage the default tab.

If you do not see a Description tab on the product page, the Description tab is empty, or you want to organize other content into tabs, then use the app embed settings to select the product description or other content, even content on non-product pages.

To select the product description or other content to organize into tabs:

From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
From the theme editor page selector, select a product template (eg Products > Default product).
On the sidebar, click the App embeds icon .
Select the Tabs Studio app embed.
View the settings for the app embed by clicking the expand icon next to the app embed name.
Under Find location for tabs, select Use CSS selector.
In the CSS selector field, enter a CSS selector to select the element that contains the content you want to organize into the tabs.

For example, if the content is in an element that has the class description, like this:
```
<div class="description">
  Content
</div>
```
then you could enter the selector .description
Click Save.

Tabs show where their content is located on your online store

To change the location of the tabs, change the location of their content.

For example, if the product description is organized into tabs, then use the theme settings to change the location of the description.

Every theme is different, so if you're not sure how to use the theme settings to change the location of the content, please ask your theme developer.

Manage the way tabs are created from headings

Tabs are created from headings in the product description (or other content you've selected to organize into tabs).

Each Heading 3 in the content creates a new tab. The heading text is the tab title, and the content below the heading is the tab content.

Headings in the product description become tabs on the product page in your online
store — Headings in the product description become tabs on the product page in your online store.

You can select a different heading level to create tabs from, or you can not create tabs from headings so that each set of tabs only shows the default tab and ProTabs.

To select a heading level to create tabs from:

From the Tabs Studio app, go to Tabs.
Click Edit settings.
Under Heading level, select a heading level to create tabs from.
Click Save and close.

To not create tabs from headings:

From the Tabs Studio app, go to Tabs.
Click Edit settings.
Uncheck Use headings to divide content into tabs.
Click Save and close.

Manage the default tab

When the default tab is enabled, the product description shows in a tab with the title Description. When the default tab is disabled, the product description shows above the tabs.

The default tab is enabled, so the product description shows in a tab with the title 'Description'. Additional tabs are created from headings in the description.

You can change the title of the default tab, or you can disable the default tab so that each set of tabs only shows tabs created from headings and ProTabs.

To change the title of the default tab:

From the Tabs Studio app, go to Tabs.
Click Edit settings.
In the Default tab title field, enter a title for the tab.
Click Save and close.

To disable the default tab:

From the Tabs Studio app, go to Tabs.
Click Edit settings.
Uncheck Create a default tab.
Click Save and close.

Create a tab

Tabs are created from headings in the product description

To create a tab:

From your Shopify admin, go to Products.
Click the name of the product that you want to create a tab for.
In the Description area, place your cursor where you'd like the tab content to begin.

For example, if you want to create a Features tab, place your cursor at the beginning of the features content.
Press enter or return.
Press the up arrow key ↑.
Enter the tab title text. For example, Features.
Highlight the tab title text, click the Formatting button, and choose Heading 3.

If you selected a different level to create tabs from, then choose that heading level instead.
Click Save.

To create additional tabs, repeat steps 3-8 for each tab.

Create a ProTab

ProTabs save time and add powerful features. They can be applied to every product in your store, or to a group of products based on collections, tags, types, and/or vendors.

For example, suppose you want every product in a collection to show information about the collection in a tab. Instead of copying and pasting the information into each product description, which would take a lot of time to do and be difficult to maintain, you could create a single ProTab and apply it to the collection. Changes that you make to the tab content automatically update for every product that shows the tab.

A 'Freshness Guarantee' tab that shows for all products in the 'Coffee Beans' collection.

The content of a ProTab 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.

To create a ProTab:

From the Tabs Studio app, go to Tabs.
Click Create ProTab.
Enter a title and content for the tab, along with additional details.
Click Save.

Next steps

Congratulations on completing the getting started guide! By now, you should have a solid understanding of Tabs Studio and be ready to take the next steps. Here are some suggestions to continue your journey:

Review the app introduction — A complete overview of Tabs Studio that covers the important concepts and features of the app and how it can be a valuable addition to your online store.
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.
Try Descriptions Studio — An app that we created to help you easily show variant descriptions, stock notifications, trust badges, and more. Descriptions Studio integrates directly with Tabs Studio.

Enjoy exploring and mastering Tabs Studio, and don't hesitate to reach out if you need any assistance along the way. We'll be happy to help however we can!