The Tabs Studio app block
The Tabs Studio app block lets you add tabs exactly where you want to show them on your online store.
It renders the product description and divides the content into tabs based on the app block settings. It also shows ProTabs.
The app block can be added as a block in a template section, and as a section in a template.
You can add, remove, reposition, and customize the app block through the theme editor.
Tabs Studio does not add, change, or remove any theme code
All app functionality is provided via lightweight JavaScript and CSS files that are kept completely separate from the theme.
Note
- The app block has its own settings — If you add the app block, then you need to use the app block settings to control how it works. The block only inherits style settings from the app.
- The app block does not disable other tabs — To prevent duplicate tabs when using the block, select Off under Find location for tabs in the app embed settings.
- The app block shows the product description — To prevent duplicate product descriptions when using the block, hide or remove other blocks that show the description, such as the theme's Description block.
On this page
- Add the app block to a section
- Add the app block to a template
- Remove the app block
- Reposition the app block
- Customize the app block
- The app block settings
Add the app block to a section
Some of your theme sections might not support app blocks. To identify which of your theme sections support app blocks, refer to your theme's documentation or contact your theme developer.
To add the app block to a section:
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Navigate to the page and section where you want to add the app block.
On the sidebar, click + Add block.
From the drop-down menu, in the Apps section, select the Tabs Studio app block.
- Optional
Move the block to another location by clicking and dragging the ⋮⋮ icon.
- Optional
View and customize the settings for the app block by clicking the block name.
Click Save.
Add the app block to a template
Some of your theme templates might not support sections. To identify which of your theme templates support sections, refer to your theme's documentation or contact your theme developer.
To add the app block to a template:
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Navigate to the page and section where you want to add the app block.
On the sidebar, click + Add section.
From the drop-down menu, in the Apps section, select the Tabs Studio app block.
- Optional
Move the block to another location by clicking and dragging the ⋮⋮ icon.
- Optional
View and customize the settings for the app block by clicking the block name.
Click Save.
Remove the app block
To remove the app block:
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Navigate to the page and section that contains the block that you want to remove.
On the sidebar, click the Tabs Studio app block.
Click the button beside the block name at the top of the sidebar.
To hide the app block, click Hide.
To remove the app block, click Remove.
Click Save.
Reposition the app block
To reposition the app block:
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Navigate to the page and section that contains the block that you want to reposition.
Click and drag the ⋮⋮ icon next to the Tabs Studio app block name to move the block to another location.
Click Save.
Customize the app block
To customize the app block:
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Navigate to the page and section that contains the block that you want to customize.
Click the Tabs Studio app block name to view and customize the settings for the app block.
Click Save.
The app block settings
The app block settings affect the way that the app block functions on your online store. They are completely separate from the app settings, and they are unique to the block, so you can have multiple blocks on the page that function differently from each other.
Product description
The product description is the content that you enter in the Description area on the product details page in your Shopify admin.
Create tabs with headings
You can select from the following options to control how the product description content is divided into tabs:
- Heading 1 — Create a tab from each Heading 1.
- Heading 2 — Create a tab from each Heading 2.
- Heading 3 — Create a tab from each Heading 3.
- Heading 4 — Create a tab from each Heading 4.
- Heading 5 — Create a tab from each Heading 5.
- Heading 6 — Create a tab from each Heading 6.
- Don't create tabs with headings — Do not divide the product description into tabs.
Remaining description content
The content in the product description that is not divided into a tab panel.
For example, suppose the Heading 3 option is selected under Create tabs with headings, and you have a product with the following description, where 'Versatility' and 'Care' are each a Heading 3:
Unveil the allure of nature with our exquisite succulent plant, a true marvel of resilience and beauty. This captivating botanical gem is the epitome of simplicity, making it the perfect addition to any living space, office desk, or garden oasis.
Versatility
Whether displayed in a chic pot on your windowsill, as part of a captivating succulent garden, or adorning your workspace, this succulent adds an elegant touch to any setting.
Care
This succulent requires minimal care, making it an ideal choice for both novice and experienced gardeners. Water sparingly, and place it in bright, indirect sunlight, and watch it thrive.
The description is divided into two tabs on the product page on your online store: 'Versatility', and 'Care'. The first paragraph is not divided into either tab panel, so it's the remaining description content.
You can select from the following options to control the remaining description content:
- Is above the tabs — Show the content above the tabs.
- Is in a default tab — Show the content in a tab panel.
- Is by itself — Show only the content.
- Is hidden — Hide the content.
The Is by itself and Is hidden options are helpful if you want to show a brief description of the product in one location on the page, and tabs with additional details in another location.
For example, suppose you have a product with the above description.
You could add a block and select Is by itself under Remaining description content to show the first paragraph in one location on the page.
You could then add another block and select Is hidden under Remaining description content to show the 'Versatility' and 'Care' tabs in a different location on the page.
Default tab title
The tab label for the tab panel that contains the remaining description content.
ProTabs
Show ProTabs
Check this option to show ProTabs in the app block.
Layout
Tab layout
You can select from the following options to control the layout of the tabs:
- Horizontal — Show the tabs in the horizontal layout.
- Vertical — Show the tabs in the vertical layout.
- Automatic based on column width — Show the tabs in the automatic based on column width layout.
- Automatic based on screen width — Show the tabs in the automatic based on screen width layout.
Screen width
When the Automatic based on screen width option is selected under Tab layout, you can enter a Screen width value (in pixels) to control when the layout changes from vertical to horizontal.
When the screen size is narrower than the value, the tabs show in the vertical layout. When the screen size is wider than the value, the tabs show in the horizontal layout.
Vertical layout
You can use the following settings to control how the tabs behave when they show in the vertical layout:
- Open the first tab — Check this option to activate the first tab in the tab list when the page loads.
- Allow multiple open tabs — Check this option to allow multiple tabs to be active at the same time.
Advanced
Load tabs
You can select from the following options to control when the app block code runs in your store:
- Immediately — Run the app block code automatically as soon as possible. This is usually when the DOMContentLoaded event fires, but it can be delayed by code from the theme or other apps, especially if that code is render blocking.
- After the page loads — Run the app block code automatically when the load event fires.
- With custom JavaScript — Run the app block code manually with custom JavaScript.
Custom JavaScript
You can enter custom JavaScript code to change the app behaviour.