How to add the lowest price widget to the related products block when using the Omnibus Insight: Price History app?

How to add the lowest price widget to the related products block when using the Omnibus Insight: Price History app?

The steps below will help you to add the lowest price block to the related products section:

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-for-related-products' and click 'Done'.



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

<div id="am-omnibus-container-{{ product.id }}"></div>
<img alt="lowest price" width="0" height="0" style="display: none" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" onload='
(async()=>{const e="product",{shop:t,locale:o,currency:n}=window.Shopify;if(!t)return;const r="{{ product.id }}";if(void 0===window.ShopifyAnalytics)return;const i=`{{ 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,a=null;try{s=JSON.parse(i)}catch(e){console.log(e)}try{a=JSON.parse(c)}catch(e){console.log(e)}const l="{{ product.selected_or_first_available_variant.id }}",{page:p}=window.ShopifyAnalytics.meta,{pageType:u}=p;if(u===e&&r==window.ShopifyAnalytics?.meta?.product?.id)return;const d=e=>{if("object"!=typeof e)return;const t=e.settings;if(!t||"object"!=typeof t)return;const{show_lowest:n,display_only_at_discount:i,percentage_mode:c,period:s,languages:a,translations:l,css:p}=t;if(!n)return;let u=e.lowest_price;const d=e.shopCurrency,f=e.price,y=!!e.at_discount,m=e.currency,h=window.Shopify?.currency,w=h?.active;let _;if(m&&m!==d){if(!h||"object"!=typeof h)return;if(w&&m===w)_=1;else{if(!w||d!==w)return;_=h.rate,u*=_}}if("number"!=typeof u)return;if(i&&!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"===c||"positive"===c&&b||"zero_or_negative"===c&&g||0===j)&&(S=""),w&&w!==d&&_&&1!=_&&(u*=_);let A=new Intl.NumberFormat(o,{style:"currency",currency:w}).format(u);A||(A=`${u} ${w}`);let I,N,O,x=l.lowest;if(a&&a.length>0)for(const e of a)e.code&&e.code===o&&e.text&&(x=e.text);x?(x.includes("{X}")&&(x=x.replaceAll("{X}",s)),I=`<p class="caption" style="${p}">${x}: ${A}${S}</p>`):(N="The lowest price from last",O="days",I=`<p class="caption" style="${p}">The lowest price from last ${s} days: ${A}${S}</p>`);const C=`am-omnibus-container-${r}`,F=document.getElementById(C);F&&(F.innerHTML=I)},f=e=>"object"==typeof e&&Object.keys(e).length>0;if(u===e){if(l&&null!==a&&f(a))return d(a);if(null!==s&&f(s))return d(s);const e="/apps/am-omnibus-price",i=await fetch(e,{method:"POST",headers:{"Content-Type":"application/json",Accept:"application/json"},body:JSON.stringify({shop:t,productId:r,variantId:l,locale:o,currency:n})});if(!i.ok)return;const{lowestPriceHtml:c}=await i.json();if(!c)return;const p=`am-omnibus-container-${r}`,u=document.getElementById(p);if(!u)return;u.innerHTML=c}})(),this.parentNode.removeChild(this);
'/>

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



Once the snippet changes are saved, the result will render as here:


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.