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


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