# Show tabs on the product page
## For Online Store 2.0
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.
### 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 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>
{% when '6' %}
<div class="AirReviews-Widget AirReviews-Widget--Block"></div>
{% when '7' %}
<div class="easyreviews-product-reviews"></div>
{% when '8' %}
<div id="bundle-product_reviews"></div>
{% when '9' %}
<div class="custom-vstar-review-widget" style="width:100%"></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: "." %}
{% assign tabMetafieldObj = product.metafields[tabMetafield[0]][tabMetafield[1]] %}
{% if tabMetafieldObj.type contains "file_reference" %}
{% if tabMetafieldObj.list? %}
<div class="ify_list_downloads">
{% for file in tabMetafieldObj.value %}
{% assign file_url = file.url %}
{% unless file_url %}
{% assign file_url = file | file_url %}
{% endunless %}
{% assign raw_filename = file_url | split: '/' | last | split: '?' | first %}
{% assign clean_filename = raw_filename | replace: '%20', '-' %}
<a class="ify_item_download" href="{{ file_url }}" download="{{ file.alt | default: clean_filename }}">
{{ file.alt | default: clean_filename }}
</a>
{% endfor %}
</div>
{% else %}
{% assign file_url = tabMetafieldObj | file_url %}
{% assign raw_filename = file_url | split: '/' | last | split: '?' | first %}
{% assign clean_filename = raw_filename | replace: '%20', '-' %}
<a class="ify_item_download" href="{{ file_url }}" download="{{ file.alt | default: clean_filename }}">
{{ file.alt | default: clean_filename }}
</a>
{% endif %}
{% else %}
{{ product.metafields[tabMetafield[0]][tabMetafield[1]].value }}
{% endif %}
{% 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 %}
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.