Show an app in a tab

The easiest way to show an app in a tab is to enable an app integration. If an app integration does not exist, you can move an app into a tab instead.

Apps in tabs are not covered by our help team

Apps in tabs are rendered exactly as they would be if they weren't in tabs.

If an app in a tab doesn't look or work the way you expect it to then you'll need to contact the developer of that app for help.

Enable an app integration

Tabs currently has app integrations for:

You need to have the app that you want to integrate installed in your shop, Tabs Studio can not install it for you.

To enable an app integration:

  1. From the main menu in the Tabs Studio app, click Tabs.

  2. Create a new ProTab or click the title of the ProTab that you want to edit.

  3. Under Type, select App integration.

  4. In the row of the app that you want to show in the tab, click the toggle switch to turn it On.

  5. Click Save.

Tabs Studio does not remove duplicate apps

The Tabs Studio app will not remove an app that shows outside of the tabs, even if that app shows in a tab.

For example, if your product page shows reviews from the Shopify Product Reviews app, and then that app is enabled in a tab, the reviews will show in their original location as well as inside of the tab.

If you don't want the app to show outside of the tabs, you will need to contact the app developer and ask them how to remove its display code from the theme files. The app needs to stay installed to show it in the ProTab.

Move an app into a tab

To move an app into a tab:

  1. Make sure the app that you want to show in a tab is visible on the page, outside of the tabs, and that it displays and functions correctly.

  2. Determine the CSS selector to use for the app that you want to show in a tab.

    The selector should target the outermost element of the app. If you're not sure which selector to use, please ask the developer of the app.

  3. From the main menu in the Tabs Studio app, click Tabs.

  4. Create a new ProTab or click the title of the ProTab that you want to edit.

  5. Under Type, select Page element.

  6. In the Element selector field, enter the CSS selector for the app.

  7. Click Save.

Still need help? Contact Us Contact Us