add extra info on product page using metafield in Shopify

custom-tabs.liquid 

---------------------------------------------------------------------------------

<div class="product-custom-info">

  <div class="container">

    <div class="custom-tabs medium-down--hide">

      <ul id="tabs-nav">

        {% if product.metafields.custom_info1.size > 0 %}

        <li>

          {% for field in product.metafields.custom_info1 %}

          <a href="#tab1">{{field | first}}</a>

          {% endfor %}

        </li>

        {% endif %}

        {% if product.metafields.custom_info2.size > 0 %}

        <li>

          {% for field in product.metafields.custom_info2 %}

          <a href="#tab2">{{field | first}}</a>

          {% endfor %}

        </li>

        {% endif %}

        {% if product.metafields.custom_info3.size > 0 %}

        <li>

          {% for field in product.metafields.custom_info3 %}

          <a href="#tab3">{{field | first}}</a>

          {% endfor %}

        </li>

        {% endif %}

        {% if product.metafields.custom_info4.size > 0 %}

        <li>

          {% for field in product.metafields.custom_info4 %}

          <a href="#tab4">{{field | first}}</a>

          {% endfor %}

        </li>

        {% endif %}

        {% if product.metafields.custom_info5.size > 0 %}

        <li>

          {% for field in product.metafields.custom_info5 %}

          <a href="#tab5">{{field | first}}</a>

          {% endfor %}

        </li>

        {% endif %}

        {% if product.metafields.custom_info6.size > 0 %}

        <li>

          {% for field in product.metafields.custom_info6 %}

          <a href="#tab6">{{field | first}}</a>

          {% endfor %}

        </li>

        {% endif %}

        {% if product.metafields.custom_info7.size > 0 %}

        <li>

          {% for field in product.metafields.custom_info7 %}

          <a href="#tab7">{{field | first}}</a>

          {% endfor %}

        </li>

        {% endif %}

        {% if product.metafields.custom_info8.size > 0 %}

        <li>

          {% for field in product.metafields.custom_info8 %}

          <a href="#tab8">{{field | first}}</a>

          {% endfor %}

        </li>

        {% endif %}

      </ul> <!-- END tabs-nav -->

      <div id="tabs-content">

        

        {% if product.metafields.custom_info1.size > 0 %}        

        <div id="tab1" class="tab-content">

          {% for field in product.metafields.custom_info1 %}

          {{field | last}}

          {% endfor %}

        </div>

        {% endif %}

        

         {% if product.metafields.custom_info2.size > 0 %}        

        <div id="tab2" class="tab-content">

          {% for field in product.metafields.custom_info2 %}

          {{field | last}}

          {% endfor %}

        </div>

        {% endif %}

        

         {% if product.metafields.custom_info3.size > 0 %}        

        <div id="tab3" class="tab-content">

          {% for field in product.metafields.custom_info3 %}

          {{field | last}}

          {% endfor %}

        </div>

        {% endif %}

        

         {% if product.metafields.custom_info4.size > 0 %}        

        <div id="tab4" class="tab-content">

          {% for field in product.metafields.custom_info4 %}

          {{field | last}}

          {% endfor %}

        </div>

        {% endif %}

        

         {% if product.metafields.custom_info5.size > 0 %}        

        <div id="tab5" class="tab-content">

          {% for field in product.metafields.custom_info5 %}

          {{field | last}}

          {% endfor %}

        </div>

        {% endif %}

        

         {% if product.metafields.custom_info6.size > 0 %}        

        <div id="tab6" class="tab-content">

          {% for field in product.metafields.custom_info6 %}

          {{field | last}}

          {% endfor %}

        </div>

        {% endif %}

        

         {% if product.metafields.custom_info7.size > 0 %}        

        <div id="tab7" class="tab-content">

          {% for field in product.metafields.custom_info7 %}

          {{field | last}}

          {% endfor %}

        </div>

        {% endif %}

        

         {% if product.metafields.custom_info8.size > 0 %}        

        <div id="tab8" class="tab-content">

          {% for field in product.metafields.custom_info8 %}

          {{field | last}}

          {% endfor %}

        </div>

        {% endif %}

      </div> <!-- END tabs-content -->

    </div> <!-- END tabs -->

    <div class="custom-accordion hide medium-down--show">

      {% if product.metafields.custom_info1.size > 0 %}

        {% for field in product.metafields.custom_info1 %}

        <div class='item'>{{field | first}}</div>

        <div class='item-data'>

          <div>{{field | last}}</div>

        </div>

        {% endfor %}

      {% endif %}

      {% if product.metafields.custom_info2.size > 0 %}

        {% for field in product.metafields.custom_info2 %}

        <div class='item'>{{field | first}}</div>

        <div class='item-data'>

          <div>{{field | last}}</div>

        </div>

        {% endfor %}

      {% endif %}

      {% if product.metafields.custom_info3.size > 0 %}

        {% for field in product.metafields.custom_info3 %}

        <div class='item'>{{field | first}}</div>

        <div class='item-data'>

          <div>{{field | last}}</div>

        </div>

        {% endfor %}

      {% endif %}

      {% if product.metafields.custom_info4.size > 0 %}

        {% for field in product.metafields.custom_info4 %}

        <div class='item'>{{field | first}}</div>

        <div class='item-data'>

          <div>{{field | last}}</div>

        </div>

        {% endfor %}

      {% endif %}

      {% if product.metafields.custom_info5.size > 0 %}

        {% for field in product.metafields.custom_info5 %}

        <div class='item'>{{field | first}}</div>

        <div class='item-data'>

          <div>{{field | last}}</div>

        </div>

        {% endfor %}

      {% endif %}

      

      {% if product.metafields.custom_info6.size > 0 %}

        {% for field in product.metafields.custom_info6 %}

        <div class='item'>{{field | first}}</div>

        <div class='item-data'>

          <div>{{field | last}}</div>

        </div>

        {% endfor %}

      {% endif %}

      

      

      {% if product.metafields.custom_info7.size > 0 %}

        {% for field in product.metafields.custom_info7 %}

        <div class='item'>{{field | first}}</div>

        <div class='item-data'>

          <div>{{field | last}}</div>

        </div>

        {% endfor %}

      {% endif %}

      

      {% if product.metafields.custom_info8.size > 0 %}

        {% for field in product.metafields.custom_info8 %}

        <div class='item'>{{field | first}}</div>

        <div class='item-data'>

          <div>{{field | last}}</div>

        </div>

        {% endfor %}

      {% endif %}

      

    </div>

  </div>

</div>

SCSS  --------------------------------------------------------------------------------- 

.product-custom-info{

  .custom-tabs {

    width: 100%;

    margin: 30px;

  }

  ul#tabs-nav {

    list-style: none;

    margin: 0;

    padding: 5px;

    overflow: auto;

    li {

      

      border-bottom: 2px solid #fff;

      border-radius: 15px 15px 0 0;

      margin: 0 15px;

      border-left: 2px solid #e8e8e8;

      border-right: 2px solid #e8e8e8;

      border-top: 2px solid #e8e8e8;

      display: inline;

      cursor: pointer;

      background: #878f96;

      padding: 10px;

      margin-right: 4px;

      padding-right: 50px;

      display: block;

      float: left;

      line-height: 1;

      width: 100px;

      padding-left: 50px;

      padding-top: 17px;

      padding-bottom: 20px;

      width: auto;

      font-weight: 600;

      a{

        color: #fff;

        font-size: 17px;

      }

    }

    li.active{

      position: relative;

      background: #fff;

      border-bottom: 2px solid #fff;

      a{

      color: #6d6f71;

      }

      &:after{

        content: "";

        position: absolute;

        bottom: -5px;

        left: 0;

        width: 100%;

        height: 8px;

        background: #fff;

        z-index: 999;

      }

    }

  }

  #tabs-nav {

    li {

      a {

        text-decoration: none;

      }

    }

  }

  #tabs-content{

    margin-bottom: 10px;

    padding: 35px 50px;

    position: relative;

    z-index: 1;

    background: #fff;

    border: 2px solid #e8ebee;

    margin-top: -8px;

  }

  .tab-content {

    padding: 10px;

  }

}

.custom-accordion{

  width: 100%;

  margin: 30px;

  .item {

    display: block;

    width: inherit;

    font-size: 16px;

    line-height: 24px;

    background: #d5d5d3;

    border: 1px solid transparent;

    cursor: pointer;

    color: #fff;

    margin-top: 10px;

    position: relative;

    padding: 6px 10px;

    color: #000;

    &:after{

      content: "";

      display: block;

      position: absolute;

      right: 20px;

      top: 40%;

      width: 0;

      height: 0;

      border-left: 10px solid transparent;

      border-right: 10px solid transparent;

      border-top: 10px solid #fff;

    }

  }

  .item.active-item{

    background-color: #878f96;

    color: #ffffff;

    &:after{

      border-top: 0;

      border-bottom: 10px solid #fff;

    }

  }

  .item-data {

    display: none;

    width: inherit;

    height: auto;

    position: relative;

    z-index: 1;

    border: 2px solid #e8ebee;

    color: #000;

    padding: 10px;

  }

}

JS ------------------------------------------------------

$(document).ready(function(){

  // Show the first tab and hide the rest

  $('#tabs-nav li:first-child').addClass('active');

  $('.tab-content').hide();

  $('.tab-content:first').show();

  // Click function

  $('#tabs-nav li').click(function(){

    $('#tabs-nav li').removeClass('active');

    $(this).addClass('active');

    $('.tab-content').hide();

    var activeTab = $(this).find('a').attr('href');

    $(activeTab).fadeIn();

    return false;

  });

  

//   Accordion

  

  $('.item').click(function (e){

    $(this).addClass('active-item').siblings().removeClass('active-item');

    if($(this).next('.item-data').css('display') != 'block'){

      $('.active').slideUp('slow').removeClass('active');

      $(this).next('.item-data').addClass('active').slideDown('slow');

    } else {

      $('.active').slideUp('slow').removeClass('active');

      $(this).removeClass('active-item');

    }

  });

  

})

Output: 

Thanks