How to Add Lowest Price Information to Your Storefront

To get started, navigate to Storefront => Themes in your BigCommerce admin panel. Find the theme that you want to modify and select Advanced => Edit Theme Files. If you do not see the option Edit Theme Files you first need create a copy of the theme by selecting Make a Copy. The option for editing files should be available on the newly created copy.

1. Add the query for fetching metafields with the lowest prior price

In the theme file editor, open the file templates/pages/product.html from the sidebar. Add the following snippet just before the second "---":

gql: "query productById($productId: Int!) {
 site {
   product(entityId: $productId) {
   id
   sku
     variants(first: 50) {
       edges {
         node {
           sku
           metafields(namespace: \"sniffie_omnibus\", keys: [\"price\"]) {
            edges {
              node {
                id
                key
                value 
              }
            }
          }
         }
       }
     }
   }
 }
}"

You can choose between including discount codes / coupons in the lowest prior price by replacing

keys: [\"price\"]

with

keys: [\"priceWithCoupons\"]

Next, look for the component that renders the product details. In our example, Cornerstone theme, the component is components/products/product-view.

We inject the current currency by replacing

{{> components/products/product-view }}

with

{{> components/products/product-view active_currency_code=currency_selector.active_currency_code }}

Your product.html file should now look like this:

2. Display the metafield value on the product page

Navigate to the component where product info such as price is rendered. In the previous step we identified components/products/product-view.html. Open the component file and find a suitable spot for inserting the lowest prior price. This is usually right after the product's price. The in Cornerstone theme there is a separate component components/products/price used to render the price. We add the lowest prior price by adding the lowest prior price component injected by our app:

<div id="sniffie-omnibus-price">
 {{assignVar "omnibusPrice" 0}}
 {{assignVar "priceInSelectedCurrency" product.price.without_tax.value}}
 {{assignVar "currencyCode" active_currency_code}}
 Lowest prior price:
 {{#each gql.data.site.product.variants.edges as |variant|}}
 {{#each variant.node.metafields.edges as |metafield|}}
 {{#JSONparse metafield.node.value}}
 {{#if (getVar "omnibusPrice")}}
<!-- -->
 {{else}}
 {{assignVar "omnibusPrice" (round (multiply (divide this.amount variant.node.prices.price.value) (getVar
 "priceInSelectedCurrency")))}}
 {{#eq variant.node.prices.price.value (getVar "priceInSelectedCurrency")}}
 <span data-product-omnibus-price>{{money (getVar "omnibusPrice")}}</span>
 {{else}}
 <span data-product-omnibus-price>{{ getVar "omnibusPrice"}}{{getVar "currencyCode" }}</span>
<!-- <span data-product-omnibus-price>{{ strReplace (money (getVar "omnibusPrice") 0 "," ".") "€" (getVar "currencyCode") }}</span> -->
 {{/eq}}
 {{/if}}
 {{/JSONparse}}
 {{/each}}
 {{/each}}
 </div>

Edit the label Lowest prior price: to suite your preferences.

That's it! The lowest prior price is now displayed on all product pages when a product is discounted. If you do not immediately see the results it might be due cache or that our app's calculations have not yet finished.