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

Disable the Soldout variants in Shopify

Hello,

The following Solution will work for any number of options

Create "linked-options" snippet. add the following code in it

------------------------------- Code ------------------------

<script>

  // (c) Copyright 2016 Caroline Schnapp. All Rights Reserved. Contact: mllegeorgesand@gmail.com

  // See https://docs.shopify.com/themes/customization/navigation/link-product-options-in-menus

  var Shopify = Shopify || {};

  Shopify.optionsMap = {};

  Shopify.updateOptionsInSelector = function(selectorIndex) {

    switch (selectorIndex) {

      case 0:

        var key = 'root';

        var selector = jQuery('.single-option-selector:eq(0)');

        break;

      case 1:

        var key = jQuery('.single-option-selector:eq(0)').val();

        var selector = jQuery('.single-option-selector:eq(1)');

        break;

      case 2:

        var key = jQuery('.single-option-selector:eq(0)').val();  

        key += ' / ' + jQuery('.single-option-selector:eq(1)').val();

        var selector = jQuery('.single-option-selector:eq(2)');

    }

    var initialValue = selector.val();

    //   selector.empty();    

    var availableOptions = Shopify.optionsMap[key];

    for (var i=0; i<availableOptions.length; i++) {

      var option = availableOptions[i];

      console.log(option);

      var newOption = jQuery('<option></option>').val(option).html(option);

      //     selector.append(newOption);

      $(selector).find('option[value="'+option+'"]').addClass('available-variant');

      setTimeout(function(){ 

        $(selector).find('option').not( ".available-variant" ).attr('disabled','disabled').addClass('soldout-variant');

        setTimeout(function(){ 

          $('.soldout-variant').each(function(){

            var variantVal = $(this).text();

            if(variantVal.indexOf("Sold") <= 0){

              $(this).text(variantVal+" - Sold Out");

            }

          })

        },300);

      }, 200);

    }

    jQuery('.swatch[data-option-index="' + selectorIndex + '"] .swatch-element').each(function() {

      if (jQuery.inArray($(this).attr('data-value'), availableOptions) !== -1) {

        $(this).removeClass('soldout').show().find(':radio').removeAttr('disabled','disabled').removeAttr('checked');

      }

      else {

        $(this).addClass('soldout').hide().find(':radio').removeAttr('checked').attr('disabled','disabled');

      }

    });

    if (jQuery.inArray(initialValue, availableOptions) !== -1) {

      selector.val(initialValue);

    }

    selector.trigger('change');  

  };

  Shopify.linkOptionSelectors = function(product) {

    // Building our mapping object.

    for (var i=0; i<product.variants.length; i++) {

      var variant = product.variants[i];

      if (variant.available) {

        // Gathering values for the 1st drop-down.

        Shopify.optionsMap['root'] = Shopify.optionsMap['root'] || [];

        Shopify.optionsMap['root'].push(variant.option1);

        Shopify.optionsMap['root'] = jQuery.unique(Shopify.optionsMap['root']);

        // Gathering values for the 2nd drop-down.

        if (product.options.length > 1) {

          var key = variant.option1;

          Shopify.optionsMap[key] = Shopify.optionsMap[key] || [];

          Shopify.optionsMap[key].push(variant.option2);

          Shopify.optionsMap[key] = jQuery.unique(Shopify.optionsMap[key]);

        }

        // Gathering values for the 3rd drop-down.

        if (product.options.length === 3) {

          var key = variant.option1 + ' / ' + variant.option2;

          Shopify.optionsMap[key] = Shopify.optionsMap[key] || [];

          Shopify.optionsMap[key].push(variant.option3);

          Shopify.optionsMap[key] = jQuery.unique(Shopify.optionsMap[key]);

        }

      }

    }

    // Update options right away.

    Shopify.updateOptionsInSelector(0);

    if (product.options.length > 1) Shopify.updateOptionsInSelector(1);

    if (product.options.length === 3) Shopify.updateOptionsInSelector(2);

    // When there is an update in the first dropdown.

    jQuery(".single-option-selector:eq(0)").change(function() {

      Shopify.updateOptionsInSelector(1);

      if (product.options.length === 3) Shopify.updateOptionsInSelector(2);

      return true;

    });

    // When there is an update in the second dropdown.

    jQuery(".single-option-selector:eq(1)").change(function() {

      if (product.options.length === 3) Shopify.updateOptionsInSelector(2);

      return true;

    });  

  };

  {% if product.available and product.options.size > 1 %}

  var $addToCartForm = $('form[action="/cart/add"]');

  if (window.MutationObserver && $addToCartForm.length) {

    if (typeof observer === 'object' && typeof observer.disconnect === 'function') {

      observer.disconnect();

    }

    var config = { childList: true, subtree: true };

    var observer = new MutationObserver(function() {      

      Shopify.linkOptionSelectors({{ product | json }});

      observer.disconnect();

    });  

    observer.observe($addToCartForm[0], config);

  }

  {% endif %}

</script>

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

Add the following style in your CSS or Scss file

 .soldout-variant{

  background: #ebe9e9;

  }

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

Output:

Thanks