All Collections
Sniffie Omnibus Pricing App
Adding lowest price information to your storefront
How to Add Lowest Price Information to Your Storefront Without Extension [TECHNICAL]
How to Add Lowest Price Information to Your Storefront Without Extension [TECHNICAL]
Fredrik Hollsten avatar
Written by Fredrik Hollsten
Updated yesterday

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). Name it eg. 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.omnibus.price %}
{% assign omnibusdate = %}
{% assign label = 'Lowest prior price:' %}
{% assign date_format = '%B %d, %Y' %}

{% comment %}
Some date formatting options:
"%B %d, %Y" => "December 31, 2018"
"%b %d, %Y" => "Dec 31, 2018"
"%m/%d/%Y" => "12/31/2018"
"%d.%m.%Y" => "31.12.2018"
"on %B %d, %Y" => "on Dec 31, 2018"
{% endcomment %}

<div id="sniffie-omnibus-price">
{% if omnibusprice %}
{% if selectedProduct.compare_at_price > selectedProduct.price %}
{{ label }}
{{ omnibusprice | metafield_tag }}
{% if omnibusdate != null %}
({{ omnibusdate | date: date_format }})
{% endif %}
{% endif %}
{% endif %}

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.omnibus.price %}


{% assign omnibusprice = selectedProduct.metafields.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 the you want to display the new block in the theme where price is displayed, you can add it to the price object (image below, where 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 if you used the technical guide to install snippet

If you need to translate the label in the snippet you create, you can use conditional statements ("if/else" statements) to do this.

For example, if you want to show the label in Finnish ("Alin aiempi hinta") for Finnish customers and the English label ("Lowest prior price") for other languages, you will achieve this with the localization.county.iso_code in the conditional statement as per the following example

{% assign selectedProduct = product.selected_or_first_available_variant %}
{% assign omnibusprice = selectedProduct.metafields.omnibus.price %}
{% assign omnibusdate = %}
{% assign label = 'Lowest prior price:' %}
{% assign date_format = '%B %d, %Y' %}

{% if == 'FI' %}
{% assign label = 'Alin aiempi hinta:' %}
{% else %}
{% assign label = 'Lowest prior price:' %}
{% endif %}

This will reassign the label to Finnish if the customer is in the Finnish store (where is FI), and else it will just keep the label as the English label. Note that the assignment of "Lowest prior price" to label in the else-block is redundant, since label has already been assigned to that vale, but it is shown in the above code example to illustrate how to use conditional statements in Liquid. Then just paste the rest of the snippet from the beginning of this guide to the end of the previous snippet.

You can also use the conditional statements to change date formatting by reassigning date_format to your liking for different locales with a similar method as illustrated.

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

Updating lowest price information when variant changes

Our theme extension automatically handles updating omnibus price when variant changes. However, when manually adding the block, the price will not update when the variant is changed. This is due to how Shopify handles dynamic variant detail updates.
To address this you will need to add some scripts to your theme.

Add the following script inside assets/theme.js file (the name might differ from theme to theme, any .js file that is loaded in you storefront should be sufficient)

if (typeof lastUrl === 'undefined') {
let lastUrl = location.href;
new MutationObserver(() => {
const url = location.href;
if (url !== lastUrl) {
lastUrl = url;
}).observe(document, { subtree: true, childList: true });
function onUrlChange() {
const url = new URL(location.href);
const new_variant = url.searchParams.get('variant');
async function getData(new_variant) { getDataFromServer(new_variant)}async function getDataFromServer(new_variant) { try { var searchParams = new URLSearchParams({ variant: new_variant, section_id: window.omnibusPriceSection }); fetch("".concat(window.location.pathname, "?").concat(searchParams.toString())) .then((response) => response.text()) .then((responseText) => { const html = new DOMParser().parseFromString(responseText, "text/html"); const destination_omnibus_price_block = document.querySelector("#sniffie-omnibus-price"); const source_omnibus_price_block = html.querySelector("#sniffie-omnibus-price"); if (source_omnibus_price_block && destination_omnibus_price_block) { destination_omnibus_price_block.innerHTML = source_omnibus_price_block.innerHTML; } }) } catch (err) { console.log("error when updating omnibus price", err) }}

Also make sure that your snippet for displaying the omnibus price includes the following lines:

window.omnibusPriceSection = '{{ }}';

Did this answer your question?