Shopify Metafields: Tabbed product descriptions layout

Project Overview

Shopify tabular product descriptions: In this tutorial, you use Shopify metafields and a theme template update to display product information in tabs (Description, Features, Documents) for a cleaner, easier-to-navigate product page.

This layout helps customers find key details quickly and keeps long product content organized.

Time: 30 to 60 minutes
Skill level: Intermediate
What you will build: A tabbed (tabular) product description section driven by product metafields

Parts List

From ShillehTek

No ShillehTek parts required for this tutorial.

External

Shopify admin access (Online Store and Settings permissions)
A theme you can duplicate and edit (for example, your current live theme)
Ability to edit theme template code (Liquid, HTML, CSS, and JavaScript)

Note: In the code, replace product.metafields.custom... with your actual metafield namespace and key.

Step-by-Step Guide

Step 1 - Preview the tabbed layout (optional)

Goal: Understand what you are building before editing your theme.

What to do: Review this example of a functional tabbed product description layout (Description, Features, Documents). Your final theme implementation will follow the same structure.

Code:

<div class="description">
  <div class="col-tabs">
    <ul class="nav nav-tabs" role="tablist">
      <li role="presentation" class="active">
        <a href="#description-tab" aria-controls="description-tab" role="tab" data-toggle="tab" aria-expanded="true">Description</a>
      </li>
      <li role="presentation">
        <a href="#features-tab" aria-controls="features-tab" role="tab" data-toggle="tab" aria-expanded="false">Features</a>
      </li>
      <li role="presentation">
        <a href="#documents-tab" aria-controls="documents-tab" role="tab" data-toggle="tab" aria-expanded="false">Documents</a>
      </li>
    </ul>
    <div class="tab-content">
      <div role="tabpanel" class="tab-pane fade active in" id="description-tab">
        <p>Example product description content here. Detailed information about the product.</p>
      </div>
      <div role="tabpanel" class="tab-pane fade" id="features-tab">
        <p>Features include enhanced durability, multiple color options, and eco-friendly materials.</p>
      </div>
      <div role="tabpanel" class="tab-pane fade" id="documents-tab">
        <p>Download product manuals and warranty information in this section.</p>
      </div>
    </div>
  </div>
</div>

Code:

document.addEventListener('DOMContentLoaded', function () {
  var tabs = document.querySelectorAll('.nav a');
  tabs.forEach(function (tab) {
    tab.addEventListener('click', function (event) {
      event.preventDefault();
      var activeTabs = document.querySelectorAll('.active');
      activeTabs.forEach(function (tab) {
        tab.classList.remove('active');
      });

      tab.parentElement.classList.add('active');
      var anchor = event.target;
      var activePaneID = anchor.getAttribute('href');
      var activePane = document.querySelector(activePaneID);
      document.querySelectorAll('.tab-pane').forEach(function (pane) {
        pane.classList.remove('active');
        pane.classList.remove('in');
      });
      activePane.classList.add('active');
      setTimeout(function () {
        activePane.classList.add('in');
      }, 250);
    });
  });
});

Expected result: You have a clear reference for the HTML structure and tab-switching behavior you will add to your product template.

Step 2 - Prepare your theme

Goal: Create a safe backup so you can test changes without affecting your live storefront.

What to do:

Navigate to Online Store > Themes.
Click the Actions button for your current theme.
Select Duplicate to create a backup.

Expected result: You have a duplicated theme you can edit and test safely.

Step 3 - Create metafields

Goal: Store custom product data (Features and Documents) so each product can populate its own tab content.

What to do:

Go to Settings and select Metafields.
Choose Products.
Add new metafields for description, features, and documents.

Expected result: Your products can store structured content in metafields for the tabs (for example, features and documentation).

Step 4 - Update your product template

Goal: Add a tabbed layout to your product page that renders the standard description plus metafield-driven content.

What to do: Modify your product template to include the markup below. Replace product.metafields.custom... with your metafield namespace and key.

Code:

<div class="description" itemprop="description">
  <div class="col-tabs">
    <ul class="nav nav-tabs" role="tablist">
      <li role="presentation" class="active">
        <a href="#description-tab" aria-controls="description-tab" role="tab" data-toggle="tab" aria-expanded="true">Description</a>
      </li>
      <li role="presentation">
        <a href="#features-tab" aria-controls="features-tab" role="tab" data-toggle="tab" aria-expanded="false">Features</a>
      </li>
      <li role="presentation">
        <a href="#documents-tab" aria-controls="documents-tab" role="tab" data-toggle="tab" aria-expanded="false">Documents</a>
      </li>
    </ul>
    <div class="tab-content">
      <div role="tabpanel" class="tab-pane fade active in" id="description-tab">
        <div class="col-sm-12">
          {{ product.description }}
        </div>
      </div>
      <div role="tabpanel" class="tab-pane fade" id="features-tab">
        {% if product.metafields.custom.product_features != blank %}
          {{ product.metafields.custom.product_features }}
        {% else %}
          <p>No additional feature info available.</p>
        {% endif %}
      </div>
      <div role="tabpanel" class="tab-pane fade" id="documents-tab">
        {% if product.metafields.custom.product_documentation != blank %}
          {{ product.metafields.custom.product_documentation }}
        {% else %}
          <p>No documents available. Please <a href="/pages/contact-us">contact us</a> for more information.</p>
        {% endif %}
      </div>
    </div>
  </div>
</div>

What to do: Add the following script so the tabs switch and the fade effect works.

Code:

document.addEventListener('DOMContentLoaded', function () {
  var tabs = document.querySelectorAll('.nav a');
  tabs.forEach(function (tab) {
    tab.addEventListener('click', function (event) {
      event.preventDefault();
      var activeTabs = document.querySelectorAll('.active');
      activeTabs.forEach(function (tab) {
        tab.classList.remove('active');
      });

      tab.parentElement.classList.add('active');
      var anchor = event.target;
      var activePaneID = anchor.getAttribute('href');
      var activePane = document.querySelector(activePaneID);
      document.querySelectorAll('.tab-pane').forEach(function (pane) {
        pane.classList.remove('active');
        pane.classList.remove('in');
      });
      activePane.classList.add('active');
      setTimeout(function () {
        activePane.classList.add('in');
      }, 250);
    });
  });
});

Expected result: Your product page has three tabs. Description shows the normal product description, while Features and Documents pull from metafields or show fallback messages.

Step 5 - Add CSS for the tabs

Goal: Style the tab navigation and tab content so it looks clean and functions properly.

What to do: Insert the following CSS into your product-description.css and include it in your theme assets.

Code:

.description {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.col-tabs {
  margin-bottom: 20px;
}

.nav {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.nav-tabs {
  border-bottom: 2px solid #ddd;
  display: flex;
  justify-content: start;
}

.nav-tabs li {
  margin-right: 5px;
}

.nav-tabs a {
  display: block;
  padding: 10px 15px;
  background-color: #f8f8f8;
  color: #333;
  border: 1px solid #ddd;
  border-radius: 4px 4px 0 0;
  text-decoration: none;
}

.nav-tabs a:hover {
  background-color: #e9e9e9;
}

.nav-tabs .active a {
  background-color: #fff;
  color: #555;
  border-bottom-color: transparent;
  cursor: default;
}

.tab-content {
  border-top: none;
  padding: 20px;
  background-color: #fff;
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

.fade {
  transition: opacity 0.5s ease-in-out;
}

.fade.in {
  opacity: 1;
}

Expected result: Tabs are styled and readable, the active tab stands out, and switching tabs shows the correct content.

Step 6 - Test the updated product page

Goal: Confirm the new tabbed layout works correctly before applying changes to your live theme.

What to do: Preview the duplicated theme, open a product page, and click through Description, Features, and Documents. Test with products that have metafield values and products that do not.

Shopify product page showing tabbed product description with Description, Features, and Documents tabs — Example of a product page after adding a tabbed (tabular) description layout.

Expected result: The tabs switch smoothly, and each tab shows the correct content or the fallback message when a metafield is blank.

Conclusion

You now have tabular (tabbed) product descriptions in Shopify using metafields plus a product template update. This approach keeps long product information organized and improves the customer experience by making details easier to find.

Want parts, tools, and build guides for your next project? Shop at ShillehTek.com. If you want help customizing your Shopify theme or building a tailored solution for your store, check out our consulting services.