# 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="/files/JUpSXgN810nbApzprCUN" 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="/files/xHk6cMJmK0D1O4oaOUCr" 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="/files/jEAkJibeERVqZUOa9xTu" 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="/files/CUolba66gP13mCRyN6tv" 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="/files/KCht7TrhReQaM3joMbFr" 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="/files/g0CTVmXb9qahAIYThOO7" alt=""><figcaption></figcaption></figure>

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

**New tab**: create a new tab

### 2.3 Design

<figure><img src="/files/JSSdedgxwSgNY00PgJ7q" 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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://product-tabs-guide.ddshopapps.com/create-and-manage-tab-group.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.