This article helps you add a Metal Price Bar to your website. The Metal Price Bar informs your customer about the prices of the metals sold on your website. This helps in improving customer trust and transparency.

The prices on the Metal Price Bar are linked to your metal prices on the Dashboard.

<aside> 📢 For the Basic & Starter plans, the prices will be updated only when the prices are refreshed on the Dashboard. For the Advanced plan, the prices will be updated automatically by the application at regular intervals.

</aside>

Please follow the below steps to add the Metal Price Bar.

1. Go to Shopify Admin → Online Store.
2. On your live theme, click on ‘•••’ and select Edit Code.
3. Under Sections, click on the Add a new section option.
4. Enter the name of the file as ‘metal-price-bar’ and click Done.
5. Copy and paste the information below code to the newly created 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: {{ section.settings.metal_price_bar_bg_color }};
    color: {{ section.settings.metal_price_bar_text_color }};
    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: 600;
    font-size: 14px;
    padding-left: 8px;
  }

  @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-hide-on-mobile {
      display: none !important;
    }
  }
</style>

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

  <div class="gpe-metal-type-container">
    <strong class="gpe-metal-type">SILVER</strong>
    <span class="gpe-metal-price"> 
		    {{ shop.metafields.DI-GoldPrice.metal_prices.value.silver_price | times: 100 | times: 31.1034768 | money }}
    </span>
  </div>

  <div class="gpe-metal-type-container">
    <strong class="gpe-metal-type">PLATINUM</strong>
    <span class="gpe-metal-price"> 
		    {{ shop.metafields.DI-GoldPrice.metal_prices.value.platinum_price | times: 100 | times: 31.1034768 | money }}
    </span>
  </div>

  <div class="gpe-metal-type-container gpe-hide-on-mobile">
    <strong class="gpe-metal-type">PALLADIUM</strong>
    <span class="gpe-metal-price"> 
		    {{ shop.metafields.DI-GoldPrice.metal_prices.value.palladium_price | times: 100 | times: 31.1034768 | money }}
    </span>
  </div>
</div>

{% schema %}
  {
    "name": "Metal Price Bar",
    "settings": [
		{
			"type": "color",
			"id": "metal_price_bar_bg_color",
			"label": "Background Color",
			"default": "#484848"
		},
		{
			"type": "color",
			"id": "metal_price_bar_text_color",
			"label": "Text Color",
			"default": "#ffffff"
		}
    ],
	"presets": [
		{
		  "name": "Metal Price Bar"
		}
	],
	"enabled_on": {
		"groups": ["header"]
	}
  }
{% endschema %}

1. Click on Save to save the code.
2. Now navigate to Shopify Admin → Online store and click on the Customize button.
3. Add the Metal Price Bar section to the Header of your website.

1. You can customize the background and text colors on the Template Editor.
2. Once done, click on Save to save the changes.