> For the complete documentation index, see [llms.txt](https://product-tabs-guide.ddshopapps.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://product-tabs-guide.ddshopapps.com/create-and-manage-tab-group.md).

# 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