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

# Product Tab

<figure><img src="/files/6b91z7CPHwaKCKfvY0o5" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Spark offers 2 ways to show the Product Tab:

* Show the same tab content for all products
* Show the different tab content for each product
  {% endhint %}

## Show the same tab content for all products

**To show the same tab content for all products**, please choose "**Show For All Products"**. Then enter the content in the "**Product Tab Content"** text box. You can use your own html code to style your tab content as you want.

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

## Show the different tab content for each product

**To show the different tab content for each product**, please choose **"Only Show For This Product"**, no need to enter the content in the **"Product Tab Content"** text box.

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

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

### **Setup Product 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/u3YkG67JwvZUD9g22Kid" alt=""><figcaption></figcaption></figure>

3. Please enter a **Namespace and Key** as we noted below.

{% hint style="info" %}
**Name**: Use the name of tab you want

**Namespace and key**: **c\_f.**&#x58;XX

**Select content type**: Text -> Multi-line Text

* (With **c\_f.** is a code you **MUST** use correctly and XXX 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: c\_f.customtab or c\_f.custom\_tab)*
* Remember the key after **c\_*****f.** to paste it in theme editor of **Step 2.** Example.* *If your Namespace and key is c\_f.customtab so **the key you need to remember is customtab***
  {% endhint %}

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

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

At the **Product Tab Content 2** box, fill in the key from [**Step 1**](#step-1-add-a-new-metafields-for-the-tab-you-want-to-create) above. Example as above is **customtab**.

<figure><img src="/files/KqeRifg0s4K08PlBcczi" 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/BY6oCDXTbnKX3psHwevb" alt=""><figcaption></figcaption></figure>

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

{% hint style="info" %}
Because the FAQ tab has its own style, we will attach a sample HTML code below, you can refer to and use
{% endhint %}

```html
<div id="accordion">
    <div class="card card-2">
        <div class="card-header" id="heading-1569828417275">
            <button class="title collapsed" data-toggle="collapse" data-target="#1569828417275" aria-expanded="true" aria-controls="1569828417275">
                Will your template be fully compatible with Shopify?
            </button>
            <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon--wide icon-chevron-down" viewbox="0 0 498.98 284.49"><defs></defs><path class="cls-1" d="M80.93 271.76A35 35 0 0 1 140.68 247l189.74 189.75L520.16 247a35 35 0 1 1 49.5 49.5L355.17 511a35 35 0 0 1-49.5 0L91.18 296.5a34.89 34.89 0 0 1-10.25-24.74z" transform="translate(-80.93 -236.76)"></path></svg>
        </div>
        <div id="1569828417275" class="collapse" aria-labelledby="heading-1569828417275" data-parent="#accordion">
            <div class="card-body">
                <p>Yes it is.</p>
            </div>
        </div>
    </div>
    <div class="card card-2">
        <div class="card-header" id="heading-1569828878550">
            <button class="title collapsed" data-toggle="collapse" data-target="#1569828878550" aria-expanded="true" aria-controls="1569828878550">
                I cannot upload the theme to my Shopify store / Shopify alerts that the file is too big to upload, what is the problem?
            </button>
            <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon--wide icon-chevron-down" viewbox="0 0 498.98 284.49"><defs></defs><path class="cls-1" d="M80.93 271.76A35 35 0 0 1 140.68 247l189.74 189.75L520.16 247a35 35 0 1 1 49.5 49.5L355.17 511a35 35 0 0 1-49.5 0L91.18 296.5a34.89 34.89 0 0 1-10.25-24.74z" transform="translate(-80.93 -236.76)"></path></svg>
        </div>
        <div id="1569828878550" class="collapse" aria-labelledby="heading-1569828878550" data-parent="#accordion">
            <div class="card-body">
                <p>Please make sure that you follow below steps:</p>
<p>1/ Download the package from themeforest.net (the file is in zip format)<br><br>2/ Extract the file you've just downloaded.<br><br>3/ Find this file: Spark-1.0.0-sections-ready.zip in the folder Spark Sections Ready 1.0.0, then you just need to upload Spark-1.0.0-sections-ready.zip file to your Shopify store.<br></p>
            </div>
        </div>
    </div>
    <div class="card card-2">
        <div class="card-header" id="heading-1569828968822">
            <button class="title collapsed" data-toggle="collapse" data-target="#1569828968822" aria-expanded="true" aria-controls="1569828968822">
                What I have to do when I need your support?
            </button>
            <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon--wide icon-chevron-down" viewbox="0 0 498.98 284.49"><defs></defs><path class="cls-1" d="M80.93 271.76A35 35 0 0 1 140.68 247l189.74 189.75L520.16 247a35 35 0 1 1 49.5 49.5L355.17 511a35 35 0 0 1-49.5 0L91.18 296.5a34.89 34.89 0 0 1-10.25-24.74z" transform="translate(-80.93 -236.76)"></path></svg>
        </div>
        <div id="1569828968822" class="collapse" aria-labelledby="heading-1569828968822" data-parent="#accordion">
            <div class="card-body">
                <p>To save your time and reach our support quickly, please follow below steps:</p>
<p>1/ Create a staff account for us (with Themes permission and Settings permission) <a href="http://docs.shopify.com/manual/settings/account/staff-members" title="http://docs.shopify.com/manual/settings/account/staff-members" aria-describedby="a11y-external-message">http://docs.shopify.com/manual/settings/account/staff-members</a></p>
<p>2/ Capture screenshot or video for the issue you get.</p>
<p>3/ Specify which template and version you are using.</p>
<p>4/ Describe clearly how to reproduce the issue.</p>
<p>5/ Send all information (staff account, screenshot, video, template name and version, description of the issues, link) to <a href="mailto:support@halothemes.com" title="mailto:support@halothemes.com" aria-describedby="a11y-external-message">support@halothemes.com</a></p>
            </div>
        </div>
    </div>
    <div class="card card-2">
        <div class="card-header" id="heading-1569829479298">
            <button class="title collapsed" data-toggle="collapse" data-target="#1569829479298" aria-expanded="true" aria-controls="1569829479298">
                Would assistance be available to upload the template if needed?
            </button>
            <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon--wide icon-chevron-down" viewbox="0 0 498.98 284.49"><defs></defs><path class="cls-1" d="M80.93 271.76A35 35 0 0 1 140.68 247l189.74 189.75L520.16 247a35 35 0 1 1 49.5 49.5L355.17 511a35 35 0 0 1-49.5 0L91.18 296.5a34.89 34.89 0 0 1-10.25-24.74z" transform="translate(-80.93 -236.76)"></path></svg>
        </div>
        <div id="1569829479298" class="collapse" aria-labelledby="heading-1569829479298" data-parent="#accordion">
            <div class="card-body">
                
                <p>Yes, we will assist you to install the template if needed</p>
            </div>
        </div>
    </div>
    <div class="card card-2">
        <div class="card-header" id="heading-1569830261920">
            <button class="title collapsed" data-toggle="collapse" data-target="#1569830261920" aria-expanded="true" aria-controls="1569830261920">
                Do you guys offer customisation services for your themes?
            </button>
            <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon--wide icon-chevron-down" viewbox="0 0 498.98 284.49"><defs></defs><path class="cls-1" d="M80.93 271.76A35 35 0 0 1 140.68 247l189.74 189.75L520.16 247a35 35 0 1 1 49.5 49.5L355.17 511a35 35 0 0 1-49.5 0L91.18 296.5a34.89 34.89 0 0 1-10.25-24.74z" transform="translate(-80.93 -236.76)"></path></svg>
        </div>
        <div id="1569830261920" class="collapse" aria-labelledby="heading-1569830261920" data-parent="#accordion">
            <div class="card-body">
                <p>Yes, we do. Please send your customisation requests to <a href="mailto:support@halothemes.com" title="mailto:support@halothemes.com" aria-describedby="a11y-external-message">support@halothemes.com</a>, we will give you our quote. Thank you.</p>
            </div>
        </div>
    </div>
    <div class="card card-2">
        <div class="card-header" id="heading-1569830303138">
            <button class="title collapsed" data-toggle="collapse" data-target="#1569830303138" aria-expanded="true" aria-controls="1569830303138">
                Can I turn on/off Lazy Loading Image / Item Animation / Fade Up on the page?
            </button>
            <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon--wide icon-chevron-down" viewbox="0 0 498.98 284.49"><defs></defs><path class="cls-1" d="M80.93 271.76A35 35 0 0 1 140.68 247l189.74 189.75L520.16 247a35 35 0 1 1 49.5 49.5L355.17 511a35 35 0 0 1-49.5 0L91.18 296.5a34.89 34.89 0 0 1-10.25-24.74z" transform="translate(-80.93 -236.76)"></path></svg>
        </div>
        <div id="1569830303138" class="collapse" aria-labelledby="heading-1569830303138" data-parent="#accordion">
            <div class="card-body">
                <p>Yes. You can turn on/off the animation in the Setting page.</p>
            </div>
        </div>
    </div>
    <div class="card card-2">
        <div class="card-header" id="heading-1569830330055">
            <button class="title collapsed" data-toggle="collapse" data-target="#1569830330055" aria-expanded="true" aria-controls="1569830330055">
                Can I turn on/off some blocks on the page?
            </button>
            <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon--wide icon-chevron-down" viewbox="0 0 498.98 284.49"><defs></defs><path class="cls-1" d="M80.93 271.76A35 35 0 0 1 140.68 247l189.74 189.75L520.16 247a35 35 0 1 1 49.5 49.5L355.17 511a35 35 0 0 1-49.5 0L91.18 296.5a34.89 34.89 0 0 1-10.25-24.74z" transform="translate(-80.93 -236.76)"></path></svg>
        </div>
        <div id="1569830330055" class="collapse" aria-labelledby="heading-1569830330055" data-parent="#accordion">
            <div class="card-body">
                
                <p>Yes. You can turn on/off almost any blocks on the page (featured products, slideshow, banners, related products, recent products,...).</p>
            </div>
        </div>
    </div>
    <div class="card card-2">
        <div class="card-header" id="heading-1569830354345">
            <button class="title collapsed" data-toggle="collapse" data-target="#1569830354345" aria-expanded="true" aria-controls="1569830354345">
                I want to have the dropdown cart displayed automatically every time clients hover over it (instead of clicking on it). Is it possible?
            </button>
            
            <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon--wide icon-chevron-down" viewbox="0 0 498.98 284.49"><defs></defs><path class="cls-1" d="M80.93 271.76A35 35 0 0 1 140.68 247l189.74 189.75L520.16 247a35 35 0 1 1 49.5 49.5L355.17 511a35 35 0 0 1-49.5 0L91.18 296.5a34.89 34.89 0 0 1-10.25-24.74z" transform="translate(-80.93 -236.76)"></path></svg>
        </div>
        <div id="1569830354345" class="collapse" aria-labelledby="heading-1569830354345" data-parent="#accordion">
            <div class="card-body">
                
                <p>Yes, we have a setting for you to switch between these two options: Display on Hover and Display on Click.</p>
            </div>
        </div>
    </div>
    <div class="card card-2">
        <div class="card-header" id="heading-1569830380421">
            <button class="title collapsed" data-toggle="collapse" data-target="#1569830380421" aria-expanded="true" aria-controls="1569830380421">
                What is included in the theme package?
            </button>
            <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon--wide icon-chevron-down" viewbox="0 0 498.98 284.49"><defs></defs><path class="cls-1" d="M80.93 271.76A35 35 0 0 1 140.68 247l189.74 189.75L520.16 247a35 35 0 1 1 49.5 49.5L355.17 511a35 35 0 0 1-49.5 0L91.18 296.5a34.89 34.89 0 0 1-10.25-24.74z" transform="translate(-80.93 -236.76)"></path></svg>
        </div>
        <div id="1569830380421" class="collapse" aria-labelledby="heading-1569830380421" data-parent="#accordion">
            <div class="card-body">
                <p>The theme package includes theme source, Photoshop design files, sample data and manual guide.</p>
            </div>
        </div>
    </div>
    <div class="card card-2">
        <div class="card-header" id="heading-1569830404635">
            <button class="title collapsed" data-toggle="collapse" data-target="#1569830404635" aria-expanded="true" aria-controls="1569830404635">
                I notice that the images used in the theme are all portrait. Will that be a problem if I use square images for our products? How will they be displayed in the theme?
            </button>
            <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon--wide icon-chevron-down" viewbox="0 0 498.98 284.49"><defs></defs><path class="cls-1" d="M80.93 271.76A35 35 0 0 1 140.68 247l189.74 189.75L520.16 247a35 35 0 1 1 49.5 49.5L355.17 511a35 35 0 0 1-49.5 0L91.18 296.5a34.89 34.89 0 0 1-10.25-24.74z" transform="translate(-80.93 -236.76)"></path></svg>
        </div>
        <div id="1569830404635" class="collapse" aria-labelledby="heading-1569830404635" data-parent="#accordion">
            <div class="card-body">
                
                <p>That is not a problem. You just need to modify the width/height ratio in theme settings.</p>
            </div>
        </div>
    </div>
</div>// Some code
```