# 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>

To make Metafield display in a tab, you need to go to specific tab, select content type for tab as Metafield, then declare **Namespace** and **Key** of Metafield.

<figure><img src="https://2169586977-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FS2NQC5Rc8K4ZJXTLYqwA%2Fuploads%2FFaCxk5nyJQa0nsi5grEA%2FMonosnap%20DDSHOP%20Product%20tabs%20demo%20-%20Password%3A%20ddshop%20%C2%B7%20Edit%20tab%20group%20%C2%B7%20Shopify%202025-12-02%2010-57-31.jpg?alt=media&#x26;token=69f07bba-21dd-4ede-898d-21e1a7828c17" 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.<br>

  <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