> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/bonnita-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://halosoft.gitbook.io/bonnita-documentation/product-page/product-information/product-tab.md).

# Product Tab

<figure><img src="/files/XuFGrP2oUsMR6d7B778w" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}

* Bonnita offers you to show 3 different product tab types: Description tab, Review tab and Custom tab.

* The Custom tabs content can be the same for all products or different for each product.

* You can create multiple different product tabs for your product page.
  {% endhint %}

* Go to **Customize** -> Choose **Default product** template in the dropdown of editor window to open theme editor of product page.

<figure><img src="/files/Sw1fhgIlNtehoZBUMGBJ" alt=""><figcaption></figcaption></figure>

* Click **Add block** from P**roduct Information** -> Choose **Custom tab**

#### <mark style="color:red;">**01. To show the same tab content for all products**</mark>, please choose <mark style="color:red;">"</mark><mark style="color:red;">**For all products"**</mark>. Then enter the content in the <mark style="color:red;">"</mark><mark style="color:red;">**Content"**</mark> text box. You can use your own html code to style your tab content as you want.

<figure><img src="/files/Afc5So4cdUNmCS0eiuuw" alt=""><figcaption></figcaption></figure>

<mark style="color:red;">**02. To show the different tab content for each product**</mark>, please choose <mark style="color:red;">**"For each product (Metafield)"**</mark>, no need to enter the content in the <mark style="color:red;">**"Content"**</mark> text box.&#x20;

<figure><img src="/files/JRhSEdkvs2JkdxfhH3Ir" alt=""><figcaption></figcaption></figure>

**Then, Please follow the instructions below to set up the different tab contents.**

**There are 2 ways to set up different contents: by** [**Metafield**](#setup-custom-tabs-by-metafields) **and by** [**Bulk Editor**](#setup-custom-tabs-by-bulk-editor)**.**

## **S**etup Custom Tabs by **Metafields**

### **Step 1 - Add a new Metafields for the Tab you want to create**

1. From your Shopify admin, go to **Settings** -> **Metafields**.
2. Click **Products → Add Definition.**
3. Please enter a **Namespace and Key** as we noted below.

> **Name**: Use the name of tab you want
>
> **Namespace and key**: <mark style="color:red;">**c\_f.**</mark>XXX&#x20;
>
> **Select content type**: Text -> Multi-line Text
>
> * (With <mark style="color:red;">**c\_f.**</mark> is a code you <mark style="color:red;">**MUST**</mark> use correctly and <mark style="color:red;">XXX</mark> is the name of tab you want, no white space or if you want to have space, you will use "*" to replace the white space. Example: <mark style="color:red;">c\_f.customtab</mark> or <mark style="color:red;">c\_f.custom\_tab</mark>)*
> * <mark style="color:blue;">Remember the key after</mark> <mark style="color:blue;"></mark><mark style="color:blue;">**c\_**</mark>*<mark style="color:blue;">**f.**</mark> <mark style="color:blue;"></mark><mark style="color:blue;">to paste it in theme editor of</mark> **Step 2.** Example.* *If your Namespace and key is c\_f.customtab so **the key you need to remember is**\*\* \*\*<mark style="color:red;">**customtab**</mark>*

<figure><img src="/files/2lLgmBdRutTgH17Q5Xqp" alt=""><figcaption></figcaption></figure>

### Step 2: Fill Product Tab Metafield 'Key'

1. Come back to **Editor of Product Page** -> **Custom Tab** -> scroll down to the bottom -> **Product Tab Metafield 'Key'**

2\. Fill the key from **Step 1** above to this box: Example as above is customtab

3\. Save

<figure><img src="/files/HoA4qh2MydREDHuM1ECF" alt=""><figcaption></figcaption></figure>

### Step 3: Insert the tab content for each product in the Product Metafields:

1. From your Shopify admin, go to **Products -> All products**.
2. Find and choose the product that you want to edit.
3. In **Metafields** area at the bottom, please enter the content in the "**Custom Tab**" field.

<figure><img src="/files/ssKzYxHGGRnFMXSN8RVN" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
You can use HTML Formatting for Custom Tab content.
{% endhint %}

{% embed url="<https://www.youtube.com/embed/TYNNbKT4h50>" %}
Instruction Video for How to set up product tabs with Metafields
{% endembed %}