Move tabs
By default, tabs work with the product description content, so they show where the product description is on the page.
The easiest way to move the tabs is to move the product description.
If the product description can't be found, the tabs may still show on the page but they won't move when the description is moved.
To move the tabs with the description, make sure the theme shows the product description with the original description content.
Alternatively, move the tabs using the app settings or the Tabs Studio app block.
To move the product description:
-
From your Shopify admin, go to Online Store > Themes.
-
Find the theme that you want to edit, and then click Customize.
-
From the dropdown menu, select a product template (for example, Products > Default product).
-
Use the theme settings to show the product description in a different location.
If you're not sure how to use the theme settings to show the product description in a different location, please ask your theme developer.
-
Click Save.
Using the app settings
To move tabs using the app settings:
-
Determine the CSS selector to use for the element that you want to move the tabs to.
For example, if the element has a class of
product-container
, like this:<div class="product-container">
Then you could use the selector
.product-container
.The element and the selector to use for it are specific to the theme. If you're not sure which selector to use, please ask your theme developer.
-
From the main menu in the Tabs Studio app, click Settings.
-
Click General.
-
In the Move the tabs to a new location section, in the CSS selector field, enter the CSS selector for the element that you want to move the tabs to.
- Optional
Under Show the tabs, select Above the element content to show the tabs above any existing content in the element.
-
Click Save.
It may take a few minutes for the changes to show in your shop. If an element can not be found then the tabs will not be moved.
Using the Tabs Studio app block
-
From your Shopify admin, go to Online Store > Themes.
-
Find the theme that you want to edit, and then click Customize.
-
From the dropdown menu, select a product template (for example, Products > Default product).
-
Use the theme settings to hide or remove the product description.
If you're not sure how to use the theme settings to hide or remove the description, please ask your theme developer.
- Add the Tabs Studio app block where you want the tabs to show.
-
Click Save.