How To Add Product Tab Description in Shopify?

Tabs In Shopify Product Page Descriptions:

Are you a Shopify store owner with a lengthy product page filled with specifications, features, and a size chart that leaves your page cluttered with white space? You’re not alone. In this tutorial, we will show you how to display your product descriptions in a clean tabbed format without the need for manual coding in your Shopify store. Whether you’re using the Dawn theme or any other theme, this method will work for you. Let’s make your product pages look clean and organized.

Step 1: Activate the Latest Version of the Dawn Theme
To get started, make sure you have the latest version of the Dawn theme activated on your Shopify store. This method is not theme-dependent and can be applied to any theme.

Step 2: Add a Custom Tabs Section

• Go to the backend of your Shopify store.
• Click on “Online Store” and, if necessary, remove older theme versions to install the latest Dawn theme.
• Install and publish the latest version of the Dawn theme.
• Preview your product page to see how it currently looks.

Step 3: Add Custom Tabs

• To create a clean, tabbed product description, we will add a custom tabs section to your product page.
• In the backend of your Shopify store, click on “Online Store” and then “Themes.”
• Click on “Edit Code” to access your theme’s code editor.
• In the “Sections” folder, click on “Add a New Section” and name it “Custom Tabs.”
• Replace the pre-created code in the new section with the provided code (found in the video description or blog post).
• Save the changes.

Copy Code

{% stylesheet %}
      ul.custom--tabs{
        list-style-type: none;
        width: 1200px;
        max-width: 100%;
        display: flex !important;
        flex-wrap: wrap !important;
      }
    .custom--tabs .tab__list{
      background-color: #efefef;
      display: inline-block;
    }
/* coded by https://websensepro.com team */
      .custom__tab-content
      {
          display:none;
      }
      .custom__tab-content.active
      {
          display:block;
      }
      .tab__list h6.custom-tab
      {
          display:inline-block !important;
          padding:10px 15px !important;
          cursor: pointer !important;
        margin: 0px !important;
      }
      .active-always{
        display: block !important;
      }
      .tab__list:first-child{
  background-color: #dfdfdf;
      }
      .tab__list h6.custom-tab.active
      {
          color:grey !important;
          border-bottom:1px solid red !important;
          background-color: #dfdfdf;
      }

    @media only screen and (max-width: 576px)
      {
        ul.custom--tabs{
          display: flex !important;
          flex-direction: column !important;
        }
        .custom--tabs .tab__list .custom-tab{
          margin: 0px !important;
          width: 100%;
          padding: 10px 15px !important;
          border-bottom: none !important;
        }
        .tab__list h6.custom-tab
      {
       padding: 0px !important;
        margin: 10px 0px !important;
      }
        .custom__tab-content.active{

          padding: 0 15px;
        }
      }
{% endstylesheet %}

<ul class="custom--tabs page-width">
  <!-- coded by https://websensepro.com team -->
  {% for block in section.blocks %}
    {% if block.type == 'tab' %}
      <li class="tab__list {% if forloop.first %}active{% endif %}">
        <h6
          class="custom-tab"
          data-content-id="content--{{ block.id }}--{{ section.id }}"
        >
          {{ block.settings.heading }}
        </h6>
      </li>
    {% endif %}
  {% endfor %}
</ul>

{% for block in section.blocks %}
  {% if block.type == 'tab' %}
    <div
      id="content--{{ block.id }}--{{ section.id }}"
      class="custom__tab-content page-width {% if forloop.first %}active{% endif %}"
    >
      {{ block.settings.tab_content }}
    </div>
  {% endif %}
{% endfor %}

{% javascript %}
  tabs= document.querySelectorAll('.custom-tab');
  tabContents= document.querySelectorAll('.custom__tab-content');

  tabs.forEach(function(tab){
      tab.addEventListener('click',function(){

          contentId = this.dataset.contentId;
          content = document.getElementById(contentId);

          tabContents.forEach(function(content){
              content.classList.remove('active');
          });

          tabs.forEach(function(tab){
              tab.classList.remove('active');
          });

          this.classList.add('active');
          content.classList.add('active');
      });
  });
{% endjavascript %}

{% schema %}
{
  "name": "Tabs",
   "blocks": [
    {
      "type": "tab",
      "name": "Tabs",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "label": "Heading",
          "info": "Include a heading that explains the tab."
        },
         {
          "type": "richtext",
          "id": "tab_content",
          "label": "Content"
        }
      ]
    }
  ],
   "presets": [
    {
      "name": "Tabs",
      "blocks": [
        {
          "type": "tab"
        }
      ]
    }
  ]
}
{% endschema %}

Step 4: Customize Your Tabs

• In the Shopify customize settings, navigate to your product page template.
• Search for the product you want to add custom tabs to.
• Add the “Tabs” section to your product page.
• Fill in the details of your custom tabs. You can add multiple tabs, each with a title and description.
• Arrange the tabbed section as desired and save the template.

Step 5: Choose Your Method
You have two options to apply custom tabs to different products:

Option 1: Create Multiple Templates

• In the Shopify customize settings, create a new product page template.
• Assign this new template to specific products.
• Customize the tabs for each product according to your needs.

Option 2: Use Meta Fields

• Go to your store’s settings and select “Custom Data.”
• Click on “Products” and create meta fields for tab titles and descriptions.
• Assign these meta fields to your product pages, allowing dynamic content for each product.