♊
D: Product Tabs
  • About D: Product Tabs
  • Pricing plans
  • Install & Enable app
  • Enable App & Disable App
  • Create and manage Tab group
  • Show tabs on the product page
  • Settings
  • Uninstall
  • FAQs
Powered by GitBook
On this page
  • For Online Store 2.0
  • Show only 1 tab group on the product page
  • Show multiple tab groups on the product page
  • For Vintage Theme

Show tabs on the product page

PreviousCreate and manage Tab groupNextSettings

Last updated 4 months ago

For Online Store 2.0

If your theme is an , please to your product template via Theme Editor.

Show only 1 tab group on the product page

If you only have 1 tab group: Add the App block to the product template and leave it blank.

If you have multiple tab groups:

  • You need to copy the Tab group ID and paste it into the App block.

  • Or use the tab group filter to specify exactly which products display the tab group

If you only have 1 tab group, you don't need to paste the Tab group ID for App block (leave it blank).

Show multiple tab groups on the product page

You don't need to paste Tab group ID for App block (leave it blank)

For Vintage Theme

  1. Select a theme > Edit code > Create a new file ddshop-tab.liquid in Snippets folder.

  2. Insert liquid code below into ddshop-tab.liquid

    {% if shop.metafields['storeify_tabs_dev_1'] %}
    {% assign ifyGroupsTab = shop.metafields['storeify_tabs_dev_1'] %}
    {% assign groupstab_settings = ifyGroupsTab.groupstab_settings %}
    
    {% for tabGroup in ifyGroupsTab %}
    
        {% if tabGroup[0] != 'groupstab_settings' %}
    
            {% if tab_id == null or tab_id == '' or  tabGroup[0] == tab_id %}
            {% if tabGroup[1].status == 1 %}
                {% assign langArr = tabGroup[1].lang %}
                {% assign viewbyLang = 0 %}
                {% if langArr == empty %}
                    {% assign viewbyLang = 1 %}
                {% else %}
                    {% if tabGroup[1].lang_contains == '0' %}
                        {% unless langArr contains request.locale.iso_code %}
                            {% assign viewbyLang = 1 %}
                        {% endunless %}
                    {% else %}
                        {%if langArr contains request.locale.iso_code %}
                            {%assign viewbyLang = 1 %}
                        {%endif %}
                    {% endif %}
                {% endif %}
                {% if viewbyLang == 1 %}
                {% liquid
                    assign showTab = 0
                    if tabGroup[1].show == 1 or tabGroup[1].show == 4
                        assign showTab = 1
                    endif
                    if tabGroup[1].show == 2
                        assign productArr = tabGroup[1].products
                        assign currentId = product.id | append: ""
                        if productArr contains currentId
                            assign showTab = 1
                        endif
                    endif
                    if tabGroup[1].show == 3
                        assign collectionIds = product.collections | map:'id'
                        for colItem in collectionIds
                            assign colItemstring = colItem | append: ""
                            if tabGroup[1].collections contains colItemstring
                                assign showTab = 1
                            endif
                        endfor
                    endif
                %}
                    {% if showTab == 1 %}
    
                            {% assign classGrouptab = 'storeify_tabs_group' | append: " ify_taps_"  | append: tabGroup[1].tab_style %}
                            {% assign classIcon = 'ify-item-glyph' %}
                            {% if tabGroup[1].allow_multiple_open != '0' %}
                            {% assign classGrouptab = classGrouptab | append: " ify_multiple_open" %}
                            {% endif %}
                        
                            {% if tabGroup[1].glyph_item != '1' %}
                            {% assign classGrouptab = classGrouptab | append: " ify_taps_glyphs_align_"  | append: tabGroup[1].glyphs_align | append: " ify_taps_glyphs_"  | append: tabGroup[1].glyph_item %}
                            {% endif %}
                            {% if tabGroup[1].is_accordion == '1' %}
                            {% assign classGrouptab = classGrouptab | append: " ify-accordion-view" %}
                            {% endif %}
    
                            {% if tabGroup[1].tabs %} 
                            <div id="{{ tabGroup[0] }}" class="out-tab-group ify-isloading">
                            {% if groupstab_settings.remove_copyright == 0 %}
                                <p class="copyright groupstab_settings_copyright" style="text-align: center;font-size: 12px;display: block !important;font-weight: bold;">
                                   <b target="_blank" style="text-align: center;color: #999;display: inline-block !important;">Development by DDSHOPAPPS</b>
                                </p>
                            {% endif %}
                            <style id="style_{{ tabGroup[0] }}">
                                {{ tabGroup[1].styles_raw }}
                                {{ tabGroup[1].custom_css }}
                            </style>
                            {% if tabGroup[1].is_default == 0 %}
                            <div class="{{ classGrouptab }} storeify-tab-style-custom">
                                {% assign listTab = tabGroup[1].tabs %}
                                {% for tabItem in listTab %}
                                    {% assign classActive = '' %}
                                    {% assign classLast = '' %}
                                    
                                    {% if forloop.first %}
                                        {% assign classActive = 'ify-active' %}
                                    {% endif %}
                                    <!-- accordion_default_view -->
                                    {% if tabGroup[1].is_accordion == '1' and tabGroup[1].accordion_default_view == '2' %}
                                        {% assign classActive = '' %}
                                    {% elsif tabGroup[1].accordion_default_view == '3' %}
                                        {% assign classActive = 'ify-active' %}
                                    {% endif %}
                                    
                                    {% if forloop.last %}
                                        {% assign classLast = 'last-child' %}
                                    {% endif %}
                                    <div class="ify-tap-title ify-tap-title-{{ tabItem.tab_id }} {{ classActive }} {{ classLast }}" data-target="ify-tap-content-{{ tabItem.tab_id }}">
                                        <label>{{ tabItem.tab_head }}</label>
                                        <span class="{{ classIcon }}"></span>
                                    </div>
                                    <div class="ify-tab-content ify-tab-content-type-{{ tabItem.tab_type }} ify-tap-content-{{ tabItem.tab_id }} {{ classActive }}  {{ classLast }}" id="ify-tap-content-{{ tabItem.tab_id }}">
                                        {% case tabItem.tab_type %}
                                            {% when '1' %}
                                                {{ tabItem.tab_value }}
                                            {% when '2' %}
                                                {{ product.description }}
                                            {% when '3' %}
                                                <!-- begin snippet -->
                                                {% case tabItem.tab_value %}
                                                    {% when '1' %}
                                                        <!-- Start of Judge.me code --> 
                                                        <div style='clear:both'></div> 
                                                        <div id='judgeme_product_reviews' class='jdgm-widget jdgm-review-widget jdgm-widget-storeify' data-id='{{ product.id }}'> 
                                                            {{ product.metafields.judgeme.widget }} 
                                                        </div> 
                                                        <!-- End of Judge.me code -->
                                                    {% when '2' %}
                                                        <div id="looxReviews" data-product-id="{{product.id}}" class="loox-reviews-default"></div>
                                                    {% when '3' %}
                                                        <div class="trustshop trustshop-review-wrap trustshop-storeify" id="trustshop-review"></div>
                                                    {% when '4' %}
                                                        <div id="mag-product-review" class="mag-product-review-storeify" data-product="{{ product.id }}" data-product-handle="{{ product.handle }}"></div>
                                                    {% when '5' %}
                                                        <div class="alireviews-review-box"></div>
                                                {% endcase %}
                                                <!-- end snippet -->
                                            {% when '4' %}
                                                {% render 'ddshop-custom-liquid' %}
                                            {% when '5' %}
                                                {% assign tabRecommendation = tabItem.tab_value | split: "-" %}
                                                <div class="ify_product-recommendations ify-grid-{{ tabRecommendation[1] }}" data-url="{{ routes.product_recommendations_url }}?section_id=ddshop-product-recommendations&product_id={{ product.id }}&limit={{ tabRecommendation[0] }}" data-limit="{{ tabRecommendation[0] }}"></div>
                                            {% when '6' %}
                                                {{ tabItem.tab_value }}
                                            {% when '7' %}
                                                {{ tabItem.tab_value }}
                                            {% when '8' %}
                                                {% if tabItem.tab_value %}
                                                    {% assign tabMetafield = tabItem.tab_value | split: "." %}
                                                    {{ product.metafields[tabMetafield[0]][tabMetafield[1]].value }}
                                                {% endif %}
                                        {% endcase %}
                                    </div>
                                {% endfor %}
                            </div>
                            {% else %}
                            <div class="{{ classGrouptab }} storeify-tab-style-description">
                                {{ product.description }}
                            </div>
                            {% endif %}
                            <script id="script_{{ tabGroup[0] }}">
                                document.addEventListener('DOMContentLoaded', function() {
                                    var ify_settings_{{ tabGroup[0] }} = {id:'{{ tabGroup[0] }}'}
                                    ify_settings_{{ tabGroup[0] }}.params = {
                                        tab_style: {{ tabGroup[1].tab_style | json }},
                                        accordion_default_view: {{ tabGroup[1].accordion_default_view | json }},
                                        allow_multiple_open: {{ tabGroup[1].allow_multiple_open | json }},
                                        glyph_item: {{ tabGroup[1].glyph_item | json }},
                                        glyphs_align: {{ tabGroup[1].glyphs_align | json }},
                                        is_accordion:{{ tabGroup[1].is_accordion | json }},
                                        is_default:{{tabGroup[1].is_default}}
                                    }
                                    {% if tabGroup[1].show == 4 %}
                                        ify_settings_{{ tabGroup[0] }}.conditions = {{ tabGroup[1].conditions | json }}
                                    {% endif %}
                                    var tabGroupify_{{ tabGroup[0] }} =  new storeifyGroupTabs(ify_settings_{{ tabGroup[0] }},storeifyTabs.configs,storeifyTabs.product);
                                    tabGroupify_{{ tabGroup[0] }}.createGroupTabs()
                                });
                                
                            </script>
                            </div>
    
                            {% endif %}
    
                    {% endif %}
    
                {% endif %}
    
            {% endif %}
            {% endif %}
    
        {% endif %}
    
    {% endfor %}
    
    {% endif %}
  3. Insert the short code below into any position you want into the sections/product-template.liquid or sections/main-product.liquid (This file depends each theme)

    {% render 'ddshop-tab' %}

    Or

    {% render 'ddshop-tab', tab_id: 'tab_group_id' %}

    Replace tab_id_value by your tab id

Online Store 2.0
add an app block