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. Tab group settings

2.1 General

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

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)

Custom Liquid: if your theme is an Online Store 2.0, please add an app block to your product template via Theme Editor.

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

{%- 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 -%}