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

  Copy

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

  

  

New tab: create a new tab

2.3 Design

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