Show tabs in any HTML element

To show tabs in any HTML element:

1. Determine the CSS selector to use for the element that contains the content you want to add tabs to.

   For example, if your product description content is in a div element with a class of product-description, like this:

   <div class="product-description">
     Product description content here.
   </div>

   Then you could use the selector .product-description.

   A tab set will be created for the content in every element that is found using the selector.

   If you do not want multiple tab sets on the page, make sure the selector is specific enough to target a single element.

   If you're not sure which selector to use, please ask your theme developer.

2. From your Shopify admin, go to Online Store > Themes.

3. Find the theme that you want to edit, and then click Customize.

4. From the dropdown menu, select a product template (for example, Products > Default product).

5. From the sidebar, click the App embeds icon .

6. Select the Tabs Studio app embed.

7. View the settings for the app embed by clicking the expand icon next to the app embed name.

8. Under Find location for tabs, select Use CSS selector.

9. In the CSS selector field, enter the selector from step 1.

10. Optional

    Check Replace elements with product description when using CSS selector to replace any existing content in the element, such as tabs from the theme or a different tabs app, with the original product description content before adding the tabs.

11. Click Save.