Note: these instructions apply mostly to Shopify online store 2.0. If you have an older or custom theme, you will need to edit the template code to show Omnibus price information. For information on adding the lowest price information by editing the template code, check out How to add lowest price information to your storefront without extension [technical]

Note 2: the information displayed by the extension will not automatically update when the chosen variant changes on the product page. If your variants have different prices, be sure to check instructions on how to make lowest price information update dynamically when variants change.

Since the lowest price and price history information is stored in your products' metafields, the data is accessible in the storefront as well.

To show the lowest price information in your storefront you must modify your theme.

In the Shopify admin interface, navigate to Sales channels -> Online store -> Themes and then click on Customize

To edit the product page, choose Products from the dropdown at the top of the page

In the left sidebar, you will see the various sections of the product page. Say that we would like to add the lowest price underneath the product's price, then we need to click add block in the Product information section. Below APPS, you will find our theme extension Omnibus Price.

The block can then be dragged to its desired position

Clicking on the block opens configuration details for how and what data is displayed. Here you can change the label and date formatting, choose which price field to display, and configure the block to be hidden when a product is not discounted.

Image: Block settings

That's it! Just save and your product pages now include the last lowest price information.

[Technical]: Change omnibus price info dynamically when variant changes

In most templates, product price updates dynamically when variant option is changed. However, the omnibus price information will not automatically update dynamically without a page reload.

To address this you will need to modify the javascript code of your template.

NOTE: These instructions apply directly to the Dawn 5.0 template. File and function names might differ in your template. However, the basic idea works in most templates.

In Theme editor, go to edit code and open the file assets/global.js.

In the file's source, search for the function renderProductInfo which is triggered when the variant is changed dynamically. Insert the following lines within the fetch response function:

var destination_omnibus_price_block = document.querySelector('#sniffie-omnibus-price');
var 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;
}

Here's the full function for your reference:

renderProductInfo() {    
fetch(`${this.dataset.url}?variant=${this.currentVariant.id}&section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`)      .then((response) => response.text())      
.then((responseText) => {        
const html = new DOMParser().parseFromString(responseText, 'text/html')        
const destination = document.getElementById(`price-${this.dataset.section}`);
const source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`);       
 if (source && destination) destination.innerHTML = source.innerHTML;
var destination_omnibus_price_block = document.querySelector('#sniffie-omnibus-price');
var 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;                
var price = document.getElementById(`price-${this.dataset.section}`);        if (price) price.classList.remove('visibility-hidden');        this.toggleAddButton(!this.currentVariant.available, window.variantStrings.soldOut);      });  }

Then save the file and refresh your storefront to see the dynamic update in action!

In some templates, the variants' data is loaded on initial page load. A straightforward method of implementing dynamic updates is copying the logic from the aforementioned example:

Search for a function that fires when variant is changed (something like updateProductDetails, variantChange, etc
Fetch new product data and replace the old omnibus section with the fetched data. Here's an example of code to add to the update function.

try {
  const sectionId = section.parentElement.id.replace("shopify-section-", "")
  var searchParams = new URLSearchParams({ variant: variant.id, section_id: sectionId });
        
  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(err)
}

You may need to edit variable names such as section and variant to match the one used in your theme.