カスタマイズされたLiquidに挿入するコード

<div class="page-width" id="about-shipping-message">
	<p>あと<span id="about-remaining-price"></span>で送料無料になります。</p>
</div>
<script>
const freeShippingPrice = 5000;
window.addEventListener('DOMContentLoaded', (event) => {
  const observer = new MutationObserver(freeShippingChecker);
  const elem = document.getElementById('main-cart-footer');
  const config = { 
    attributes: true, 
    childList: true, 
    characterData: true,
    subtree: true
  };
  observer.observe(elem, config);
	freeShippingChecker();
});
const freeShippingChecker = () => {
	const xhr = new XMLHttpRequest();
  xhr.open('GET', '/cart.json', true);
  xhr.onload = () => {
    if (xhr.status === 200) {
      const cart = JSON.parse(xhr.responseText);
      const totalPrice = cart.total_price / 100;
			const aboutShippingMessage = document.getElementById('about-shipping-message');
      const remainingPrice = freeShippingPrice - totalPrice;
			const aboutRemainingPrice = document.getElementById('about-remaining-price');
      if ( remainingPrice > 0 ){
          aboutShippingMessage.style.display = 'block';
          aboutRemainingPrice.innerText = remainingPrice.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' });;
      } else {
          aboutShippingMessage.style.display = 'none';
			}
    }
  };
  xhr.send();
}
</script>
<style>
#about-shipping-message {
	display: none;
  text-align: right;
}
#about-remaining-price {
    color: #C00;
    font-weight: bold;
}
</style>