Getting started

Getting started with Tabs Studio is as easy as activating the app and then adjusting the basic settings. It should only take a minute or two to get tabs up and running and your product descriptions organized!

Activate the Tabs Studio app embed

App embeds allow apps to extend the functionality of your theme. To activate the Tabs Studio app embed:

1. Click the Activate button in the first panel on the dashboard. This will open a new tab and automatically activate the Tabs Studio app embed for you.
2. Click Save in the top right corner. Your changes will not take effect until you do.

Once the app embed is activated, Tabs Studio will try to automatically find your product descriptions and convert them into tabs.

At this point, if you’re using the default settings, you will likely see your whole product description inside a tab with the title Description. If not, that’s no problem. You just need to adjust the embed block settings!

Adjust the app embed settings

If the app embed is activated and you don’t see tabs in place of your product’s description, it means that Tabs Studio couldn’t fully determine where it was.

This can happen for many different reasons. You may not have content in your product description or an another app may have adjusted the content.

The solution is to tell Tabs Studio exactly where your product description is by following these short steps:

1. Open the app embed settings (if they aren’t already) by clicking the arrow in the Tabs app embed section.
2. Change the Find product description setting to With element selector.
3. Put a valid CSS selector for your product description in the Element selector field.

If you don’t know what the CSS selector should be, you can ask your theme developer or contact us, we’re always happy to help!

There are more settings in the app embed, but for now, let’s move on to making more tabs!

Adjust the Tabs settings

The first way to create tabs is by dividing up your product descriptions using headings. Use the Tabs Studio app to set up exactly how your content should be converted.

1. Select Tabs Studio from the Apps page in your Shopify admin.
2. Select Tabs from the main menu in the Tabs Studio app.
3. Click Edit settings at the bottom of the top panel.
4. Adjust your settings.
5. Click Save and close when you are done.

Using these settings you can adjust which headings to use, whether the remaining description should go in a tab or above the tabs and more.

Notice that as you adjust the settings, the information above automatically changes and tells you exactly what will happen to your content.

Using headings to create tabs is great, but what if you want to have a tab with the same content on all your product pages? That would be a lot of copy/pasting. Instead, simply create a ProTab and apply it to many products!

Create a ProTab

ProTabs are extremely powerful. They allow you to create one tab and have it show on all or many of your products. This is great for tabs like Reviews or Shipping information.

1. Select Tabs from the main menu in the Tabs Studio app.
2. Click Create ProTab in the bottom panel or at the top right of the page.
3. Give your tab a title in the Title field.
4. Add some content to the content editor.
5. Click Save.

Your new tabs should show on all of your pages. There are lots of fields and settings on the Edit ProTab pages. You can assign a ProTab to products using any combination of Tags, Types, Collections or Vendors. You can exclude ProTabs from specific products or even have them only show up for a specific language!

You can also have different types of content. Use third party apps; add HTML; pull in page content; you can even move any existing page element into a tab from its original location!

Style your tabs

You can make your tabs look exactly how you would like. Here’s how:

1. Select Settings from the main menu in the Tabs Studio app.
2. Click on the Styles section.
3. Select Presets from the list of options.
4. Browse through the presets until you find one that is close to what you would like.
5. Click Use preset.

Presets provide an excellent starting point for designing your tabs. From there, you can use the individual settings to fine-tune the tabs to look exactly how you would like. You can choose a new preset at any time; however, when you do, your other settings will also be reset.