# Product Tabs

![](https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2F1pf5H5M5zV4nNX2Mrerh%2F135.jpg?alt=media\&token=ec133f37-233a-408e-b8f0-84b20df92722)

![](https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FL8LMUXEhnUaV06LTyOXI%2F136.jpg?alt=media\&token=07a2d062-0370-421e-acdc-09987494dac4)

{% hint style="info" %}

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

* 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://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FEIMR8oCuBJBIA5oa7esd%2Fimage.png?alt=media&#x26;token=e56b9f2c-2ff9-4e2d-9041-d40195ce71de" alt=""><figcaption></figcaption></figure>

* Click **Add block** from **Product Information** -> Choose **Custom tab.**

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FzO4BaW1OFqdwz9DDmcyK%2Fimage.png?alt=media&#x26;token=f728ab86-652a-4fa7-aa2a-f2815b6aa90a" alt=""><figcaption></figcaption></figure>

#### <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;">**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://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FgXTct6mvSt0PkaS2gLj7%2Fimage.png?alt=media&#x26;token=2a17c3ab-17a3-4b64-9e83-aa0a764f0431" 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;">**"Specific products using metafield"**</mark>, no need to enter the content in the <mark style="color:red;">**"Content"**</mark> text box.&#x20;

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2F43yvLGwxtB4SBr9d1V58%2Fimage.png?alt=media&#x26;token=a49804ca-70dc-44c4-b711-58226210cdf2" 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** -> **Custom data**.
2. Click **Products → Add Definition.**

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FPTqNndRguDzb15QPCqT0%2Fmeta-field.jpg?alt=media&#x26;token=904657ee-9381-4d21-a258-56b1c8d7c2bb" alt=""><figcaption></figcaption></figure>

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://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2Fjiu9Myg8d2Frz7NvzXwD%2Fimage.png?alt=media&#x26;token=943aa4ed-4f52-4abc-bd37-1da5112f3d76" 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. At **"Product Custom Source",** select **From Entering Metafield Key.**
3. At the **Product Tab Metafield 'Key'** box, fill the key from [**Step 1**](#step-1-add-a-new-metafields-for-the-tab-you-want-to-create) above. Example as above is **customtab**.
4. Save.

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FG7GgBYdyWNOieYjTQztI%2Fimage.png?alt=media&#x26;token=46787897-81f4-43d9-89ce-cfb52f8afc8c" 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://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2F64OYbuFUXnTV6K1mUzgQ%2FScreenshot_16.jpg?alt=media&#x26;token=3c6e2af6-7f54-470a-b846-eb2604a91b74" 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 %}