Add Member Only Pricing to 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 guide shows you how to display a "Member Price" - for programs that leverage the Member Only Pricing benefit - on your product pages using Liquid. The member price is a discounted version of your standard price (e.g., 20% off), visible to all visitors.

This tutorial assumes you offer Member Only Pricing on all products. If you offer it on select products only, ensure that you only implement this on a product template that is specific to the products for which you offer Member Only Pricing.

Liquid Code to Output Member Price

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 wherever you want the Member Price to appear. Comments are included for clarity and customization:

<div class="member-price-block">
  {%- comment -%}
    Calculate the member price by multiplying the product's base price by a discount factor.
    The '0.8' multiplier represents 20% off (e.g., 0.8 * $100 = $80).
    IMPORTANT: This is a placeholder ā€” replace 0.8 with the appropriate value for your discount.
    For example, use 0.75 for 25% off, 0.7 for 30% off, etc.
  {%- endcomment -%}
  {% assign member_price = product.price | times: 0.8 | money %}

  {%- comment -%}
    Output the formatted member price. You can style this to match your theme.
  {%- endcomment -%}
  <p class="member-price" style="color: #008060; font-weight: bold;">
    Member Price: {{ member_price }}
  </p>
</div>

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

This method is ideal if your theme supports Online Store 2.0, which allows block-based customization.

Steps:

  1. Go to your Shopify admin: Online Store > Themes > Customize

  2. Navigate to a product page template (use the dropdown at the top).

  3. In the left sidebar, find your main Product Information section.

  4. Click ā€œAdd blockā€ ā†’ Select ā€œCustom Liquidā€

  5. Paste the Member Price code into the Liquid block editor.

  6. Click Save.

You can drag the block to reorder it if needed.

Option 2: Edit the Product Template in Code

If you want more control or your theme does not support blocks, insert the code directly into your product template file.

Steps:

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

  2. Open the relevant template or section file. Common paths include:

    • templates/product.liquid

    • sections/main-product.liquid

    • sections/product-template.liquid

  3. Find the area near the default price output and paste the Liquid code provided.

  4. Save your changes and preview the product page.

How the Liquid Math Works

  • product.price returns the product's price in cents (e.g., $100 = 10000).

  • The | times: 0.8 filter multiplies that number by 0.8 (i.e., applies a 20% discount).

  • The | money filter converts the result back into a formatted currency string based on your storeā€™s settings.

Adjusting the Discount

Change this line in the code:

{% assign member_price = product.price | times: 0.8 | money %}

To set a different discount, replace 0.8 with one of the following:

Discount Amount
Multiplier

10% off

0.9

20% off

0.8

25% off

0.75

30% off

0.7

50% off

0.5

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 Member Price value is updated accordingly.

Paste this into a Custom Liquid block or product template:

{% comment %}
  Set your member discount here.
  0.20 represents a 20% discount. Change this to your desired discount rate:
  e.g., 0.25 for 25% off, 0.10 for 10% off, etc.
  All styles (font color, weight, size, etc) are all placeholders that can be adjusted to meet your specific needs.
{% endcomment %}
{% assign member_discount = 0.20 %}

<p id="member-price-display"
   data-member-discount="{{ member_discount }}"
   style="color: #008060; font-weight: bold; font-size: 1.1em; margin-top: 10px;">
  Member Price: <span id="member-price-value">ā€”</span>
</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 Member Pricing Code Snippet

  5. Save your changes

  6. Optionally reposition the block to your desired location

Option 2: Insert Directly into 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 Member Pricing 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 priceSelector = '[data-product-price], .price';
    var memberPriceDisplay = document.getElementById('member-price-display');
    var memberPriceValue = document.getElementById('member-price-value');

    if (!memberPriceDisplay || !memberPriceValue) return;

    var memberDiscount = parseFloat(memberPriceDisplay.dataset.memberDiscount);

    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 updateMemberPrice(priceEl) {
      if (!priceEl) return;

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

      var discountedCents = priceInCents * (1 - memberDiscount);
      memberPriceValue.textContent = formatMoney(discountedCents / 100, '{{ shop.currency }}');
    }

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

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

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

    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 Member Price value updates dynamically as expected.

Optional Add-On: Membership CTA (both implementations)

<p class="member-note" style="font-size: 0.9em; color: #555;"> {%- comment -%} Verbiage, text styling & landing page URL are placeholders - replace them as needed {%- endcomment -%}
  Available for members. <a href="/community/membership" style="color: #008060;">Learn more</a>
</p>
PreviousGifting Memberships with GivyNextDisplay Cashback Earned on PDPs

Last updated

Was this helpful?