Initial app setup after installation
Promptly set up the app after installation by configuring the 'Lowest price' block. Simply click 'Add lowest price block' by the instructions below or go to Online Store > Themes.
Your store's homepage will open up. At the top of the page, click on the homepage dropdown menu, then go to the Products tab and choose Default product.
Navigate to the left sidebar under 'Product information', and click on 'Add block'. Pick the Lowest Price App block from the opened list.
Note
Some themes don’t support adding new snippets or blocks. If you encounter this, there’s a workaround to bypass the restrictions. Please refer to the Troubleshooting section at the end of this guide for more details.
The newly added block will show up in the sidebar. Arrange its placement using drag-and-drop, positioning it where you want to display the 'Lowest price’ (for example, under the main product price). Upon saving, the block will be added to all products.
Once you've finished configuring the block, click 'Next' and synchronize the application with your products. Congratulations, the initial setup of the application is now complete!
Settings
Global Settings
Price display preferences - customize how prices appear to suit your needs. Decide if you want to show the lowest prices and whether you prefer to see prices for all products or just those with discounts.
Show lowest price - enable the setting to display the lowest price block on the frontend.
Note: Please note that the block will only be displayed after it has been added to templates.
Show only for discounted products - display the lowest price on products with valid discounts only.
Percentage mode - choose the behavior for the percentage display.
Options:
- Show always except zero
- Never show percentages
- Show only when positive
- Show only when negative
Duration settings - enter the number of days the application considers for the lowest prices and specify how often the data is refreshed.
Period in days - period for which the application considers the lowest price for the product.
Cleaning period in days - specify the number of days after which old price history records will be removed from the history.
Text configuration - adjust the lowest price text to your needs.
Label - adjust the text that will be displayed on the front end for customers. If the setting is empty, the default value will be displayed. The variable {X} represents the period specified in the 'Period in Days' setting.
Design Configuration - these settings allow you to tailor the appearance of the lowest price block according to your preferences or requirements. You can also review your design changes right here, ensuring a seamless and personalized look that matches your preferences or requirements.
Products
On the product grid, you can see all the products currently in the store, including their current price, lowest price, and percentage difference. Furthermore, you have the option to search for products by name.
Customize each product price settings right from the grid by clicking 'Edit' button. Customized products stand out on the grid with a 'custom configuration' label for easy recognition and management.
Price History
Within the price history, only products that have undergone price changes are showcased. You can access details about the product name, its most recent price, new price, context, and the date of the modifications.
Note: the Price history begins accumulating data only after the installation and activation of the application; any prior changes are not included.
Adding the lowest price block to non-product pages
For the lowest price block, you have the option to include it on the Home page or Category pages.
Here's how you can do it: head to the theme settings, and then click on 'Edit code'.
After that, in the sidebar menu under Snippets, select 'Add a new snippet'.
Name it 'am-lowest-price' and click 'Done'.
In the open window, paste the provided content and save.
<div id="am-omnibus-container-{{ product.id }}"></div>
<script>(async()=>{const{shop:n,locale:o,currency:t}=window.Shopify;if(!n)return;const i="{{ product.id }}";if(void 0===window.ShopifyAnalytics)return;const{page:e}=window.ShopifyAnalytics.meta,{pageType:c}=e;if("collection"===c||"home"===c){const e="/apps/am-omnibus-price",c=await fetch(e,{method:"POST",headers:{"Content-Type":"application/json",Accept:"application/json"},body:JSON.stringify({shop:n,productId:i,variantId:"{{ product.selected_or_first_available_variant.id }}",locale:o,currency:t})});if(!c.ok)return;const{lowestPriceHtml:a}=await c.json();if(!a)return;const r=`am-omnibus-container-${i}`,s=document.getElementById(r);if(!s)return;s.innerHTML=a}})();</script>
{%- render 'am-lowest-price', product:product -%} at the end, and save (we recommend using this snippet, since it is responsible for displaying the price).
Adding the lowest price to Related products block
To add lowest price block on Home or Category page, head to the theme settings, and then click on 'Edit code'.
After that, in the sidebar menu under Snippets, select 'Add a new snippet'.
Name it 'am-lowest-price-for-related-products' and click 'Done'.
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 t="product",{shop:i,locale:o,currency:n}=window.Shopify;if(!i)return;const e="{{ product.id }}";if(void 0===window.ShopifyAnalytics)return;const{page:a}=window.ShopifyAnalytics.meta,{pageType:c}=a;if((c!==t||e!=window.ShopifyAnalytics?.meta?.product?.id)&&c===t){const t="/apps/am-omnibus-price",a=await fetch(t,{method:"POST",headers:{"Content-Type":"application/json",Accept:"application/json"},body:JSON.stringify({shop:i,productId:e,variantId:"{{ product.selected_or_first_available_variant.id }}",locale:o,currency:n})});if(!a.ok)return;const{lowestPriceHtml:c}=await a.json();if(!c)return;const r=`am-omnibus-container-${e}`,s=document.getElementById(r);if(!s)return;s.innerHTML=c}})(),this.parentNode.removeChild(this);'/>
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).
Note: If you uninstall the app, it won't automatically undo the changes. You'll need to manually delete any unnecessary info or blocks.
Troubleshooting
If your theme doesn’t allow you to add the lowest price block during the initial app setup, there’s a workaround you can use to resolve this issue.
1. From Shopify Admin, go to Online store > Themes > Customize.
2. Click … > Edit code.
3. Find a folder called snippets and click Add a new snippet.
4. Name it ‘product-page-lowest-price’ and click Done.
5. Insert there the following content and Save it.
<div id="am-omnibus-container-{{ product.id }}"></div>
<script>
(async () => {
const {shop, locale, currency} = window.Shopify;
if (!shop) {
return;
}
const productId = "{{ product.id }}";
if (!productId || typeof window.ShopifyAnalytics === "undefined") {
return;
}
const selectedVariantId = "{{ product.selected_or_first_available_variant.id }}";
const {page} = window.ShopifyAnalytics.meta;
const {pageType} = page;
if (pageType === "product") {
const endpoint = `/apps/am-omnibus-price`;
const response = await fetch(endpoint, {
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "application/json"
},
body: JSON.stringify({
shop,
productId,
variantId: selectedVariantId,
locale,
currency
})
});
if (!response.ok) {
return;
}
const {lowestPriceHtml} = await response.json();
if (!lowestPriceHtml) {
return;
}
const selector = `am-omnibus-container-${productId}`;
const container = document.getElementById(selector);
if (!container) {
return;
}
container.innerHTML = lowestPriceHtml;
}
})();
</script>
6. In the left sidebar, find product-price.liquid and add the following line to the end of the code:
{%- render 'product-page-lowest-price', product:product -%}
7. Save changes.