Shared tabs

Shared tabs are extremely powerful because they can be applied to multiple products at once. The content for a shared tab only ever needs to be edited in one place, regardless of the number of products the tab is applied to, so changing a tab for tens, hundreds or even thousands of products can be done in the same amount of time it would take for one product.

A shared tab can be applied to all products, a group of products, and/or individually selected products. When applying a shared tab to a group of products you can use collections, product types, product vendors, product tags, or any combination of the four.


On this page


The shared tabs list

The shared tabs list shows you all of the shared tabs that you've created so that you can easily edit or reorder them. Each tab in the list shows you its title, label, visibility, position and the number of product groups its applied to so that you can quickly see where the tabs will show.

To access the shared tabs list:

  1. Click Shared tabs from the main menu in the app.

Create a shared tab

Tabs that can be shared by multiple products are created directly in the app.

To create a shared tab:

  1. Click Shared tabs from the main menu in the app.
  2. Click the Create tab button.
  3. Type the tab title into the Title area.
  4. Type or paste the tab content into the Content area.
  5. Click the Save button to save the tab.
Create your first shared tab by clicking the 'Create shared tab' button

Set the tab title

The tab title is the text that appears in the tab link. To set the tab title when editing or creating a tab:

  1. Click in the Title input.
  2. Add or change the text.
  3. Click the Save button to save the tab.

The title accepts Liquid code so it can be made to be fully dynamic. For example, to include the current product name you could set the tab title to:

About {{ product.title }}


Set the tab type

To help make adding tab content easier you can choose from a number of different tab types. To set the tab type when editing or creating a tab:

  1. Click the Type select box.
  2. Choose a tab type.
  3. Click the Save button to save the tab.

The available types are:

Text

Choose the text type to add basic formatting to your tab content such as lists, links and headings.

Page content

Choose the page content type to display the content from one of your shop's pages as the tab content. The page doesn't need to be visible in your live shop anywhere, it simply needs to exist in the Online Store > Pages area of your Shopify admin.

Using page content allows for more advanced formatting than the basic text tab type as well as the ability to include rich media such as images and videos.

App integration

Choose the app integration type to easily display another app, such as reviews or sizing charts, for the tab content.

HTML

Choose the HTML type to type or paste in raw HTML code for full control over the tab content.


Add the tab content

The process for adding the content to a tab depends on the chosen tab Type.

Text

To add content to a tab when the tab type is text:

  1. Type or paste your content into the Content area.
  2. Add formatting to your content using the buttons at the top of the Content area.
  3. Click the Save button to save the tab.

Page content

To add content to a tab when the tab type is page content:

  1. Click Online Store from your main Shopify admin menu.
  2. Click Pages from the Online Store submenu in your main Shopify admin.
  3. Click the Add page button.
  4. Add the page Title and Content. The title is purely for your own reference while the content will be used for the tab content.
  5. Click the Save button to save the page.
  6. Access the Tabs app.
  7. Click Shared tabs from the main menu in the app.
  8. Create a new tab or click on an existing tab to edit it.
  9. Set the tab Type to Page.
  10. Click the Page select box.
  11. Choose the page you created in step 3.
  12. Click the Save button to save the tab.

App integration

To add content to a tab when the tab type is app integration:

  1. Locate the app you want to use from the list of built-in app integrations.
  2. Click the Off button for the app to turn it On.
  3. Click the Save button to save the tab.

If the app you want to use is not in the list of built-in app integrations:

  1. Copy the code for the app you want to use. The app code can most likely be found in the documentation for the app but if not you can contact the app developer to have them send it to you.
  2. Paste the code into the Use any app area.
  3. Click the Save button to save the tab.

Note that Tabs does not have the ability to install other apps into your shop. To use any kind of third-party app, whether it's through a built-in integration or you've pasted the code in, you will need to install the other app separately from the Shopify App Store.

HTML

To add content to a tab when the tab type is HTML:

  1. Type or paste your HTML into the Content area.
  2. Click the Save button to save the tab.

Apply the tab to products

TO DO: Need some overview content here.

Apply the tab to all products

To apply the tab to all products:

  1. Click All products from the Applies to panel.
  2. Click the Save button to save the tab.

Apply the tab to products by collection

To apply the tab to products in one or more collections:

  1. Click Some products from the Applies to panel.
  2. Click the Browse collections button.
  3. Click the checkbox for each of the desired collections.
  4. Click the Add button to add the collections.
  5. Click the Save button to save the tab.

The tab will be shown for all products belonging to any of the collections that have been added.

Apply the tab to products by type

To apply the tab to products with the same type:

  1. Click Some products from the Applies to panel.
  2. Click the select box that shows Collections.
  3. Click Types from the list of options.
  4. Type the name of a product type into the input beside the Types select box.
  5. Click the Add button to add the type.
  6. Repeat steps 4 and 5 until all of the desired product types have been added.
  7. Click the Save button to save the tab.

The tab will be shown for all products that match any of the types that have been added. The product type names are case sensitive so if a tab isn't appearing when assigned by type then double-check to make sure the type name is an exact match.

Apply the tab to products by vendor

To apply the tab to products with the same vendor:

  1. Click Some products from the Applies to panel.
  2. Click the select box that shows Collections.
  3. Click Vendors from the list of options.
  4. Type the name of a vendor into the input beside the Vendors select box.
  5. Click the Add button to add the vendor.
  6. Repeat steps 4 and 5 until all of the desired vendors have been added.
  7. Click the Save button to save the tab.

The tab will be shown for all products that match any of the vendors that have been added. The product vendor names are case sensitive so if a tab isn't appearing when assigned by vendor then double-check to make sure the vendor name is an exact match.

Apply the tab to products by tag

To apply the tab to products with the same tag:

  1. Click Some products from the Applies to panel.
  2. Click the select box that shows Collections.
  3. Click Tags from the list of options.
  4. Type the name of a tag into the input beside the Tags select box.
  5. Click the Add button to add the tag.
  6. Repeat steps 4 and 5 until all of the desired tags have been added.
  7. Click the Save button to save the tab.

The tab will be shown for all products that match any of the tags that have been added. The product tag names are case sensitive so if a tab isn't appearing when assigned by tag then double-check to make sure the tag name is an exact match.

Apply the tab to products individually

To apply the tab to products individually:

  1. Click Some products from the Applies to panel.
  2. Click the select box that shows Collections.
  3. Click Products from the list of options.
  4. Click the Browse products button.
  5. Click the checkbox for each of the desired products.
  6. Click the Add button to add the products.
  7. Click the Save button to save the tab.

Exclude the tab from products

To prevent a tab from being applied to one or more products:

  1. Click Browse products from the Exceptions panel.
  2. Click the checkbox for each product the tab should not be applied to.
  3. Click the Add button to add the products.
  4. Click the Save button to save the tab.

Set the tab visibility

Hiding a tab is a great way to temporarily prevent it from appearing in your shop while you work on it.

To hide a tab:

  1. Uncheck the Visible box from the Visibility panel.
  2. Click the Save button to save the tab.

Hidden tabs are clearly marked in the list of shared tabs so that you can easily see which tabs are not being displayed your shop.


Set the tab label

The tab label helps you identify the tab in the list of shared tabs. Labels are especially helpful when you have multiple shared tabs with the same title. By giving each tab a descriptive label you can see exactly what the tab is for without having to change the tab title. Labels are fully searchable and only used internally.

To set the tab label:

  1. Click the Label input from the Organization panel.
  2. Type in a description for the tab.
  3. Click the Save button to save the tab.

Set the tab position

A set of tabs will show the description tab first (if it's enabled) followed by any specific tabs and then any shared tabs. The order of the specific tabs is determined by the order of the headings in the product description and the order of the shared tabs is determined by the order they appear in in the shared tabs list. Dragging and dropping tabs in the shared tabs list only orders them among the other shared tabs.

To make a shared tab appear in front of all other tabs or to place it among the specific tabs you can use the position setting. If a position is given to a shared tab then that's where the tab will show in the set.

For example, let's say a tab set consists of a description tab, two specific tabs, and two shared tabs. To move the last shared tab in front of the description tab you would give it a position of 1. To move it between the two shared tabs you would give it a position of 3.

To set the tab position:

  1. Click the Position input from the Organization panel.
  2. Type in the position number for the tab.
  3. Click the Save button to save the tab.

Edit a shared tab

To edit a shared tab:

  1. Click Shared tabs from the main menu in the app.
  2. Click the tab you wish to edit from the list of shared tabs.

Duplicate a shared tab

To duplicate a shared tab:

  1. Click Shared tabs from the main menu in the app.
  2. Click the tab you wish to duplicate from the list of shared tabs.
  3. Click the Duplicate link.

Set the order of shared tabs

The order that shared tabs appear in on the page is determined by their order in the shared tabs list. The higher a tab is in the list the further to the left (or closer to the top in the accordion layout) it will be on the page. To place a shared tab in front of the description tab or among specific tabs you can set the tab position.

To set the order of shared tabs:

  1. Click Shared tabs from the main menu in the app.
  2. Drag and drop the tabs into your preferred order.

Each time you drag and drop a tab the positions are automatically saved so there's no need to click a save button.


Delete a shared tab

To delete a shared tab:

  1. Click Shared tabs from the main menu in the app.
  2. Click the tab you wish to delete from the list of shared tabs.
  3. Click the Delete tab button from the bottom of the page.
  4. Click the Delete tab button from the confirmation popup.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.