Create Tabular Product Descriptions on Your Shopify Store

May 18, 2024

Implementing Tabular Product Descriptions in Shopify

Adding Tabular Product Descriptions to Your Shopify Store

This guide provides a comprehensive explanation of how to implement tabular product descriptions in your Shopify theme. These steps are designed to enhance your product pages by making them more informative and easier to navigate.

Before you start, interact with the finished product:

Example product description content here. Detailed information about the product.

Features include enhanced durability, multiple color options, and eco-friendly materials.

Download product manuals and warranty information in this section.

Step 1: Prepare Your Theme

Start by creating a backup of your current theme to avoid disrupting your live store. This allows you to safely test new features.

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

Step 2: Create Metafields

Metafields store custom data such as features and documents related to your products. Here's how to set them up:

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

Step 3: Update Your Product Template

Modify the product template to include the new tabular description layout. Ensure you replace 'product.metafields.custom...' with the actual namespace and key of your metafields.

<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>

<script>
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 () { // Timeout for the fade effect
        activePane.classList.add('in');
      }, 250);
    });
  });
});
</script>

Step 4: Add CSS

Enhance the functionality and style of your tabs with CSS. Insert the following code in your product-description.css and include it in your theme assets.

.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;
}

Copy and paste this CSS into your theme's CSS file to style the tabular product descriptions.

Here is the final result of a updated product page with our new tabular description!

Final Thoughts

By following these steps, you can significantly enhance the product pages on your Shopify store, making them more attractive and informative to customers. Test thoroughly before applying changes to your live site. This implementation not only improves the visual appeal but also enhances the user experience by organizing product information in a clear and accessible way.