Navigate to <https://apps.shopify.com/cartcraft-price-tracker>
Click **“Install”**.

Click **“Install”** again to confirm.

In your Shopify admin, click **“Online Store”**.

In the theme editor, click the dropdown menu at the top.

Select the product template you want to add the app to.

Your price history will now be correctly displayed and recorded. You are now legally compliant! ✅ 

Congratulations ❤️ All other steps are optional.

In the app, click **“Design Settings”**.

Select the page where you want to change the design.

Default Style for all Pages
Product
Collection
Cart
Home

Uncheck the box to enable custom styling for the page.

*Learn how to upload a custom font [here](https://scribehow.com/shared/Install_and_Configure_the_Cartcraft_Price_Tracker_App__SCZPAYEdQfOfY4w0Zd0tqQ#75352712).*

Use the color picker to choose the background color.

Change the left and right background padding.

Go to [Google Fonts](https://fonts.google.com/) and browse fonts.

Select a font, for example, **“Roboto”**.

In your Shopify admin, click **“Content”**.

Click **“Upload files”** and upload your custom font file.

Click **“Discount & Price Tracker”**.

Click **“here”** to add a custom font.

Click **“Customize Pricing”** in the app.

To hide the price for all products, select that option.

To always show the price indication, select that option.

To ignore subsequent discounts in calculations, select that option.

Change the period for the calculation if needed.

Add Individual Settings to Products of a Collection

Click **“Add a new settings rule for a collection”**.

Select a collection, for example, **“Home page”**.

For example, change the rule for when percentages are shown.

Click **“Ignore Collection settings”**.

For example, choose **“Hide the lowest price”**.

You can also change the rule for when percentages are shown.

How to Fix Issues with Product Synchronization

Click on the field **“The lowest price within the last...”**.

How to Reset Settings and Get Back to Default

Click **“Reset this translation page template”**.

How to Add the Price Indication on Other Pages

Click **“Themes”** in the app or in your Shopify admin.

Click the **”…”** icon next to your theme.

In the code editor, click **“Snippets”**.

In the **“File name”** field, paste the file name copied from the app’s home page.

Copy the code (press **Cmd+A** to select all, then **Cmd+C** to copy).

{% liquid
  assign min = 19879 
  assign max = 1987919879 
  assign diff = max | minus: min 
  assign randomNumber = "now" | date: "%N" | modulo: diff | plus: min | append: ""
%}

{% if product.gift_card? == false %}
  <div id="discount-price-tracker-{{ randomNumber }}">
  <p id="discount-price-tracker-p-{{ randomNumber }}"></p>
  </div>
{% endif %}

{% assign productInfo = product.metafields.price_indication.productInfo %}
{% assign shopData = shop.metafields.price_settings.settings %}

<script>

  if (typeof lastUrl === "undefined"){
    let lastUrl = location.href; 
    new MutationObserver(() => {
      const url = location.href;
      if (url !== lastUrl) {
        lastUrl = url;
        onUrlChange();
      }
    }).observe(document, {subtree: true, childList: true});
    }
    function onUrlChange() {
      const url = new URL(location.href);
      const new_variant=url.searchParams.get('variant');
      showPrice(new_variant);
      
    }
</script>
<script>
  function getPrice(priceObj) {
    return parseFloat(priceObj[Object.keys(priceObj)[0]]);
  }
  function applyMinimumOnPriceArray(prices) {
    return Math.min(...prices.map(getPrice)).toString();
  }
  function applyIncludeSubsequentDiscountsCalculation(
    currentPrice,
    InScopePrices
 ) {
    const lastPrice = getPrice(InScopePrices.slice(-1)[0]);
 
    if (parseFloat(currentPrice) > lastPrice) return lastPrice;
 
    for (let i = InScopePrices.length - 1; i > 0; i--) {
       if (getPrice(InScopePrices[i]) > getPrice(InScopePrices[i - 1])) {
          return getPrice(InScopePrices[i - 1]);
       }
    }
    return getPrice(InScopePrices[0]);
 }
  function calculateLowestPrice(Period, includeSubsequentDiscounts, variant) {

    const dateNow = Date.now();
    const pricesArray = variant.pricesArray.sort((a, b) => parseInt(Object.keys(a)[0]) - parseInt(Object.keys(b)[0]));
    const InScopePrices = pricesArray.filter(price => (dateNow - parseInt(Object.keys(price)[0])) / 86400000 < parseInt(Period));
    if (InScopePrices.length === 0) return 

Paste the code into the new snippet file you created.

Cartcraft

My Shopify

Google

Shopify

This guide provides a step-by-step walkthrough for installing and configuring the Cartcraft Price Tracker App. By following these instructions, you can easily implement the app in your store. The guide also covers troubleshooting and customization options to help you tailor the app to your specific needs.

First step: Install the app