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. Click Customize for the theme that you want to edit.

4. From the dropdown menu, select the template that contains the element that you want to add tabs to (for example, Products > Default product).

5. Click Theme settings.

6. Click the App embeds tab.

7. If the Tabs Studio app embed is not activated, click the toggle to activate it.

8. Click the Tabs Studio app embed.

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

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

11. 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.

12. Click Save.