Display Cashback Earned on PDPs

This is an advanced theme customization meant for developers that not is supported by the Inveterate team. You should ensure you have the appropriate development resources to implement before proceeding.

Functionality can vary theme-by-theme and some small adjustments may be required

This tutorial helps you display a message indicating the amount of cashback earned per item - for programs using the Credits for Orders benefit - on your product pages. The amount is automatically calculated based on the product price and a fixed cashback percentage (e.g., 5%).

Cashback Code Snippet

This implementation assumes that all variants of the product are the same price. If you have variants that are priced differently & need your cashback value to update dynamically based on variant selection - please skip to the "Alternative Implementation for Products with Differently Priced Variants" section of this page.

Paste this snippet into a Custom Liquid block or product template file:

{%- comment -%}
  Set your cashback percentage here.
  0.05 represents 5% cashback. Change this value to adjust the rate:
  e.g., 0.1 for 10%, 0.2 for 20%, etc.
  All styling (font color, weight, size, etc are all placeholders that can be changed to suit your specific needs.
{%- endcomment -%}
{%- assign cashback_percent = 0.05 -%}
{%- assign cashback_per_unit = product.price | times: cashback_percent -%}
{%- assign formatted_cashback = cashback_per_unit | money -%}

<p class="cashback-earned" style="color: #008060; font-weight: bold; font-size: 1.1em; margin-top: 10px;">
  Members earn {{ formatted_cashback }} in cashback per item
</p>

Option 1: Add via Theme Editor (Custom Liquid Block)

Use this method if your theme supports Online Store 2.0.

Steps:

  1. Go to Online Store > Themes > Customize

  2. Open a product page template from the top dropdown

  3. Click Add block → Custom Liquid

  4. Paste the Cashback Code Snippet

  5. Save your changes

  6. Optionally reposition the block to your desired location

Option 2: Insert Directly in Theme Code

Use this method if you want to modify the product template file directly.

Steps:

  1. Go to Online Store > Themes > Actions > Edit Code

  2. Open one of:

    • sections/main-product.liquid

    • sections/product-template.liquid

    • templates/product.liquid

  3. Find the spot where the price is rendered

  4. Paste the Cashback Code Snippet just below that section

  5. Save and preview the product page

Adjusting the Cashback Percentage

To change the cashback percentage, update this line:

{% assign cashback_percent = 0.05 %}

Examples:

Cashback %
Value to Use

5%

0.05

10%

0.10

15%

0.15

20%

0.20

The money Liquid filter automatically formats the cashback in your store’s currency and locale.

Once completed, your result should appear on your product page where you've chosen to place it, similar to this:

Alternative Implementation for Products with Differently Priced Variants

This implementation is specifically geared towards merchants who have multiple variants with different price points. It includes Javascript to ensure that when the differently priced variants are selected, the cashback value is updated accordingly.

Paste this snippet into a Custom Liquid block or product template file:

{%- comment -%}
  Set your cashback percentage here.
  0.05 represents 5% cashback. Change this value to adjust the rate:
  e.g., 0.1 for 10%, 0.2 for 20%, etc.
  All styling (font color, weight, size, etc are all placeholders that can be changed to suit your specific needs.
{%- endcomment -%}
{%- assign cashback_percent = 0.05 -%}

<p id="cashback-display"
   data-cashback-percent="{{ cashback_percent }}"
   style="color: #008060; font-weight: bold; font-size: 1.1em; margin-top: 10px;">
  Members earn <span id="cashback-value">—</span> in cashback per item
</p>

Option 1: Add via Theme Editor (Custom Liquid Block)

Use this method if your theme supports Online Store 2.0.

Steps:

  1. Go to Online Store > Themes > Customize

  2. Open a product page template from the top dropdown

  3. Click Add block → Custom Liquid

  4. Paste the Cashback Code Snippet

  5. Save your changes

  6. Optionally reposition the block to your desired location

Option 2: Insert Directly in Theme Code

Use this method if you want to modify the product template file directly.

Steps:

  1. Go to Online Store > Themes > Actions > Edit Code

  2. Open one of:

    • sections/main-product.liquid

    • sections/product-template.liquid

    • templates/product.liquid

  3. Find the spot where the price is rendered

  4. Paste the Cashback Code Snippet just below that section

  5. Save.

Next, paste this Javascript into your theme.liquid just before the closing </body> tag, and save:

<script>
  document.addEventListener('DOMContentLoaded', function () {
    var cashbackDisplay = document.getElementById('cashback-display');
    var cashbackValueEl = document.getElementById('cashback-value');
    if (!cashbackDisplay || !cashbackValueEl) return;

    var cashbackPercent = parseFloat(cashbackDisplay.dataset.cashbackPercent);
    
    // Fallback selector: tries data-product-price first, then .price
    var priceSelector = '[data-product-price], .price';

    function formatMoney(amount, currencyCode) {
      return amount.toLocaleString(undefined, {
        style: 'currency',
        currency: currencyCode
      });
    }

    function parsePriceFromText(text) {
      var cleaned = text.replace(/[^\d.,]/g, '').replace(',', '.');
      var value = parseFloat(cleaned);
      return isNaN(value) ? null : Math.round(value * 100); // cents
    }

    function updateCashback(priceEl) {
      if (!priceEl) return;

      var priceText = priceEl.textContent;
      var priceInCents = parsePriceFromText(priceText);
      if (priceInCents === null) return;

      var cashbackCents = priceInCents * cashbackPercent;
      cashbackValueEl.textContent = formatMoney(cashbackCents / 100, '{{ shop.currency }}');
    }

    var currentObservedEl = null;
    var observer = new MutationObserver(() => {
      updateCashback(currentObservedEl);
    });

    function monitorPriceElement() {
      var priceEl = document.querySelector(priceSelector);
      if (!priceEl || priceEl === currentObservedEl) return;

      currentObservedEl = priceEl;
      updateCashback(priceEl);
      observer.disconnect();
      observer.observe(priceEl, {
        childList: true,
        characterData: true,
        subtree: true
      });
    }

    // Start polling for price element
    monitorPriceElement();
    var checkInterval = setInterval(monitorPriceElement, 300);
  });
</script>

Now, visit one of your product pages with differently priced variants, and test to ensure that when selected, the cashback value updates dynamically as expected.

Optional Add-On: Membership CTA (for both implementations)

To clarify that cashback store credit is a member benefit & to encourage sign-ups, you can add this below the main message to link customers to your Membership landing page:

<p style="font-size: 0.85em; color: #777;"> {%- comment -%} font size, color, verbiage & URL are all placeholders that can be updated to suit your needs {%- endcomment -%}
  Cashback is available to members after purchase. <a href="/community/membership" style="color: #008060;">Learn more</a>
</p>
PreviousAdd Member Only Pricing to PDPsNextMembership Cart Drawer Upsell with Dynamically Calculated Cashback: Implementation Guide

Last updated

Was this helpful?