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)

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

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

Last updated