# Product tab

{% embed url="<https://salesiq.zohopublic.in/signaturesupport.ls?widgetcode=siq93f38201da244cbe219b2cab71813c85342abc57dd769c6885e2bde57d2b90da>" %}

In the Viola theme product template, includes 'Product tab' section that displays the product details.

<table><thead><tr><th width="229">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Color scheme</td><td><p>The product tab section background color appears behind the text:</p><ul><li>Accent 1</li><li>Accent 2</li><li>Accent 3</li><li>Background 1</li><li>Background 2</li></ul></td></tr><tr><td>Spacing around tab</td><td>Use the bar to set the spacing around tab. You can set a minimum of “0px” and a maximum of “30px”.</td></tr></tbody></table>

<figure><img src="https://1291024468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZyN3AVm8eGZ8KfCXj2wM%2Fuploads%2FzcZU4te18bOJEWYxXkjJ%2Fproducttab.png?alt=media&#x26;token=ed0eacb4-9c69-48c8-b887-8136b408bc37" alt=""><figcaption></figcaption></figure>

## **Add Tab**

Click on "**Add Tab**" and its customization is as follows.

<table><thead><tr><th width="282">Block</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Enter text to display as a title in the section.</td></tr><tr><td>Content</td><td>Enter text to display as a content in the section.</td></tr></tbody></table>

<figure><img src="https://1291024468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZyN3AVm8eGZ8KfCXj2wM%2Fuploads%2FznfB6Ra3jiBFU5CZTdht%2Fproducttab-1.png?alt=media&#x26;token=730c5d8b-9c55-40b7-98e4-51a63d2b89fd" alt=""><figcaption></figcaption></figure>

## To create metafield for tab content, follow the steps below.&#x20;

### Adding metafield definition <a href="#adding-metafield-definition" id="adding-metafield-definition"></a>

1. From your Shopify admin, go to **Settings** > **Custom data** > **Products**

<figure><img src="https://1291024468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZyN3AVm8eGZ8KfCXj2wM%2Fuploads%2FSVvYOJAuyEW1B0IZn9yn%2F1.png?alt=media&#x26;token=1234f9d5-a4c8-4fd1-b5a2-45154bd2f5a9" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1291024468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZyN3AVm8eGZ8KfCXj2wM%2Fuploads%2FYz81Ra8gWv98Jbuj5Lga%2Fmeta-product.png?alt=media&#x26;token=27d68c68-c0b4-47c0-b969-e46ea0a0019b" alt=""><figcaption></figcaption></figure>

2. Click **Add definition**

<figure><img src="https://1291024468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZyN3AVm8eGZ8KfCXj2wM%2Fuploads%2F3NpjXXecSkIi2I0peRCr%2F3.png?alt=media&#x26;token=9523ac14-f11a-4874-a36d-b74f720ad26c" alt=""><figcaption></figcaption></figure>

3. In the **Name** field, enter `Product details`

<figure><img src="https://1291024468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZyN3AVm8eGZ8KfCXj2wM%2Fuploads%2FtHaGAzivpHD1CH5e0c9I%2F4.png?alt=media&#x26;token=177298fa-89b1-4ecd-bc24-c475adf0ca0b" alt=""><figcaption></figcaption></figure>

4. Click **Select type** then select **Rich text.**
5. Click **Save** to save the definition.

<figure><img src="https://1291024468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZyN3AVm8eGZ8KfCXj2wM%2Fuploads%2Fgzsd7Ar0uk6k1ZqmM0Ej%2F5.png?alt=media&#x26;token=ed71a0e5-3bd9-408e-89df-20fae888b583" alt=""><figcaption></figcaption></figure>

6. You should see the **Product details** in the list of definitions by now.

<figure><img src="https://1291024468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZyN3AVm8eGZ8KfCXj2wM%2Fuploads%2FGsCHCOhKJiPgJyVku4QW%2F7.png?alt=media&#x26;token=c22fedb4-7e19-414c-9852-f32ee38d5489" alt=""><figcaption></figcaption></figure>

## Add the Product details <a href="#setting-the-countdown" id="setting-the-countdown"></a>

1. In your admin, within **Products**, click on the product you want to add the Product details.

<figure><img src="https://1291024468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZyN3AVm8eGZ8KfCXj2wM%2Fuploads%2FhP1rUmBYG2X8Cle9OwCd%2F8.png?alt=media&#x26;token=a074efbb-d388-4dc2-aea2-bba88e6498b1" alt=""><figcaption></figcaption></figure>

2. Scroll down to the **Metafields.** You should see the **Product details** here.

<figure><img src="https://1291024468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZyN3AVm8eGZ8KfCXj2wM%2Fuploads%2FPIyU7ZaWcSvzpluHtkeT%2F9.png?alt=media&#x26;token=638e7e56-4d93-4d12-9513-ececdd56822c" alt=""><figcaption></figcaption></figure>

3. To add the content, click on the **Product details** field.
4. Click **Save** to save your changes.
5. Then go to the customization and select the metafield.

<figure><img src="https://1291024468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZyN3AVm8eGZ8KfCXj2wM%2Fuploads%2FKfW5S5WpEoIY1g1oMkbj%2F10.png?alt=media&#x26;token=358b8345-880d-4e1c-acd6-b1954df4377b" alt=""><figcaption></figcaption></figure>
