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&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
- 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
- Profile Page
- Order Page
Step 8. Add memberr blocks to Customer Checkout (only Shopify plus)
-> add screenshot of elements + description of all settings