The Tabs Studio app embed

The Tabs Studio app embed adds the app functionality to your online store.

You can activate, deactivate, preview, and customize the app embed 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.

On this page

Activate the app embed

To use Tabs Studio on your online store, you need to activate the app embed in your current theme.

To activate the app embed:

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

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

  3. From the theme editor page selector, select a product template (eg Products > Default product).

  4. On the sidebar, click the App embeds icon .

  5. Select the Tabs Studio app embed.

  6. Beside the Tabs Studio app embed, click the toggle to activate it.

  7. Optional

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

  8. Click Save.

Deactivate the app embed

To deactivate the app embed:

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

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

  3. On the sidebar, click the App embeds icon .

  4. Select the Tabs Studio app embed.

  5. Beside the Tabs Studio app embed, click the toggle to deactivate it.

  6. Click Save.

Customize the app embed

To customize the app embed:

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

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

  3. From the theme editor page selector, select a product template (eg Products > Default product).

  4. On the sidebar, click the App embeds icon .

  5. Select the Tabs Studio app embed.

  6. View and customize the settings for the app embed by clicking the expand icon next to the app embed name.

  7. Click Save.

The app embed settings

The app embed settings affect the way that the app functions on your online store.

General

Find location for tabs

The product description is the content that you enter in the Description area on the product details page in your Shopify admin.

The location determines the source content (usually the product description) for the tab panels, and where the tabs show on your online store's product pages.

The content shows in the default tab (if the default tab is enabled), or above the tabs (if the default tab is not enabled), and you can divide it into tabs using headings.

For example, if you select Look for product description, then the product description shows in the the default tab (eg 'Description'), and you can add headings into the description to divide it into additional tabs (eg 'Features' and 'Sizing' ). Since the product description is the content, the tabs show where the description is on the page. If you use the theme settings to move the product description, then the tabs move with it.

Use the Find location for tabs setting to select the tab content.

To show the tabs in a different place while keeping their content, use the Location settings on the Settings > General page in the app.

You can select from the following options to determine the location for the tabs:

  • Off — Don't use any content. Tabs will not show unless initialized with custom code.
  • Look for product description — Try to automatically use the product description for the content. If the product description can't be found, then tabs will not show.
  • Look for product description or fallback location — Try to automatically use the product description for the content. If the product description can't be found, then tabs show in a fallback location, usually below the 'Add to Cart' buttons. There is no content in the fallback location, so the panel for the default tab (if enabled) is empty, and only ProTabs show in the tab list.
  • Use CSS selector — Manually identify the element that contains the content you want to organize into the tabs. If you select this option, you need to enter a CSS selector in the CSS selector field, or tabs will not show.

CSS selector

When you select Use CSS selector under Find location for tabs, enter a CSS selector in the CSS selector field to manually identify an element to use for the content.

For example, suppose your theme renders the product description with the following code: 

<div class="product-description">
  {{ product.description }}
</div>

To identify the description, you could enter .product-description.

If no element is selected by the selector, then tabs will not show.

Replace elements with product description when using CSS selector

When you select Use CSS selector under Find location for tabs, and you enter a CSS selector in the CSS selector field, check this option to replace any content in the selected elements with the product description content.

Replacing elements with the product description content is useful if the theme or an app modifies the description in some way, such as by adding in code for a different tab system, and you don't want the modifications to interfere with or be reflected in the tabs.

Advanced

Load Tabs Studio

You can select from the following options to control when the app code runs in your store:

  • Immediately — Run the app 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 code automatically when the load event fires.
  • With custom JavaScript — Run the app code manually with custom JavaScript.

Custom JavaScript

You can enter custom JavaScript code to change the app behaviour.

Custom CSS

You can enter custom CSS code to change the app appearance.

Still need help? Contact Us Contact Us

Related