Handling Missing Lowest Price Widgets in Omnibus Insight

How to display the lowest price widget on my collection pages using the Omnibus Insight: Price History app?

To make the lowest price widget by Omnibus Insight appear on the collection pages, you’ll need to insert it manually in the code of your theme. Below, we will elaborate on the steps to proceed:

1. Proceed to Online Stores > Themes and click the Customize button on your theme. Then head to the theme settings, and then click on 'Edit code'.




2. After that, in the sidebar menu under Snippets, select 'Add a new snippet'.



3. Name it 'am-lowest-price' and click 'Done'.



4. In the open window, paste the provided content and save.

<div id="am-omnibus-container-{{ product.id }}"></div>
<script>
(async()=>{const{shop:e,locale:t,currency:o}=window.Shopify;if(!e)return;const n="{{ product.id }}";if(void 0===window.ShopifyAnalytics)return;const r="{{ product.metafields['app--80349265921'].am_lowest_price.value | json }}",c="{{ product.selected_or_first_available_variant.metafields['app--80349265921'].am_lowest_price.value | json }}";let s=null,i=null;try{s=JSON.parse(r)}catch(e){console.log(e)}try{i=JSON.parse(c)}catch(e){console.log(e)}const a="{{ product.selected_or_first_available_variant.id }}",{page:l}=window.ShopifyAnalytics.meta,{pageType:p}=l,u=e=>{if("object"!=typeof e)return;const o=e.settings;if(!o||"object"!=typeof o)return;const{show_lowest:r,display_only_at_discount:c,percentage_mode:s,period:i,languages:a,translations:l,css:p}=o;if(!r)return;let u=e.lowest_price;const d=e.shopCurrency,f=e.price,y=!!e.at_discount,m=e.currency,h=window.Shopify?.currency,_=h?.active;let w;if(m&&m!==d){if(!h||"object"!=typeof h)return;if(_&&m===_)w=1;else{if(!_||d!==_)return;w=h.rate,u*=w}}if("number"!=typeof u)return;if(c&&!y)return;const b=f<u,g=f>u;let $="inherit",v="";g?(v="+",$="rgb(214, 123, 123)"):b&&(v="-",$="rgb(110, 221, 168)");let j,S,T=`color: ${$}`;0!==u?(j=100*(f/u-1),j=parseFloat(j).toFixed(2),j=Math.abs(j),S=` <span style='${T}'>(${v}${j}%)</span>`):(j=0,S=""),("dont"===s||"positive"===s&&b||"zero_or_negative"===s&&g||0===j)&&(S=""),_&&_!==d&&w&&1!=w&&(u*=w);let I=new Intl.NumberFormat(t,{style:"currency",currency:_}).format(u);I||(I=`${u} ${_}`);let O,A,N,x=l.lowest;if(a&&a.length>0)for(const e of a)e.code&&e.code===t&&e.text&&(x=e.text);x?(x.includes("{X}")&&(x=x.replaceAll("{X}",i)),O=`<p class="caption" style="${p}">${x}: ${I}${S}</p>`):(A="The lowest price from last",N="days",O=`<p class="caption" style="${p}">The lowest price from last ${i} days: ${I}${S}</p>`);const F=`am-omnibus-container-${n}`,H=document.getElementById(F);H&&(H.innerHTML=O)},d=e=>"object"==typeof e&&Object.keys(e).length>0;if(["collection","home","searchresults"].includes(p)){if(a&&null!==i&&d(i))return u(i);if(null!==s&&d(s))return u(s);const r="/apps/am-omnibus-price",c=await fetch(r,{method:"POST",headers:{"Content-Type":"application/json",Accept:"application/json"},body:JSON.stringify({shop:e,productId:n,variantId:a,locale:t,currency:o})});if(!c.ok)return;const{lowestPriceHtml:l}=await c.json();if(!l)return;const p=`am-omnibus-container-${n}`,f=document.getElementById(p);if(!f)return;f.innerHTML=l}})();
</script>

5. Locate price.liquid in the snippets, paste {%- render 'am-lowest-price', product:product -%} at the end, and save (we recommend using this snippet, since it is responsible for displaying the price).



6. The result on the front end will be as follows:




NotesSome third-party themes may use a different product variable name, which can cause the price.liquid code to not work. If you encounter this issue, try {%- render 'am-lowest-price', product:target -%} or {%- render 'am-lowest-price', product:product_ref -%}. 
If you are having difficulties to locate the required snippet or the lowest price doesn't appear on the collections page on your side, please, submit a ticket with us and we will be happy to offer further assistance.

What apps can display an EU prior-price notice both on Shopify collection cards and product pages?

Omnibus Insight allows you to display the lowest price block storewide: on product pages, collections, home page and related products block. To display the minimal price widget on the non-product pages, add it manually to your theme code.