Documentation

NOTE: This section requires a basic knowledge of Javascript coding and Shopify theme development.
Display Product Details

Using Shopify Metafields, the Product Configuration & Price Breakup can be displayed on the Storefront. This feature is available on the Basic+ and the Advanced Plan. This is an Optional feature. If you have any queries, contact our support team.

In Shopify Admin Panel, select the Themes menu. Under the Actions drop-down of the currently published theme, select the Edit Code option. Search and open the file named product.liquid in the Theme Editor.

In case, your theme does not have a product.liquid file, search for main-product.liquid or product-template.liquid. The file names may differ from theme to theme.

Copy the below code to the top of the product.liquid file.


  <!-- [Live Gold Price Editor] Capture the Metafields data from Shopify -->
  {% capture 'variant_meta_fields' %}
    {% for variant in product.variants %}
      {{ variant.id | json }}: {{ variant.metafields.DI-GoldPrice.variant_additional_details | json }}  
      {% unless forloop.last %},{% endunless %}
    {% endfor %}
  {% endcapture %}
  

Copy the below code to the bottom of the product.liquid file.


  <!-- [Live Gold Price Editor] Populate the captured data onto UI. -->
  <script>
  
    const variantConfigs = { {{ variant_meta_fields }} };  
    const metalPriceConfig = {{ shop.metafields.DI-GoldPrice.addtional_shop_settings | json }};    
    const advancedStoneConfig = {{ shop.metafields.DI-GoldPrice.stone_pricing_slabs | json }} || [];

    console.log(variantConfigs);
    console.log(metalPriceConfig);
    console.log(advancedStoneConfig);
  </script>

  <script>

    //Populate the UI for the selected/default variant. 
    const firstAvailableVariantId = {{ product.selected_or_first_available_variant.id }};
    if(variantConfigs && variantConfigs[firstAvailableVariantId]) {
      updateProductDetails(firstAvailableVariantId);
      updatePriceBreakup(firstAvailableVariantId);  
    }
    
    //Populate the UI again when the User selects a different Variant. 
    document.addEventListener('change', function() {
      const url = new URL(document.URL);
      const variantId = url.searchParams.get("variant");
      
      if (variantId && !isNaN(variantId) && variantConfigs && variantConfigs[variantId]) {   
        updateProductDetails(variantId);
        updatePriceBreakup(variantId);
      }
    });
    
    function updateProductDetails(variantId) {
      console.log('Update Product Details. Variant: ' + variantId);
      const variantConfig = variantConfigs[variantId];
      
      //...Populate your UI here. 
      /** Example: 
       * 
       * document.getElementById('metal_weight').innerHTML = variantConfig.metal_weight;
       * 
       ** /
    }
    
    function updatePriceBreakup(variantId) {
      console.log('Update Price Breakup. Variant: ' + variantId);
      const variantConfig = variantConfigs[variantId];
      
      //...Populate your UI here. 
    }
  </script>
  

NOTE: The above code only fetches the variant configuration from Shopify. The code for Data Population should be implemented to display the Product Details and Price Breakup. Update the updateProductDetails and updatePriceBreakup functions to populate the desired details to your website.

Save the code and refresh your product page. Open the Developer Tools on the Browser. If the products are configured, the Variant Configurations will be displayed on the Developer Console.

Display Metal Price Bar

Using Shopify Metafields, the Precious Metal Prices can be displayed on the Storefront. This feature is available on the Basic+ and the Advanced Plan. This is an Optional feature. If you have any queries, contact our support team.

In Shopify Admin Panel, select the Themes menu. Under the Actions drop-down of the currently published, select the Edit Code option. Search and open the file named header.liquid in the Theme Editor.

Copy the below code to the top of the header.liquid file.


  <!-- [Live Gold Price Editor] Display a Metal Price Bar at the top of the page -->
  <style>
    .gpe-metal-price-bar {
      display: flex;
      justify-content: space-evenly;
      align-items: center;    
      background-color: #373737;
      color: #f2f2f2;
      padding-top: 8px;
      padding-bottom: 8px;
    }
    
    .gpe-metal-price-bar .gpe-metal-type-container {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
    
    .gpe-metal-type {
      display: inline;
      font-weight: 600;
      font-size: 14px;
    }
    
    .gpe-metal-price {
      display: inline;
      font-weight: 700;
      font-size: 14px;
      padding-left: 12px;
    }
    
    .gpe-seperator {
      display: inline; 
    }
  
    @media(max-width: 576px) {
      .gpe-metal-price-bar {
        padding-top: 6px;
        padding-bottom: 6px;
      }
    
      .gpe-metal-price-bar .gpe-metal-type-container {
        flex-direction: column;
      }
      
      .gpe-metal-type {
        display: block;
        font-size: 12px;
      }

      .gpe-metal-price {
        display: block;
        padding-left: 0;
      }

      .gpe-seperator {
        display: none; 
      }       
    }
  </style>

  <!-- Display Metal Price in Grams -->
  <div class="gpe-metal-price-bar">
    <div class="gpe-metal-type-container">
      <strong class="gpe-metal-type">GOLD <span class="gpe-seperator">:</span></strong>
      <span class="gpe-metal-price">{{ shop.metafields.DI-GoldPrice.addtional_shop_settings.gold_price_24k | times: 100 | money }} </span>
    </div>
    
    <div class="gpe-metal-type-container">
      <strong class="gpe-metal-type">SILVER <span class="gpe-seperator">:</span></strong>
      <span class="gpe-metal-price">{{ shop.metafields.DI-GoldPrice.addtional_shop_settings.silver_price | times: 100 | money }} </span>
    </div>
    
    <div class="gpe-metal-type-container">
      <strong class="gpe-metal-type">PLATINUM <span class="gpe-seperator">:</span></strong>
      <span class="gpe-metal-price">{{ shop.metafields.DI-GoldPrice.addtional_shop_settings.platinum_price | times: 100 | money }} </span>
    </div>
  </div>
  

Update the Background Color and other styles to match your Website theme.

Save the code and refresh your website. You will see a Metal Price Bar on the top of the page. The prices will be refershed automatically whenever the product prices are updated for your store.

Copyright © 2022 Droid Infinity • All Rights reserved