Shopify: Metafield Variant

product-template.liquid

<!--  begin metafield -->
          <div id="div1"></div>
          <script type="text/javascript">
          var variants = {};
          {% for variant in product.variants %}
          variants[{{variant.id}}] = "{{ variant.metafields.product_info.pdf}}";
          var div1=document.getElementById("div1");
          var newlink = document.createElement('a');

          newlink.setAttribute('class', 'link {{variant.id}}');
          // newlink.setAttribute('href', '{{ variant.metafields.product_info.pdf }}');
          newlink.setAttribute("target", "_blank");
          newlink.innerHTML="<span>Click here</span> to see our Certificate of Analysis report</a>"

          {% unless variant.metafields.product_info.pdf contains '#' or variant.metafields.product_info.pdf == blank %}
          div1.appendChild(newlink);
          {% endunless %}
        
          {% endfor %}
          </script> 
          <!-- end metafield -->

Shopify: Metafield added on Variants

#div1{
  .link{
    display: none;
    font-weight: 700;
    color: #343434;
    span{
      color: #69f;
    }
  }
  a[href^="#"]{
    display: none !important;
  } 
}

theme.js

 //de cautat variable callback din theme.js
if (variant.available) {
          $('#div1 a:nth-child(1)').attr("href",(variants[variant.id])).css( "display", "block" );
}