# Create and manage Tab group

## 1. Create & **Enable tab group**

From the app admin, go to the **Tab groups** from the left sidebar -> click the **Add tab group** button.

To use tab group, go to **Genera** tab -> check "**Enable tab group**". If you want to temporarily not use it -> uncheck.

## 2. T**ab group settings**

### 2.1 General

<figure><img src="https://2169586977-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FS2NQC5Rc8K4ZJXTLYqwA%2Fuploads%2FJOAaJ0MaKjUXIvjbmE1M%2Fimage.png?alt=media&#x26;token=a423cd33-e496-4696-997c-04d6b3362dfa" alt=""><figcaption></figcaption></figure>

**Enable tab group**:  check it to activate the group tab

**Tab group id**: use to embed on product page

**Tab group name**: must be unique

**Type**: there are 2 types of settings

* _Use custom tabs_: use tab content you create
* _Use product description_: use product description as content for tabs

**Show tab group**: this is the filter that helps you show tabs on the product pages you want.

### 2.2 Tabs

<figure><img src="https://2169586977-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FS2NQC5Rc8K4ZJXTLYqwA%2Fuploads%2FIRzCqDl8j2tRayuZIigx%2Fimage.png?alt=media&#x26;token=f8a5153c-79ca-4efe-abd6-ba4d30665583" alt=""><figcaption></figcaption></figure>

**Tab heading**: tab title

**Tab content type**:

* _Text_: the content is compiled by the store admin
* _Product description_: use the app's description as the tab content
* _Review app_: select one of the built-in review applications as the content (_**Note that**_ _**the tab only has content when the store has a Review app installed that our app supports**_)
* _Metafield_: Get product Metafield data to push into tab content (_**Only applies to Metafields with text data type**_)

<figure><img src="https://2169586977-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FS2NQC5Rc8K4ZJXTLYqwA%2Fuploads%2FOFF3w5ouIXxcKziYYWo2%2Fimage.png?alt=media&#x26;token=6a7180eb-0054-44d2-9e33-9f35ea04fbe3" alt=""><figcaption></figcaption></figure>

*   _Custom Liquid_: if your theme is an [Online Store 2.0](https://help.shopify.com/en/manual/online-store/themes/managing-themes/versions), please [add an app block](https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/apps#app-blocks) to your product template via Theme Editor.\


    <figure><img src="https://2169586977-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FS2NQC5Rc8K4ZJXTLYqwA%2Fuploads%2FkNOmOuVeq0y7NJ2N6qZt%2Fimage.png?alt=media&#x26;token=8812cb14-cb7f-4be4-b9a6-8a60c48bfa77" alt=""><figcaption></figcaption></figure>
*   _Product recommendations_: use recommended products created by the theme as tab content.\
    Create a new file **ddshop-product-recommendations.liquid** in Sections folder.\
    Insert the code below

    ```liquid
    {%- if recommendations.performed? and recommendations.products_count > 0 -%}
        <div class="ifytab-product-grid">
          {%- for product in recommendations.products -%}
            <div class="ifytab-item-product">
              <a href="{{ product.url }}">
                <img class="ify_product__img"
                  src="{{ product.featured_image | image_url: width: 300, height: 300 }}"
                  alt="{{ product.featured_image.alt }}"/>
     
                <h3 class="ify_product__title">{{ product.title }}</h3>
                <div class="ify_product__price">{{ product.price | money}}</div>
              </a>
            </div>
          {%- endfor -%}
        </div>
    {%- endif -%}

    ```

    <figure><img src="https://2169586977-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FS2NQC5Rc8K4ZJXTLYqwA%2Fuploads%2FzSVFpHTkUhiXkrRbWqr0%2Fimage.png?alt=media&#x26;token=45a2f7c5-1ef5-4290-bc4b-3cc79792ad3e" alt=""><figcaption></figcaption></figure>

    <figure><img src="https://2169586977-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FS2NQC5Rc8K4ZJXTLYqwA%2Fuploads%2FjZGlF7vIF1NfKKcTkkTQ%2Fimage.png?alt=media&#x26;token=5f29ac05-07f4-4bc0-9431-7618d6ee6a8d" alt=""><figcaption></figcaption></figure>

**New tab**: create a new tab

### 2.3 Design

<figure><img src="https://2169586977-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FS2NQC5Rc8K4ZJXTLYqwA%2Fuploads%2FYCVLCCBECbGZCgZ2r8Ef%2Fimage.png?alt=media&#x26;token=41fd29c4-ceb2-4a49-9541-1c3180976fb0" alt=""><figcaption></figcaption></figure>

**Layout**: different tab styles

**Typography**: customize font size, font weight

**Color**: customize colors for tab and text

**Padding**: align text

**Border**: customize the style of the border

**Accordion view**: customize the styles for accordion tabs

**Custom CSS**: add CSS code to customize the tab to your liking
