# Product Tab

<figure><img src="https://3875480980-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8KVBTL14Wsr30Mq5W8PK%2Fuploads%2F8OwceZUcWMSjnidj2q19%2Fimage.png?alt=media&#x26;token=e102342f-0c0d-4647-8c63-023f26685e30" 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="https://3875480980-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8KVBTL14Wsr30Mq5W8PK%2Fuploads%2FCmHgOtO45g4wXBXt4Qsp%2Fimage.png?alt=media&#x26;token=54115942-37f6-48e1-b992-fa2a2e21b618" 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="https://3875480980-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8KVBTL14Wsr30Mq5W8PK%2Fuploads%2FzbvWjiw9Bkl8xH3kP5Hj%2Fimage.png?alt=media&#x26;token=4e5b8452-c59b-4655-94a2-7e6a6ae3f40a" 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="https://3875480980-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8KVBTL14Wsr30Mq5W8PK%2Fuploads%2FuXVWv8rtvigv8zPqKsX5%2Fimage.png?alt=media&#x26;token=f60786d7-a282-48b1-a4be-097552036e9d" 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="https://3875480980-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8KVBTL14Wsr30Mq5W8PK%2Fuploads%2FBwdIJL7gOw9XWrRiYZZd%2Fimage.png?alt=media&#x26;token=4418917f-f807-4c25-9c07-97fcb9316bf7" 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="https://3875480980-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8KVBTL14Wsr30Mq5W8PK%2Fuploads%2FSo0UQl72Mpv5itnmbmQ7%2Fimage.png?alt=media&#x26;token=1655d72d-042a-46ef-8173-b36b3f6aeb88" 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="https://3875480980-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8KVBTL14Wsr30Mq5W8PK%2Fuploads%2F14LIH40Xr6lllwHVvm3c%2Fimage.png?alt=media&#x26;token=dcd5d80f-2632-4f65-8d3f-31134fda6fd3" 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 %}