Technical Documentation

Show Live Metal Rates

For implementing the Metal Price Bar on your site, check out our detailed guide. Need help? Our support team is ready to assist.

Display Product Details and Pricing Breakdown

Shopify's Metafields functionality enables the display of Product Configuration and Price Breakdown on your storefront. This capability is included in both the Basic+ and Advanced subscription tiers. As an optional feature, our support team is available to address any questions you may have.

To implement this feature, navigate to the Shopify Admin Panel and access the Themes section. From the Actions menu of your active theme, choose Edit Code. Locate and open the product.liquid file in the Theme Editor.

If your theme structure differs, you may need to look for alternative files such as main-product.liquid or product-template.liquid. Theme-specific variations in file naming are common.

Insert the following code at the beginning of your product.liquid file.

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

Add the following code snippet at the end of your product.liquid template.

            
   <!-- [Live Gold Price MGR] Populate the captured data onto UI. -->
   <script>

    window.grVariantConfigs ={ {{ gr_variant_meta_fields }} };
    window.grFirstAvailableVariantId = {{ product.selected_or_first_available_variant.id }}
    window.gr_recent_price_metafield = {{ shop.metafields.GOLD_RECENT_PRICE.recent_price | json }};

    console.log("Variants:", window.grVariantConfigs);
    console.log("Selected variant id:", window.grFirstAvailableVariantId);
    console.log("Recent price:", window.gr_recent_price_metafield.recentPrice.gold_24);
   </script>
            
   <script>

    if (window.grVariantConfigs && window.grFirstAvailableVariantId && window.gr_recent_price_metafield.showPriceBreak) {
        prepareConfData(window.grVariantConfigs[window.grFirstAvailableVariantId], window.gr_recent_price_metafield.showPriceBreak);
    }

    function prepareConfData(variant, showPriceBreak) {
        console.log(variant);
        console.log(showPriceBreak)
        if (variant && variant.configuration) {
            //...Populate your Product Details UI here.
            
            if (showPriceBreak) {
                //...Populate your Price Break UI here.
            }
        } else {
            document.getElementById('gr_product_detail_main').style.display = 'none';
        }
    }
    
    document.addEventListener('change', function () {
        const url = new URL(document.URL);
        const variantId = url.searchParams.get('variant');
        
        if (variantId && !isNaN(variantId) && window.grVariantConfigs && window.grVariantConfigs[variantId]) {
            prepareConfData(window.grVariantConfigs[variantId], window.gr_recent_price_metafield.showPriceBreak);
        }
    });
    </script>
            
        

Important: The provided code snippet retrieves variant settings from Shopify. You'll need to implement the data display logic in the updateProductDetails and updatePriceBreakup functions to show the product information and pricing details on your site.

After saving your changes, reload the product page and check the Browser's Developer Tools. If the products are properly set up, you'll see the Variant Settings in the Console panel.