Magic Tabs for Product Descriptions - Shopify App

Magic tabs for product descriptions is a Shopify app that organizes the product description into tabs. This app avoids customer confusion by organizing product description into sections. This app is suitable for any theme without making any changes to the code.

Moreover, this app is free to install and use. This app is responsive i.e. works well for any kind of desktop or mobile device. Using this app, one creates any number of tabs and it adjusts according to the theme.

This app provides the facility to adjust the style of tabs without editing or changing any code. This app automatically installs on any theme. If it fails, it is due to the theme incompatibility.

To get this app for your store, click Magic Tabs for Product Descriptions . After going to this page, click the “Get” button.

Then enter the URL of the store and click “Login”

After logging into store, click “Install app” button.

The dashboard has effects for setting the heading styles and the hover effects without any change in the code.

Manual Installation:

If the app automatically does not install on the theme, follow the below procedure.

• Create a new snippet “tabbed-product-description.liquid”
• Paste the below code in the above snippet

1. {% assign heading = shop.metafields.magictabs.heading %}
2. {% assign headingtype = shop.metafields.magictabs.activetabstyling %}
3. {% assign headingcolor = shop.metafields.magictabs.activetabcolor %}
4. {% if product.description != blank %}
5. <div class="ec-tabbed-descriptions">
6.   <div class="ec-tab-container">
7.   </div>
8.   <div class="ec-description-container">
9.   {{ product.description }}
10.   </div>
11. </div>
12. {% endif %}
13. <style type="text/css">
14. .ec-tab-content {
15.   display: inline-block;
16.   width: 100%;
17. }
18. .ec-tabbed-descriptions .ec-tab-container .ec-tab-picker {
19.   display: inline-block;
20.   margin-right: 30px;
21.   cursor: pointer;
22.   margin-bottom: 20px;
23. }
24. {% if headingtype == "underline" %}
25. .ec-tabbed-descriptions .ec-tab-container .ec-tab-picker h4 {
26.   margin-bottom: 3px !important;
27. }
28. .ec-tabbed-descriptions .ec-tab-container .ec-tab-picker.ec-active-tab {
29.   border-bottom: 1px solid #bbb;
30. }
31. {% else %}
32. .ec-tabbed-descriptions .ec-tab-container .ec-tab-picker.ec-active-tab h4 {
33.   color: {{ headingcolor }} ;
34. }
35. {% endif %}
36. .ec-tabbed-descriptions .ec-tab-container {
37.   float: left;
38.   width: 100%;
39. }
40. </style>
41. <script>
42. function loadScript(url, callback){
43.   var script = document.createElement("script")
44.   script.type = "text/javascript";
45.   if (script.readyState){  //IE
46.   script.onreadystatechange = function(){
47.   if (script.readyState == "loaded" ||
48.   script.readyState == "complete"){
49.   script.onreadystatechange = null;
50.   callback();
51.   }
52.   };
53.   } else {  //Others
54.   script.onload = function(){
55.   callback();
56.   };
57.   }
58.   script.src = url;
59.   document.getElementsByTagName("head")[0].appendChild(script);
60. }
61.   var ecTabbedDescriptionJS = function($){
62.   var slugCreate = function(str) {
63.   var $slug = '';
64.   var trimmed = $.trim(str);
65.   $slug = trimmed.replace(/[^a-z0-9-]/gi, '-').
66.   replace(/-+/g, '-').
67.   replace(/^-|-$/g, '');
68.   return $slug.toLowerCase();
69.   }
70.   $('body').on('click', '.ec-tab-picker', function() {
71.   $tabName = $(this).attr('class').split(' ')[1];
72.   var tabParent = jQuery(this).parents('.ec-tabbed-descriptions');
73.   tabParent.find(jQuery('.ec-tab-content')).not('.' + $tabName).hide();
74.   tabParent.find(jQuery('.ec-tab-picker')).not('.' + $tabName).removeClass('ec-active-tab');
75.   tabParent.find(jQuery('.ec-tab-content.' + $tabName)).css('display', 'inline-block');
76.   jQuery(this).addClass('ec-active-tab');
77.   });
78.   if(jQuery('.ec-description-container').find('{{ heading }}').length >= 1){
79.   jQuery( ".ec-tabbed-descriptions" ).each(function() {
80.   if(!$(this).hasClass("ec-tabs-processed")) {
81.   var tabParent = jQuery(this);
82.   $counter = 0;
83.   tabParent.find($('.ec-description-container')).addClass('tabs-are-shown');
84.   tabParent.find($('.ec-tab-container')).show();
85.   //$('.ec-description-container {{ heading }}').each( function () {
86.   tabParent.find($('{{ heading }}')).each( function () {
87.   $counter++;
88.   var grpForDiv= []; 
89.   var next = $(this).next();
90.   var tab = $(this).text();
91.   jQuery(this).hide();
92.   var tabSlug = 'tab-' + slugCreate(tab);
93.   if($counter == 1){
94.   tabParent.find(jQuery('.ec-tab-container')).append('<div class="ec-tab-picker ' + tabSlug + ' ec-active-tab"><h4>' + tab + '</h4></div>');
95.   } else {
96.   tabParent.find(jQuery('.ec-tab-container')).append('<div class="ec-tab-picker ' + tabSlug + '"><h4>' + tab + '</h4></div>');
97.   }
98.   grpForDiv.push(this);
99.   while ( next.length!==0 && next!== undefined && next[0].nodeName !== '{{ heading }}'){
100.   grpForDiv.push(next[0]);
101.   next = next.next();
102.   }
103.   if($counter == 1){
104.   jQuery(grpForDiv).wrapAll('<div class="ec-tab-content ' + tabSlug + '" />');
105.   } else {
106.   jQuery(grpForDiv).wrapAll('<div style="display: none;" class="ec-tab-content ' + tabSlug + '" />');
107.   }
108.   });
109.   tabParent.find($('.ec-tab-content .ec-tab-content')).each( function () {
110.   $(this).parentsUntil(tabParent.find($('.ec-description-container'))).before(this);
111.   });
112.   }
113.   jQuery(this).addClass('ec-tabs-processed');
114.   var tabContainer = tabParent.find(jQuery('.ec-tab-container'));
115.   tabContainer.insertBefore(tabParent.find(jQuery('.ec-tab-content').first()));
116.   });
117.   }
118.   };
119. if ((typeof jQuery === 'undefined') || (parseFloat(jQuery.fn.jquery) < 1.7)) {
120.   loadScript('//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js', function(){
121.   jQuery191 = jQuery.noConflict(true);
122.   ecTabbedDescriptionJS(jQuery191);
123.   });
124. } else {
125.   ecTabbedDescriptionJS(jQuery);
126. }
127. </script>

• Replace the {{product.description}} with {%include tabbed-product-description%} in the template for the product page

Sample Store Screenshot:

Based on the heading in the dashboard, give tab titles with the same heading style. After creating the above description, the product page for the above product is as below: