# Product information tabs

{% hint style="success" %}
Steps

1. In the theme editor (**Customize**), open the template selector
2. Select **Products**, then **Default product.**
3. On the left-sidebar, add **Product information tabs.**
4. Make necessary changes > **Save.**
   {% endhint %}

### General Option

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/O07P2sIJCyfkOqcbRcz3/Screenshot%202023-12-15%20150848.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2521394731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WlAIkq5Keo641r70Byr%2Fuploads%2FCRjiYaf3QS8KyLHqJZpg%2Fimage.png?alt=media&#x26;token=8e9a83b5-2caa-4a51-bd1c-32ee12c1702a" alt=""><figcaption></figcaption></figure>

**Layout:** There are 3 types of layout **Container, Fluid container,** and **Full-width.**

**Color schema:** You are allowed to change text color, background color with preset color.

**Custom class:** Facilitate customers in incorporating a new HTML class within the HTML code for Product Information tabs.

**Design:** There are 3  types of product tab: **Tabs**, **Accordion** and **Show open all.**

{% tabs %}
{% tab title="Tabs " %}

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/oAsjsa4p5bPMNiPbVeWf/clt_52.png" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Accordion " %}

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/pxIMRQK4FB5HPS8LTNkK/clt_53.png" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Show open all" %}

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/ciTsyIpIb3OWdIrz7TEA/clt_51.png" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

**Position (only for accordion):** There are 2 options Product content external and Product content inner.

{% tabs %}
{% tab title="Default" %}

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/pxIMRQK4FB5HPS8LTNkK/clt_53.png" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Inside Product main infomation" %}

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/HcntnOGJ0UeYnt3zVuoI/clt_54.png" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

**Enable show two columns:** Display the description in a two-column layout instead of full-width, offering a visually pleasing presentation.

{% hint style="warning" %}
This feature only works with **Show open all** selected on **Design** setting.
{% endhint %}

<figure><img src="https://2521394731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WlAIkq5Keo641r70Byr%2Fuploads%2FUmV3z0ciel6uudTabVQt%2Fimage.png?alt=media&#x26;token=1ca8ea9f-d7b2-4660-b235-5a3c983ab3ad" alt=""><figcaption></figcaption></figure>

### Add blocks for Product Tabs

The **Product Tabs** option has a total of 3 **blocks** for you to add to the sidebar:

* [**Tab Description**](https://blueskytechcos-organization.gitbook.io/umino-shopify/product-settings/product-information-tabs/tab-description)
* [**Tab Review**](https://blueskytechcos-organization.gitbook.io/umino-shopify/product-settings/product-information-tabs/tab-review)
* [**Tab Custom**](https://blueskytechcos-organization.gitbook.io/umino-shopify/product-settings/product-information-tabs/tab-custom)

You also have the ability to arrange the position of blocks through **drag and drop.**

When you click on each block, it will show the **settings sidebar** (of each block).