For Shopify eCommerce Brands
Using a Shopify Online Store 2.0 compatible theme
👾 This feature is currently in Closed Beta 👾
If you'd like to join the beta, please contact our support team.
Grow referrals by surfacing customers' unique referral link directly on your Shopify online store. The Customer Referral Loyalty Block provides a branded and cohesive loyalty experience —no developer support or custom code required.
Before you get started
Before you can add your customers' loyalty status to your Shopify online store, ensure you meet the following requirements:
Shopify is enabled in Marsello > Integrations.
Your Marsello loyalty program is active.
Your Customer Portal is published (launcher can be visible or hidden).
You have permission to edit your Shopify theme.
You are using a Shopify Online Store 2.0 compatible theme.
How do I add customer referral links to my Shopify online store?
Follow the steps below to add the Customer Referral Link Loyalty Block to your Shopify online store and display each customer’s unique referral link.
📝 Note: The Customer Referral Loyalty Block can be added to almost any page of your Shopify storefront, including your home page, product pages, loyalty explainer pages, and cart.
At this time, the block is not supported on Checkout or Customer Account pages.
Using Shopify Plus? You can add the rewards block to your Checkout screen following these steps.
1. In your Shopify Admin, go to Online Store > Themes
2. Click Edit on your active theme.
3. Use the dropdown to select the page where you want the block to appear.
4. Click Add Block, and then click the Apps tab.
5. Search for Marsello.
6. Click Marsello Referral.
7. Preview, then drag and drop the block to your preferred location.
8. Click Save.
When you publish your theme, the referral block will appear on your store.
How do I customize the customer referral block?
Shopify Online Loyalty Embeds follow your Shopify theme for colors, fonts, and buttons. You can also customize each loyalty block and preview changes in real time.
1. In the editor, click on the Marsello Referral loyalty block.
2. Choose a layout.
Card | Banner |
Member View (Signed-in):
 | Member View (Signed-in):
 |
Visitor View (Not Signed-in):
 | Visitor View (Not Signed-in):
 |
Hero Variant 1 Content on left with full background | Hero Variant 2 Split layout with content on left and image on right |
Member View (Signed-in):
 | Member View (Signed-in):
|
Visitor View (Not Signed-in):
 | Visitor View (Not Signed-in):
 |
3. If using the Card or Hero layout, choose a button style for visitor view. The primary and secondary options are based on your Shopify theme settings.
4. If using a Hero layout, choose a background image and background image alignment.
💡 Optional Step: Edit the corner radius of the block.
Your customers' experience
For visitors (customers not signed in)
Visitors will be prompted to sign in or create an account to view their referral link.
For members (signed-in customers)
After signing in, Members will have a clear view of their referral link.
Where should I embed customer referral links on my storefront?
Here are a few ideas to get you started:
On a loyalty explainer page to explain benefits and grow referrals.
On the footer to embed loyalty across the shopping experience.
Want to embed more loyalty details on your online store?
Brands have also searched for: