My theme doesn’t allow adding the block with the lowest price, what should I do?

My theme doesn’t allow adding the block with the lowest price, what should I do?

It will be possible to add the required block in the product-price.liquid code. To proceed, follow the steps below:

1. Proceed to Online store > Themes > Customize > Edit Code.



2. Add a new snippet in the Snippets folder:



  1. Insert the content below and save the snippet:


  1. <div id="am-omnibus-container-{{ product.id }}"></div> <script> (async () => { const {shop, locale, currency} = window.Shopify; if (!shop) { return; } const productId = "{{ product.id }}"; if (!productId || typeof window.ShopifyAnalytics === "undefined") { return; } const selectedVariantId = "{{ product.selected_or_first_available_variant.id }}"; const {page} = window.ShopifyAnalytics.meta; const {pageType} = page; if (pageType === "product") { const endpoint = `/apps/am-omnibus-price`; const response = await fetch(endpoint, { method: "POST", headers: { "Content-Type": "application/json", Accept: "application/json" }, body: JSON.stringify({ shop, productId, variantId: selectedVariantId, locale, currency }) }); if (!response.ok) { return; } const {lowestPriceHtml} = await response.json(); if (!lowestPriceHtml) { return; } const selector = `am-omnibus-container-${productId}`; const container = document.getElementById(selector); if (!container) { return; } container.innerHTML = lowestPriceHtml; } })(); </script>

  1. Add the following line at the end of the product-price.liquid code:

  1. {%- render 'product-page-lowest-price', product:product -%}
Once you save the changes, the application’s block should appear on the front end.