memberr Cashback: Display on Product Page
To increase your programs chance of success, it is important to display the Cashback amount on your product pages. This will allow customers to see the value of the Cashback and make informed decisions about which products to purchase.
To add a notification to your product pages, open the product page in your store editor and drag the memberr Cashback component onto the selected page.
Custom liquid code
Alternatively, you can use the custom liquid code below to display the Cashback amount and your Store Credits name on your product pages by directly editing the product page in your theme code editor.
Show Code
_73{% comment %} Get Cashback program {% endcomment %}_73{%- assign cashback_program = shop.metaobjects['app--60169453569--cashback_program'].v2 -%}_73_73{% comment %} Check if cashback program is enabled {% endcomment %}_73{%- if cashback_program.is_active -%}_73 {% comment %} Divisor has to be a float to get a decimal {% endcomment %}_73 {%- assign cashback_rate = cashback_program.cashback_percentage | divided_by: 100.0 -%}_73{%- else -%}_73 {%- assign cashback_rate = 0 -%}_73{%- endif -%}_73_73{% comment %} Check if customer is logged in and has active membership {% endcomment %}_73{%- assign active_membership_id = customer.metafields['memberr-v1'].active_membership.value.membership_id -%}_73{%- if active_membership_id -%}_73 {%- assign memberships = shop.metafields['memberr-v1'].memberships.value -%}_73 {%- assign active_membership = memberships | where: 'id', active_membership_id | first -%}_73{%- endif -%}_73_73{% comment %} Check if there is a cashback override for the active membership {% endcomment %}_73{%- if active_membership.benefit_cashback_override.is_active -%}_73 {%- assign cashback_rate = active_membership.benefit_cashback_override.cashback_percentage_73 | divided_by: 100.0_73 -%}_73{%- endif -%}_73_73{% comment %} If no cashback_rate is set, we check if the them is in design mode and set the cashback rate to 5% {% endcomment %}_73{%- if cashback_rate == 0 -%}_73 {%- if request.design_mode -%}_73 {%- assign cashback_rate = 5.0 | divided_by: 100.0 -%}_73 {%- endif -%}_73{%- endif -%}_73_73_73_73{% comment %} Now we render the cashback amount if the rate is > 0 {% endcomment %}_73{%- if cashback_rate > 0 -%}_73 {%- assign cashback_amount = product.selected_or_first_available_variant.price_73 | times: cashback_rate_73 | money_73 -%}_73 _73 {%- assign store_credit_name = shop.metafields['memberr-v1'].settings.value.store_credit_name_73 | default: 'Store Credit'_73 -%}_73{%- endif -%}_73_73<div class='memberr-cashback-wrapper'>_73 <p class='memberr-cashback-label'>_73 <span class='memberr-cashback-label-text'>_73 You will receive {{ cashback_rate | times: 100 }}% when purchasing this item._73 <br />_73 You will receive {{ cashback_amount }} {{ store_credit_name }} when purchasing this item._73 </span>_73 </p>_73</div>_73_73<style>_73 .memberr-cashback-wrapper {_73 margin: 15px 0;_73 }_73_73 .memberr-cashback-label {_73 display: flex;_73 align-items: center;_73 gap: 4px;_73 font-size: 14px;_73 color: #333;_73 }_73_73 .memberr-cashback-label-text {_73_73 }_73</style>
Custom Dynamic Cashback Calculation
Great for bundles and other product pages with dynamic pricing.
The example below listens for changes in the product price by monitoring the biscuits-bundle-form__total element.
Show Code
_176{% comment %} Get Cashback program {% endcomment %}_176{%- assign cashback_program = shop.metaobjects['app--60169453569--cashback_program'].v2 -%}_176_176{% comment %} Check if cashback program is enabled {% endcomment %}_176{%- if cashback_program.is_active -%}_176 {% comment %} Divisor has to be a float to get a decimal {% endcomment %}_176 {%- assign cashback_rate = cashback_program.cashback_percentage | divided_by: 100.0 -%}_176{%- else -%}_176 {%- assign cashback_rate = 0 -%}_176{%- endif -%}_176_176{% comment %} Check if customer is logged in and has active membership {% endcomment %}_176{%- assign active_membership_id = customer.metafields['memberr-v1'].active_membership.value.membership_id -%}_176{%- if active_membership_id -%}_176 {%- assign memberships = shop.metafields['memberr-v1'].memberships.value -%}_176 {%- assign active_membership = memberships | where: 'id', active_membership_id | first -%}_176{%- endif -%}_176_176{% comment %} Check if there is a cashback override for the active membership {% endcomment %}_176{%- if active_membership.benefit_cashback_override.is_active -%}_176 {%- assign cashback_rate = active_membership.benefit_cashback_override.cashback_percentage_176 | divided_by: 100.0_176 -%}_176{%- endif -%}_176_176{% comment %} If no cashback_rate is set, we check if the theme is in design mode and set the cashback rate to 5% {% endcomment %}_176{%- if cashback_rate == 0 -%}_176 {%- if request.design_mode -%}_176 {%- assign cashback_rate = 5.0 | divided_by: 100.0 -%}_176 {%- endif -%}_176{%- endif -%}_176_176_176_176{% comment %} Now we render the cashback amount if the rate is > 0 {% endcomment %}_176{%- if cashback_rate > 0 -%}_176 {%- assign cashback_amount = product.selected_or_first_available_variant.price_176 | times: cashback_rate_176 | money_176 -%}_176 _176 {%- assign store_credit_name = shop.metafields['memberr-v1'].settings.value.store_credit_name_176 | default: 'Store Credit'_176 -%}_176{%- endif -%}_176_176<div class='memberr-cashback-wrapper'>_176 <p class='memberr-cashback-label'>_176 <span class='memberr-cashback-l label-text'>_176 Du erhältst <span class="memberr-cashback-amount">{{ cashback_amount }}</span> {{ store_credit_name }} beim Kauf dieses Artikels._176 </span>_176 </p>_176</div>_176_176<style>_176 .memberr-cashback-wrapper {_176 margin: 15px 0;_176 border: 1px solid;_176 border-color: #002d40;_176 border-radius: 5px;_176 font-size:15px;_176 padding:7px;_176 }_176_176 .memberr-cashback-label {_176 display: flex;_176 align-items: center;_176 gap: 4px;_176 font-size: 14px;_176 color: #333;_176 }_176</style>_176_176<script>_176 console.log('memberr: memberr-bundle-cashback.liquid loaded');_176_176 // Store the cashback rate for recalculation_176 const cashbackRate = {{ cashback_rate }};_176 const storeCreditName = '{{ store_credit_name }}';_176 _176 // Function to recalculate cashback amount_176 function recalculateCashback() {_176 console.log('Memberr: recalculateCashback called with rate:', cashbackRate);_176 _176 if (cashbackRate <= 0) {_176 console.log('Memberr: Cashback rate is 0 or less, skipping calculation');_176 return;_176 }_176 _176 // Get the current product price with more selector options_176 const priceElement = document.querySelector('.biscuits-bundle-form__total');_176 _176 if (!priceElement) {_176 console.warn('Memberr: Could not find product price element for cashback calculation');_176 return;_176 }_176 _176 console.log('Memberr: Found price element:', priceElement);_176 _176 // Extract price value (remove currency symbols and convert to number)_176 const priceText = priceElement.textContent || priceElement.innerText;_176 console.log('Memberr: Price text:', priceText);_176 _176 const price = parseFloat(priceText.replace(/[^\d.,]/g, '').replace(',', '.'));_176 _176 if (isNaN(price)) {_176 console.warn('Memberr: Could not parse product price for cashback calculation, price text was:', priceText);_176 return;_176 }_176 _176 console.log('Memberr: Parsed price:', price);_176 _176 // Calculate new cashback amount_176 const cashbackAmount = price * cashbackRate;_176 console.log('Memberr: Calculated cashback amount:', cashbackAmount);_176 _176 // Format the cashback amount_176 const formattedCashback = new Intl.NumberFormat('de-DE', {_176 style: 'currency',_176 currency: 'EUR'_176 }).format(cashbackAmount);_176 _176 console.log('Memberr: Formatted cashback:', formattedCashback);_176 _176 // Update the cashback amount display_176 const cashbackAmountElement = document.querySelector('.memberr-cashback-amount');_176 if (cashbackAmountElement) {_176 cashbackAmountElement.textContent = formattedCashback;_176 console.log('Memberr: Updated cashback display element');_176 } else {_176 console.warn('Memberr: Could not find cashback amount element to update');_176 }_176 }_176_176 // Function to setup MutationObserver to monitor biscuits-bundle-form__total_176 function setupTotalMonitor() {_176 console.log('Memberr: Setting up MutationObserver for biscuits-bundle-form__total');_176 _176 const totalElement = document.querySelector('.biscuits-bundle-form__total');_176 _176 if (!totalElement) {_176 console.warn('Memberr: Could not find biscuits-bundle-form__total element, will retry later');_176 // Retry after a short delay in case the element hasn't loaded yet_176 setTimeout(setupTotalMonitor, 500);_176 return;_176 }_176 _176 console.log('Memberr: Found biscuits-bundle-form__total element:', totalElement);_176 _176 // Create a MutationObserver to watch for changes_176 const observer = new MutationObserver(function(mutations) {_176 console.log('Memberr: biscuits-bundle-form__total changed, recalculating cashback');_176 console.log('Memberr: Mutations:', mutations);_176 recalculateCashback();_176 });_176 _176 // Start observing the total element for changes_176 observer.observe(totalElement, {_176 childList: true, // Watch for changes to child elements_176 subtree: true, // Watch the entire subtree_176 characterData: true, // Watch for text changes_176 attributes: true // Watch for attribute changes_176 });_176 _176 console.log('Memberr: MutationObserver set up successfully');_176 _176 // Also trigger initial calculation_176 recalculateCashback();_176 }_176_176 // Wait for DOM to be ready before setting up the monitor_176 window.addEventListener('DOMContentLoaded', () => {_176 console.log('Memberr: DOM loaded, setting up total monitor');_176 setupTotalMonitor();_176 });_176</script>