Home

Shopify Metafields & Metaobjects Overview

Step 1. Activate App memberr App Embeds in Store Editor. Dont forget to hit save.

Step 2. Find out if your shop is Shopify Plus or not

Step 2. Activate Store Credit in memberr App - do not forget this!

Step 2. Create a customer account and login

Step 3. Send yourself some Store Credit

Step 4. Add Cashback element to all product pages

  • update the styles of the cashback component by targeting the memberr relateted classes

_12
<div class="memberr-cashback-wrapper">
_12
<p class="memberr-cashback-label">
_12
<img
_12
class="memberr-cashback-icon"
_12
src="//cdn.shopify.com/s/files/1/0335/0908/1133/files/cashback-icon_black.svg?v=1740740631&amp;width=46"
_12
style="display: inline-block; width: 46px; height: auto; vertical-align: middle;"
_12
>
_12
<span class="memberr-cashback-label-text">
_12
Du erhältst 0,25 € Store Credit beim Kauf dieses Artikels.
_12
</span>
_12
</p>
_12
</div>

Advanced: memberr provides a cashback icon: -> here screenshot of icon select field

Step 5. Add Cashback display element to Cart Drawer


_10
<p>
_10
You will receive <memberr-cart-cashback-amount></memberr-cart-cashback-amount> <memberr-store-credit-name></memberr-store-credit-name> for this purchase.
_10
</p>

Step 6. Create a new Snippet


_32
<style>
_32
.memberr-sc-toggle-wrapper {
_32
display: flex;
_32
align-items: center;
_32
justify-content: space-between;
_32
}
_32
</style>
_32
_32
<memberr-if-has-store-credit style="width: 100%;">
_32
<div class="memberr-sc-toggle-wrapper">
_32
<span>
_32
<memberr-current-store-credit-balance></memberr-current-store-credit-balance>
_32
<memberr-store-credit-name></memberr-store-credit-name> anwenden
_32
</span>
_32
<memberr-store-credit-toggle
_32
active-color="#000000"
_32
height="24"
_32
width="48"
_32
initial-state="{% if cart.attributes.memberr_apply_store_credit == 'Yes' %}true{% else %}false{% endif %}"
_32
style="height: 24px;"
_32
></memberr-store-credit-toggle>
_32
</div>
_32
</memberr-if-has-store-credit>
_32
_32
<script>
_32
document.addEventListener('memberr-toggle:change', () => {
_32
/* handle your cart refresh here */
_32
//document.dispatchEvent(new CustomEvent("cart:refresh")); // this is different for every theme
_32
}, {
_32
bubbles: true
_32
});
_32
</script>

Step 5. Add Store Credit Toggle to Cart Drawer

Step 5. Add Store Credit Toggle to Cart Page

Step 6. Add Store Credit Toggle to Checkout

6.1 Download the theme file

  • lorem

6.2 Host the theme locally

  • lorem

6.3 Finde the file that is responsible for your themes cart drawer


_10
<div style="display: flex; align-items: center;justify-content: space-between; color: #000000; widht:100%">

  • use this line to adjust the design of the switch to your liking

Step 7. Add Customer Account block (drag-n-drop)

Step 7.1 Legacy Customer Account

  1. Accounts Page

Step 7.2 New Customer Account

Step 7.2.1 Duplicate checkout (optional)

TODO: add a table view and graphic with all classNames TODO: Screenshots of all settings TODO: Example usage of memberr class selectors

  1. Profile Page
  2. Order Page

Step 8. Add memberr blocks to Customer Checkout (only Shopify plus)

-> add screenshot of elements + description of all settings

Step 9. Create a dedicated landing page