# About D: Product Tabs **D: Product Tabs** app is a solution that allows you to add custom product tabs to Shopify product pages with no coding. It helps you to organize product details and highlights in multiple handy tabs on the product page. You can display text, images, videos, size charts, and any other relevant information to increase conversions. Tailor product tabs to different customers and improves customer experience and competitiveness of your product pages with the **D: Product Tabs** app. ## Highlight Features * Allow to create many product tabs group to apply to each product page * Display multiple custom product tabs for one product * Add text, images, videos, size chart, reviews, metafields... in tabs * Display tabs according to filters: product, collection, tags, price, out of stock, vendors, customer tags... * Support both Online Store 2.0 and older theme versions ## **The features of D: Product Tabs app** ### **FOR ADMIN** * Easily install and configure: This app provides friendly back-end management that helps you to create, edit, and remove product tabs easily * Nice templates * Drag and drop to sort order for tabs * Easy to enable/disable the Product tabs app * Create and divide tabs into suitable products * Enable/Disable tab group with a single click * Easily customize the look with intuitive design tools * Good for SEO * Boost sales ### **FOR CUSTOMERS** * Friendly UI * Easy to read the product details through the product tabs * Optimize loading speed * Work on all devices #### # Pricing plans ## All available plans
# Install & Enable app Directly go to this link: [**D:Product Tabs page**](https://apps.shopify.com/d-product-tabs) to install the app. After adding the app to the store is complete, you need to embed the app in the theme: Go to **Settings** from the left sidebar -> Click the "Go to Theme Editor **> App Embeds**" -> Click the **Save** button in the upper right corner. # Enable App & Disable App ## Enable **App** From the app admin, click the **Integrate Theme** on the left sidebar -> Select the theme -> Click the "Go to Theme Editor **> App Embeds**" button -> Enable the app by swiping the button to turn blue -> Click the **Save** button. ## Disable App From the app admin, click the **Integrate Theme** on the left sidebar -> Select the theme -> Click the "Go to Theme Editor **> App Embeds**" button -> Enable the app by swiping the button to turn gray -> Click the **Save** button.
# 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. T**ab 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***)
To make Metafield display in a tab, you need to go to specific tab, select content type for tab as Metafield, then declare **Namespace** and **Key** of Metafield.
* *Custom Liquid*: 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.
* *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 ```liquid {%- if recommendations.performed? and recommendations.products_count > 0 -%}
{%- for product in recommendations.products -%}
{{ product.featured_image.alt }}

{{ product.title }}

{{ product.price | money}}
{%- endfor -%}
{%- 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 # 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 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 request.page_type == 'product'
                       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
                   endif
                   if tabGroup[1].show == 5 and request.page_type == 'page'
                       assign showTab = 1
                   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" data-tab-group-id="{{ tabGroup[0] }}">
                           <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" data-tab-group-id="{{ tabGroup[0] }}">
                               {% 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 }}" data-tab-uuid="{{ tabItem.tab_id }}" data-tab-title="{{ tabItem.tab_head }}" data-tab-index="{{ forloop.index0 }}">
                                       <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 -->
                                                           {% assign has_legacy = false %}
                                                           {% if product.metafields.judgeme.widget.size > 20 %}
                                                               {% assign has_legacy = true %}
                                                           {% endif %}
                                                           <div style='clear:both'></div>
                                                           <div id='judgeme_product_reviews' class='jdgm-widget jdgm-review-widget' data-product-title='{{ product.title | escape }}' data-id='{{ product.id }}' data-product-id='{{ product.id }}' data-widget='review' data-auto-install='false' data-shop-reviews-count='{{ shop.metafields.judgeme.shop_reviews_count | default: 0 | escape }}' data-entry-point='review_widget.js' data-entry-key='review-widget/main.js'>
                                                               {% if has_legacy %}
                                                                   <div class='jdgm-legacy-widget-content' style='display: none;'>{{ product.metafields.judgeme.widget }}</div>
                                                               {% endif %}
                                                           </div>
                                                           {% if product.metafields.judgeme.review_widget_data %}
                                                               <script>jdgm.data ||= {}; jdgm.data.reviewWidget ||= {}; jdgm.data.reviewWidget[{{ product.id }}] = {{ product.metafields.judgeme.review_widget_data }}</script>
                                                           {% endif %}  
                                                       <!-- 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" data-tab-group-id="{{ tabGroup[0] }}">
                               {{ 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*)
```liquid {% render 'ddshop-tab' %} ``` Or ```liquid {% render 'ddshop-tab', tab_id: 'tab_group_id' %} ``` Replace **tab\_id\_value** by your tab id
# Settings
There are only 2 simple settings: **Heading type**: If you use the product description as content for the tabs, this Heading tag is used to create titles and content breaks for the tabs. The content between the pair of heading tags will be the tab title. The content immediately after this pair of tags is the tab's content. The content will end when it reaches the next heading tag. **Default tab title**: default title for first tab # Uninstall If you no longer need the **D: Product Tabs** app, you can uninstall it from your Shopify admin in just a few steps. *** #### Step 1: Go to the Apps Section 1. Log in to your Shopify admin 2. From the left-hand menu, click Settings > Apps *** #### Step 2: Locate the App 1. In the Installed apps list, find **D: Product Tabs** 2. Click the three-dot (⋯) menu next to the app *** #### Step 3: Uninstall the App 1. From the dropdown menu, click Uninstall 2. Confirm the uninstallation when prompted
*** #### Important Notes * Once uninstalled, the app will be removed from your store immediately * Any app-related configurations may be deleted * Billing for the app will stop according to Shopify’s billing policy *** #### Need Help Before Uninstalling? If you’re experiencing issues or considering uninstalling due to a problem, we recommend contacting support first. Our team can help resolve most issues quickly. # FAQs
1.How to divide product description content into tabs? **First**, you need to set the type for the tab group to "**Use product description**". ![](/files/QecsCZ9FgnuBEZSjYFnx) **Second**, in the product description content, there must be pairs of heading tags to separate the content sections (for example, pairs of tags H1, H2, H3...). **Third**, go to **Settings** -> select the **Heading type** (the type of tag that you specify to divide the content) ![](/files/SljqG3ta1H9qqXMvgDzE)
2.How to add image to tab content? **Option 1**: Click on the content box -> Click the "i**nsert image**" icon -> Select image from source -> **Upload** (*The image will be uploaded to the Shopify server and you may need to set permissions to do this)* -> The image is inserted into the content.
**Option 2**: You need to upload the image to a 3rd party server (recommended Shopify server), then you get the image url and insert it into the tab content as shown below:
The image is displayed in a lightbox when clicked.
3.How to add size chart to tab content? There are 2 ways for you to add size chart to tab content:
* Install a size chart app, use the app's short-code and add it to the tab content. * Create a size chart table using HTML code.
4.How to install multilingual content for tab group? With the multilingual feature, you need to create multiple tab groups, each tab group uses a language, and set up a rule to display each tab group by language (In **Tab Groups** -> **Edit** -> **General** -> **Additional display conditions** -> **Display based on language(s)** -> Select the language for the tab group to display). Then you just need to add the product tab app block to the product page, the corresponding tab groups will automatically change according to the language.
5.Why does the copyright still appear after upgrading to the paid plan? Because you need to do one more step to remove copyright in the app backend. Go to the app's **Settings** -> change something so that the **Save** button appears at the top -> Click the Save button to apply the copyright removal -> Then you can go back to the previous settings.
6.How to get Namespage and Key of Metafield? To get the namespace and key of a metafield in Shopify, you can follow these steps: * **Navigate to Metafield Definitions in Shopify Admin:** * Go to your Shopify Admin. * Click on Settings in the bottom left corner. * Select Custom data. * Choose the resource type for which the metafield is defined (e.g., Products, Variants, Collections, Customers, etc.). * **Locate the Metafield Definition:** * Find the specific metafield definition you are interested in. You can filter by assigned resource or search by name. * Click on the metafield definition to open its details. * **Identify Namespace and Key:** * Within the metafield definition details, you will see a field labeled Namespace and key. * The value in this field represents the unique identifier for your metafield, formatted as `namespace.key`. * You can copy this entire string to use when accessing the metafield in your Liquid code or API calls. Example:If you have a product metafield named "Material" and its "Namespace and key" field displays `my_fields.material`, then: * **Namespace:** `my_fields` * **Key:** `materia`