<script type="text/javascript">
      // Get the HTML element where the id of the current variation displayed is stored.
      // each theme could have a different element with this information stored so this selector could change.
      // For Dawn theme the selector was not defined so we configured the selector to be: shopify-variant-id
      var productSelectEl = document.getElementById('shopify-variant-id');
      // cylindo viewer el and not cylindo viewer el
      var cylindoViewerWrapperEl = document.getElementById('cylindo-viewer-wrapper');
      var cylindoViewerEl = document.createElement('cylindo-viewer');
      // get the product metafileds
      var productData = {{ product.metafields.cylindo | json}};
      // get the features from the metafieds for each variation available on this product.
      var productVariants = [
        {% for variant in product.variants %}
        {
          id: {{ variant.id }},
          features: {{ variant.metafields.cylindo.cylindo_features }},
        },
        {% endfor %}
      ];
      // get the account id / it could be a static value.
      var customerID = 4965;
      // get the product code.
      var productCode = productData.cylindo_product_code;
      // prepare the viewer instance variable
      var viewerInstance = null;
      // this method gets the new features according to the new variant selected
      var getFeatures = function() {
        var variant = productVariants.find(function(el) {
          return el.id == productSelectEl.value;
        });
        return variant.features || [];
      }
      // prepare the first set of features.
      var features = getFeatures();
      // declare options variable.
      var options;
	  // if we've all the information needed to create the viewer instance proceed
      if (customerID && productCode && features) {
        cylindoViewerWrapperEl.appendChild(cylindoViewerEl);
        cylindoViewerEl['code'] = productCode;
        cylindoViewerEl['customer-id'] = customerID;
        cylindoViewerEl['features'] = features;
		// if cylindo is loaded create the viewer instance using the options object.
        productSelectEl.addEventListener('change', function() {
          features = getFeatures();
          // update the viewer
          cylindoViewerEl.features = features;
        });
        cylindoViewerWrapperEl.classList.remove('hidden');
      } else {
         // if the information required to build the new instance is not present, then show the error and display the default viewer
         console.log('Missing information to create 360 viewer');
      }

</script>