Product Page — Tabs

About this module

A Shopify tabbed block for product pages — description, details and shipping — keeping related info neatly organised.

Installation

1. 1

   Open Shopify Admin

   Go to Online Store → Themes.

2. 2

   Edit code

   Click the ellipsis (⋯) next to your theme and choose Edit Code.

3. 3

   Create the section

   In the Sections folder, click Add a new section, name it mh-product-tabs, and replace the contents with the Liquid source below.

4. 4

   Save

   Save the file. The section now appears in the Theme Customizer.

5. 5

   Add it to the page

   Open the Theme Customizer, click Add section, search for it and add it where you like.

Usage

1. 1

   Paste the section

   Create `mh-product-tabs` under Sections and paste the source.

   {{ 'styles.css' | asset_url | stylesheet_tag }}
   <div class="mh-tabs" data-tabs>
     <div class="mh-tabs-nav">
       <button class="mh-tabs-btn active" data-tab="0">{{ section.settings.tab_1_title }}</button>
       <button class="mh-tabs-btn" data-tab="1">{{ section.settings.tab_2_title }}</button>
       <button class="mh-tabs-btn" data-tab="2">{{ section.settings.tab_3_title }}</button>
     </div>
     <div class="mh-tabs-panels">
       <div class="mh-tabs-panel active"><p>{{ product.description }}</p></div>
       <div class="mh-tabs-panel"><p>SKU: {{ product.selected_or_first_available_variant.sku | default: 'N/A' }}</p><p>Weight: {{ product.weight | default: '0' }} {{ product.weight_unit }}</p></div>
       <div class="mh-tabs-panel"><p>Free shipping on orders over $50. Estimated delivery in 3–5 business days.</p></div>
     </div>
   </div>
   
   <script>
   (function(){
     var root=document.querySelector('[data-tabs]');
     var btns=root.querySelectorAll('.mh-tabs-btn');
     var panels=root.querySelectorAll('.mh-tabs-panel');
     btns.forEach(function(btn){
       btn.addEventListener('click',function(){
         btns.forEach(function(b){b.classList.remove('active')});
         panels.forEach(function(p){p.classList.remove('active')});
         btn.classList.add('active');
         panels[+btn.dataset.tab].classList.add('active');
       });
     });
   })();
   </script>
   
   {% schema %}
   {
     "name": "MH Product Tabs",
     "tag": "div",
     "settings": [
       { "type": "text", "id": "tab_1_title", "label": "Tab 1 title", "default": "Description" },
       { "type": "text", "id": "tab_2_title", "label": "Tab 2 title", "default": "Details" },
       { "type": "text", "id": "tab_3_title", "label": "Tab 3 title", "default": "Shipping" }
     ],
     "presets": [{ "name": "MH Product Tabs", "category": "ModuleHarbor" }]
   }
   {% endschema %}

2. 2

   Configure in the customizer

   Adjust the settings that ship with the section schema.