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.

If you don’t use Markets with our app, you can use this code.

{% 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 %}

If you’re using Markets with our app, follow this code instead.

{% liquid
  # Display a percentage change after the price
  assign show_percentage = false

  # Display the date of the lowest price prior to current sale
  # and the format to use
  assign show_date = false
  assign date_format = '%B %d, %Y'

  assign label = "Lowest price in the last 30 days:"
  assign market_price_key = 'price-' | append: localization.country.iso_code
  assign market_price_with_coupons_key = 'priceWithCoupons-' | append: localization.country.iso_code

  assign market_date_key = 'date-' | append: localization.country.iso_code
  assign market_date_with_coupons_key = 'dateWithCoupons-' | append: localization.country.iso_code

  assign selected_product = product.selected_or_first_available_variant

  assign omnibus_metafields = selected_product.metafields['app--320503809--omnibus']

  assign omnibusprice = omnibus_metafields.price
  assign omnibusprice_market = omnibus_metafields[market_price_key]

  assign omnibusdate = omnibus_metafields.date
  assign omnibusdate_market = omnibus_metafields[market_date_key]

  if omnibusprice_market
    assign omnibusprice = omnibusprice_market.value.amount | times: 100
  else
    assign omnibusprice = omnibusprice.value
  endif

  if omnibusdate_market
    assign omnibusdate = omnibusdate_market
  endif

  assign show_block = true
  if omnibusprice == null or omnibusprice == 0
    assign show_block = false
  endif

  # If you want to display the widget only if the product is on sale and showing a reference value
  # if selected_product.compare_at_price == null or selected_product.compare_at_price <= selected_product.price
  #   assign show_block = false
  # endif

  # if selected_product.compare_at_price == selected_product.price
  #   assign show_block = false
  # endif
%}

{% if show_block %}
 <div id="sniffie-omnibus-price">
  <span>
    <span class="omnibus-price__label">{{ label }}</span>
    <span class="omnibus-price__price">{{ omnibusprice | money_with_currency }}</span>
    
    {% 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="omnibus-price__change">
          ({% if diff > 0 %}{% else %}+{% endif -%}
          {{- percentage }}%)
        </span>
      {% endif %}
    {% endif %}

    {% if show_date == true %}
      {% if omnibusdate %}
        <span class="omnibus-price__date"> ({{ omnibusdate | date: date_format }}) </span>
      {% endif %}
    {% endif %}

  </span>
</div>
{% endif %}

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