How to Add Lowest Price Information to Your Storefront Without Extension by editing liquid code (technical)

If your theme does not support the use of our theme extension you can add the lowest price information by editing the template code. This guide provides some examples that you are free to copy and modify for use in your own storefront.

Start by navigating to the theme editor and click Edit code located in the menu in the top left corner of the page. If you don't know how to access the theme editor, see this guide by Shopify.

In the left sidebar of the theme editor, open the Snippets folder and click Add a new snippet (image below). Give it a name, for instance: lowest-price.liquid

Paste the following template code in the newly created snippet file:

{% assign selectedProduct = product.selected_or_first_available_variant %}
{% assign omnibusprice = selectedProduct.metafields.app--320503809--omnibus.price %}
{% assign label = 'Lowest price 30 days prior to discount:' %}

{% assign hide_if_equal_to_compare_at_price = false %}

<div id="sniffie-omnibus-price">
  {% if omnibusprice %}
    <span>
      {% if hide_if_equal_to_compare_at_price and product.compare_at_price != omnibusprice.value and product.compare_at_price != omnibusprice %}
      {% if selectedProduct.compare_at_price > selectedProduct.price %}
        {{ label }}
        {{ omnibusprice | metafield_tag }}
      {% endif %}
      {% endif %}
    </span>
  {% endif %}
</div>

<script>
if(window.omnibusPriceSection="{{ section.id }}","undefined"==typeof lastUrl){let e=location.href;new MutationObserver(()=>{let n=location.href;n!==e&&(e=n,onUrlChange())}).observe(document,{subtree:!0,childList:!0})}function onUrlChange(){let e=new URL(location.href),n=e.searchParams.get("variant");getData(n)}async function getData(e){getDataFromServer(e)}async function getDataFromServer(e){try{var n=new URLSearchParams({variant:e,section_id:window.omnibusPriceSection});fetch("".concat(window.location.pathname,"?").concat(n.toString())).then(e=>e.text()).then(e=>{let n=new DOMParser().parseFromString(e,"text/html"),t=document.querySelector("#sniffie-omnibus-price"),r=n.querySelector("#sniffie-omnibus-price");r&&t&&(t.innerHTML=r.innerHTML)})}catch(t){console.log("error when updating omnibus price",t)}}
</script>

Change the label and date format to your liking.

Please note that

{% if selectedProduct.compare_at_price > selectedProduct.price %}
...
{% endif %}

causes the block to be empty when the product is not on sale. If you wish to show the lowest price also then the product is not discounted, remove this condition and the endif in the end.

Not that if you want to use omnibus price with coupons included, then replace the line

{% assign omnibusprice = selectedProduct.metafields.app--320503809--omnibus.price %}

with

{% assign omnibusprice = selectedProduct.metafields.app--320503809--omnibus.priceWithCoupons %}

The image below has the final lowest-price.liquid in the snippets folder.

Next, add the snippet to wherever you want the lowest price information to be shown.

Depending on your template the file names and structure might differ from in this example with the Dawn template. Say we want to add the snippet to product cards on a collection page. If we inspect the collection page we see that it contains a product grid that renders the card-product.liquid snippet. Locate and edit that file (which you find where your snippets are located in the theme editor) and add then add our newly created snippet where you want the lowest price information to be shown with the code.

{% render "lowest-price", product: product %}

For example, if you want to display the new block in the theme where the price is displayed, you can add it to the price object (image below, where the rendering block is highlighted).

Just save and there you have it! The product card now contains the lowest price information everywhere where the price is displayed (in this example).

Depending on the theme, the variable product can be called something. If nothing renders on the first try, try changing that in the above snippet. Check for other references to the products, eg. in the price renderer.

You re-use the snippet anywhere where product information is displayed within a liquid template, eg. on a product page. Note that depending on the theme, the location of snippets that render product information can be inside some other folder, such as Sections rather than just Snippets.

For rendering the Omnibus information in collection pages, we have a guide available here.

How to translate the label when installed with custom liquid code

Go to theme editor and select Edit code. Look for the file [lang].default.json in the locales folder. In the object products.product, add a line

"lowest_prior_price": "Lowest prior price",

and save changes.

Next select the lowest-price.liquid file you created earlier. Replace the line

{% assign label = 'Lowest price 30 days prior to discount:' %}

with

{% assign label = 'products.product.lowest_prior_price' | t %}

You can now use the Translate and Adapt to localize the label for all languages that your shop uses.

Optional:

You can use conditional statements ("if/else" statements) to further customize the block.

{% if localization.country.iso_code == 'FI' %}
  ...  
{% endif %}

You can eg. use the conditional statements to change date formatting by reassigning date_format to your liking for different locales with a similar method as illustrated. Same can be done for Shopify markets if you use fixed price lists and not individual price adjustments. To achieve this, from the base money format of your store (which is the Omnibus price), remove VAT if applicable and then add the localized VAT to that market, and the price rounding according to your rules.

For more information on how to use conditional statements you can refer to this Liquid guide by Shopify.