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
_171{% comment %} Get Cashback program {% endcomment %}_171{%- assign cashback_program = shop.metaobjects['app--60169453569--cashback_program'].v2 -%}_171_171{% comment %} Check if cashback program is enabled {% endcomment %}_171{%- if cashback_program.is_active -%}_171 {% comment %} Divisor has to be a float to get a decimal {% endcomment %}_171 {%- assign cashback_rate = cashback_program.cashback_percentage | divided_by: 100.0 -%}_171{%- else -%}_171 {%- assign cashback_rate = 0 -%}_171{%- endif -%}_171_171{% comment %} Check if customer is logged in and has active membership {% endcomment %}_171{%- assign active_membership_id = customer.metafields['memberr-v1'].active_membership.value.membership_id -%}_171{%- if active_membership_id -%}_171 {%- assign memberships = shop.metafields['memberr-v1'].memberships.value -%}_171 {%- assign active_membership = memberships | where: 'id', active_membership_id | first -%}_171{%- endif -%}_171_171{% comment %} Check if there is a cashback override for the active membership {% endcomment %}_171{%- if active_membership.benefit_cashback_override.is_active -%}_171 {%- assign cashback_rate = active_membership.benefit_cashback_override.cashback_percentage_171 | divided_by: 100.0_171 -%}_171{%- endif -%}_171_171{% comment %} If no cashback_rate is set, we check if the theme is in design mode and set the cashback rate to 5% {% endcomment %}_171{%- if cashback_rate == 0 -%}_171 {%- if request.design_mode -%}_171 {%- assign cashback_rate = 5.0 | divided_by: 100.0 -%}_171 {%- endif -%}_171{%- endif -%}_171_171_171_171{% comment %} Now we render the cashback amount if the rate is > 0 {% endcomment %}_171{%- if cashback_rate > 0 -%}_171 {%- assign cashback_amount = product.selected_or_first_available_variant.price_171 | times: cashback_rate_171 | money_171 -%}_171 _171 {%- assign store_credit_name = shop.metafields['memberr-v1'].settings.value.store_credit_name_171 | default: 'Store Credit'_171 -%}_171{%- endif -%}_171_171<div class='memberr-cashback-wrapper'>_171 <p class='memberr-cashback-label'>_171 <span class='memberr-cashback-l label-text'>_171 Du erhältst <span class="memberr-cashback-amount">{{ cashback_amount }}</span> {{ store_credit_name }} beim Kauf dieses Artikels._171 </span>_171 </p>_171</div>_171_171<style>_171 .memberr-cashback-wrapper {_171 margin: 15px 0;_171 }_171_171 .memberr-cashback-label {_171 display: flex;_171 align-items: center;_171 gap: 4px;_171 font-size: 14px;_171 color: #333;_171 }_171</style>_171_171<script>_171 console.log('memberr: memberr-bundle-cashback.liquid loaded');_171_171 // Store the cashback rate for recalculation_171 const cashbackRate = {{ cashback_rate }};_171 const storeCreditName = '{{ store_credit_name }}';_171 _171 // Function to recalculate cashback amount_171 function recalculateCashback() {_171 console.log('Memberr: recalculateCashback called with rate:', cashbackRate);_171 _171 if (cashbackRate <= 0) {_171 console.log('Memberr: Cashback rate is 0 or less, skipping calculation');_171 return;_171 }_171 _171 // Get the current product price with more selector options_171 const priceElement = document.querySelector('.biscuits-bundle-form__total');_171 _171 if (!priceElement) {_171 console.warn('Memberr: Could not find product price element for cashback calculation');_171 return;_171 }_171 _171 console.log('Memberr: Found price element:', priceElement);_171 _171 // Extract price value (remove currency symbols and convert to number)_171 const priceText = priceElement.textContent || priceElement.innerText;_171 console.log('Memberr: Price text:', priceText);_171 _171 const price = parseFloat(priceText.replace(/[^\d.,]/g, '').replace(',', '.'));_171 _171 if (isNaN(price)) {_171 console.warn('Memberr: Could not parse product price for cashback calculation, price text was:', priceText);_171 return;_171 }_171 _171 console.log('Memberr: Parsed price:', price);_171 _171 // Calculate new cashback amount_171 const cashbackAmount = price * cashbackRate;_171 console.log('Memberr: Calculated cashback amount:', cashbackAmount);_171 _171 // Format the cashback amount_171 const formattedCashback = new Intl.NumberFormat('de-DE', {_171 style: 'currency',_171 currency: 'EUR'_171 }).format(cashbackAmount);_171 _171 console.log('Memberr: Formatted cashback:', formattedCashback);_171 _171 // Update the cashback amount display_171 const cashbackAmountElement = document.querySelector('.memberr-cashback-amount');_171 if (cashbackAmountElement) {_171 cashbackAmountElement.textContent = formattedCashback;_171 console.log('Memberr: Updated cashback display element');_171 } else {_171 console.warn('Memberr: Could not find cashback amount element to update');_171 }_171 }_171_171 // Function to setup MutationObserver to monitor biscuits-bundle-form__total_171 function setupTotalMonitor() {_171 console.log('Memberr: Setting up MutationObserver for biscuits-bundle-form__total');_171 _171 const totalElement = document.querySelector('.biscuits-bundle-form__total');_171 _171 if (!totalElement) {_171 console.warn('Memberr: Could not find biscuits-bundle-form__total element, will retry later');_171 // Retry after a short delay in case the element hasn't loaded yet_171 setTimeout(setupTotalMonitor, 500);_171 return;_171 }_171 _171 console.log('Memberr: Found biscuits-bundle-form__total element:', totalElement);_171 _171 // Create a MutationObserver to watch for changes_171 const observer = new MutationObserver(function(mutations) {_171 console.log('Memberr: biscuits-bundle-form__total changed, recalculating cashback');_171 console.log('Memberr: Mutations:', mutations);_171 recalculateCashback();_171 });_171 _171 // Start observing the total element for changes_171 observer.observe(totalElement, {_171 childList: true, // Watch for changes to child elements_171 subtree: true, // Watch the entire subtree_171 characterData: true, // Watch for text changes_171 attributes: true // Watch for attribute changes_171 });_171 _171 console.log('Memberr: MutationObserver set up successfully');_171 _171 // Also trigger initial calculation_171 recalculateCashback();_171 }_171_171 // Wait for DOM to be ready before setting up the monitor_171 window.addEventListener('DOMContentLoaded', () => {_171 console.log('Memberr: DOM loaded, setting up total monitor');_171 setupTotalMonitor();_171 });_171</script>