# Product Tab

![](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%2FEMCy8mxex0iOyS668Hom%2FScreenshot_11.jpg?alt=media&#x26;token=f39daf04-07b0-4d90-831a-2cde84d36a23" alt=""><figcaption></figcaption></figure>

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

![](https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FV6Na71YfoK8jVG7sfZam%2F137.jpg?alt=media\&token=c1170436-fc0e-4615-9d65-bca0202ba1cf)

#### <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://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2F7og9RHZBKZ7pGsMnPOK0%2FScreenshot_12.jpg?alt=media&#x26;token=925548f6-50fe-47bb-a20a-4741730989b7" 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://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FzUFWJJCSJT2WDGPwJ0E9%2FScreenshot_13.jpg?alt=media&#x26;token=b8a51764-f500-4a37-a3cd-b472d9233ec1" 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://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2F9daz4zsawRxGyRwaK5ad%2FScreenshot_14.jpg?alt=media&#x26;token=24e0d3df-7ed8-449f-9822-e9dc4aa83a2d" 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://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FhhEOzZAu2lspwXofc8Wc%2FScreenshot_15.jpg?alt=media&#x26;token=73dd9353-a9bf-43eb-8812-e3fd5ed898ed" 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 %}

## Setup Custom Tabs by [Bulk Editor](https://halosoft.gitbook.io/ella-documentation/~/changes/ya8CSeFxwPyu94dBt1WL/page/bulk-editor-page)

![](https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FUA9ETZs8i1gkZD0XU7r9%2Ftab-6.gif?alt=media\&token=df14aff8-8e66-453e-a758-e4316100fa6c)
