How to Display the Lowest Price Information on a Product Collection Page

If your theme does not allow adding extension blocks to show data created by our app, you will need to manually edit the template code. This is the case when you want to display the lowest price information in a product card on Dawn-based themes.

This guide may not apply exactly to your themes but hopefully it will help you achieve your goal.

To get started navigate to the theme editor -> customize -> Edit code

In the sidebar, search for the snippet which renders the product card. In the Dawn 5.0 theme, you would find it in Snippets/card-product.liquid

Open up the card-product.liquid source code and locate the spot where you want to insert the omnibus price information.

Insert the following code:

{% render 'omnibus-price', product: card_product %}

Next, we will create the omnibus-price snippet referred to in the previous section.

In the sidebar, inside the Snippets folder, click Add a new snippet and enter omnibus-price as the filename. Copy-paste the following code into the newly created file omnibus-price.liquid and modify the label and date format if needed.

{% assign selected_product = product.selected_or_first_available_variant %}
{% assign omnibus_metafields = selected_product.metafields['app--320503809--omnibus'] %}
{% comment %} Choose to display the lowest prior price with discounts included or excluded {% endcomment %}
{% assign omnibusprice = omnibus_metafields.price %}
{% comment %}
{% assign omnibusprice = omnibus_metafields.priceWithCoupons %}
{% endcomment %}
{% assign omnibusprice = omnibusprice.value %}
{% assign label = 'Lowest price last 30 days' %}

{% assign show_percentage = false %}

{% if omnibusprice and selected_product.compare_at_price > selected_product.price %}
 <div id="sniffie-omnibus-price">
 {{ label }} {{ omnibusprice | money_with_currency }}
 {% comment %} Remove the comment below to display the date {% endcomment %}
      {% if show_percentage == true %}
        {% assign diff = omnibusprice | minus: selected_product.price %}
        {% assign percentage = 100.00 | times: diff | times: -1 | divided_by: omnibusprice | round %}

        {% if omnibusprice and percentage != 0 and diff > 0 %}
          <span class="sniffie-omnibus-price__change">
            ({% if diff > 0 %}{% else %}+{% endif -%}
            {{- percentage }}%)
          </span>
        {% endif %}
      {% endif %}
 {% comment %}
   {% assign omnibusdate = omnibus_metafields.date %}
   {% assign date_format = '%B %d, %Y' %}
   {% if omnibusdate != null %}
    ({{ omnibusdate | date: date_format }})
   {% endif %}
 {% endcomment %} </div>
{% endif %}

Finally, save the files, and voilà! The product card now has Omnibus price information included.