Gold Price Editor

NOTE: This section will require 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 at support@droidinfinity.xyz.

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 %}
      
  {% capture 'shop_meta_fields' %}
    {{ shop.metafields.DI-GoldPrice.addtional_shop_settings | json }}
  {% 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 variantMetaFields = { {{ variant_meta_fields }} }  
    const shopMetaField = {{ shop_meta_fields }}    
    console.log(variantMetaFields);
    console.log(shopMetaField);
  </script>

  <script>

    //Populate the UI for the selected/default variant. 
    const firstAvailableVariantId = {{ product.selected_or_first_available_variant.id }};
    if(variantMetaFields && variantMetaFields[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) && variantMetaFields && variantMetaFields[variantId]) {   
        updateProductDetails(variantId);
        updatePriceBreakup(variantId);
      }
    });
    
    function updateProductDetails(variantId) {
      console.log('Update Product Details. Variant: ' + variantId);
      const variantConfig = variantMetaFields[variantId];
      
      //...Populate your UI here. 
    }
    
    function updatePriceBreakup(variantId) {
      console.log('Update Price Breakup. Variant: ' + variantId);
      const variantConfig = variantMetaFields[variantId];
      const metalPriceConfig = shopMetaField;
      
      //...Populate your UI here. 
    }
  </script>
  

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

Update the updateProductDetails and updatePriceBreakup functions to populate the desired details on your website.

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 at support@droidinfinity.xyz.

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 updated automatically whenever the product prices are updated for your store.