> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/ella-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/ella-documentation/product-page/product-information/product-tabs.md).

# Product Tabs

![](/files/hxSz3Sw1Aq0u05ctbDfT)

![](/files/slDAJZygxazbNBx8Wc8k)

{% 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="/files/7Fip9OHoCqfCR4TqIHLr" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/cej1hveXsaTWvLNA362C" 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="/files/vJ19SlvkbY4VTyTxD2s9" 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="/files/dnbSAmWA9YIH2xVSIBH3" 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="/files/6etYFOJcCdWRYStEwFLv" 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="/files/2huKar3hn8DcdomIC8yb" 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="/files/CE3Fbr1xy2C4xCFA7Oxy" 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/FuzZJIGQtq6En8DCOPIo" 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 %}