Advanced Product Tabs: FAQs

STEP 1

Open your theme code editor:

You can go to "Online Store" ➝ "Themes" ➝ "Edit code"

STEP 2

You need to find where the "{{product.description}}" is stored. Usually it can be in "product.liquid" or "product-template.liquid" file.

To find it please type "product" into the search bar and you will get a list of suggested files. Choose "product.liquid" or "product-template.liquid" and open it.

STEP 3

Once you find the "product.description" - you need to make one action:

Select this part "{{product.description}}". Please make sure you are selecting the curly brackets as well.

And replace with the following code:

<div class="pbc-tab-widget" data-product-id="{{ product.id }}"> <script id="pbc-description" type="text/html"> {{ product.description }} </script> </div>

After clicking "Save" button please close the code editor. That's it!

STEP 1

Open General tab, find a "Tab group format" field and select - "Based on product description"

After you will see a new field underneath - "Tag for tab header". Here you need to select what Heading(H) will be used in your product descriptions. You can select from H1 to H6.

Important! If you make the product description headings in a format different to what you set here - our app won't be able to automatically detect that and show on a website.

STEP 2

Now you need to organize the description in the correct format. Here is an example:

I opened the product and made the description in a following way:

Description - H4 - it will be a tab name

Content - Paragraph - it will be a content for a 1st tab.

Shipping - H4

Content - Paragraph - this will be a content for the 2nd tab

Specifications - H4

Content - Paragraph - this will be a content for the 3nd tab

As a result, I will have 3 tabs working based on product description.

STEP 1

Open the tab group you want to edit and navigate to the "TABS" section Here you need to open the 1st tab, click on "Tab content type" dropdown and select - "Product Description"

STEP 2

Now open the 2nd tab and select "Text" in the Tab content type dropdown.

Thats it! From this moment your tab group will automatically use unique product descriptions in combination with a static tab.

1. Create Metafield

1. Go to your store's Settings.

2. On the left sidebar, find and click Custom data.

3. Navigate to Products metafields definitions and click the Add definition button.

Enter Metafield Details:

• Namespace: Enter a namespace to organize your metafields (e.g., "custom").

• Key: Enter a key to identify this metafield (e.g., "material"). Please note, Namespace and Key should be separated using a period

• Type: Choose the appropriate type for the value (e.g., text, number, boolean).

Currently, we support the following types:

• True or false,

• Date and time,

• Date,

• Single line text,

• Multi-line text.

Click the Save button.

2. Add metafield values

1. Go to Products.

2. Select the product where you want to add a metafield value.

3. Scroll down to the metafield section and add the value.

3. Add settings

1. Go back to the Advanced Product Tabs app.

2. Edit your tabs with metafield values.

3. Select the metafield content type and fill in the Namespace and Key from the first step. Please be aware that in metafileds Namespace and Key are single fields, thus you need to split the info into 2 separate fields in the app.

4. Save your tab group.

4. Finish

• Go to your product page and check if it works.

• If you encounter any issues during this process, feel free to contact us.

1. Description-Based Tabs (Automated & Content-driven)

This type of tab is perfect if you have already written your product description and used heading tags to structure it. The app automates the rest.

• How it works: It works on a product-by-product basis. It scans the existing product description for HTML headings (H2, H3, or H4) and uses them to instantly generate a clean, tabbed layout.

• Ideal for: Store owners who already have detailed descriptions and want a quick way to convert long text into a professional, easy-to-digest interface.

• Key Advantage: It saves time by automatically generating unique tabs for every product from its own description.

2. Static-Based Tabs (Versatile & Product-agnostic)

This type is ideal for content that is universal or relevant to many products, like a sizing chart, standard shipping information, or a branded promotional video.

• How it works: You create a set of tabs with specific content types (e.g., Image, Video, HTML table, or Metafields) and then apply it to a group of products or a specific collection.

• Ideal for: Store owners who need to display the same information across many products, or who need to include specialized content like media.

• Key Advantage: You maintain control over content and targeting, creating content once and displaying it across multiple products.