Show Customer Referral Links on Account Pages
Seamlessly integrate referral links directly into your customer account pages to ensure a smooth and effortless sharing process, empowering your loyal customers to spread the word!
💡 Pro Tip: There are three different ways to display referral links on account pages. Choose the method that best fits your store's setup and customer account type.
Choose Your Implementation Method
Rivo offers three ways to display customer referral links on account pages:
Account Dashboard Block (Recommended) - Modern theme app extension with full customization
Account Embed Widget - Perfect for classic customer accounts with simple setup
Manual Liquid Integration - Advanced option for custom implementations
✨ Which method should I use?
• Use Account Dashboard Block if you want the most flexibility and modern design options
• Use Account Embed Widget if you have classic customer accounts and want quick setup
• Use Manual Integration only if you need custom placement or have specific technical requirements
Method 1: Account Dashboard Block (Recommended)
The Account Dashboard Block is a modern theme app extension that provides the most flexibility and customization options for displaying referral links.
Setup Instructions
From your Shopify admin, go to Online Store > Themes.
Click Customize on your active theme.
Navigate to your customer account page template.
Click Add block and select Rivo: Account Dashboard.
In the block settings, enable Referral Block Enabled.
Customize the appearance using the available styling options.
Click Save to apply your changes.
Customization Options
The Account Dashboard Block offers extensive customization:
Background Color - Set a custom background color for the referral block
Font Color - Choose the text color that matches your brand
Copy Button Styling - Customize the appearance of the copy button
Social Share Links - Enable links to email friends or view referral stats
Text Customization
You can customize all text displayed in the referral block:
From your Rivo Dashboard, go to Onsite > Account Dashboard.
Scroll to the Referral Block section.
Customize the following text fields:
Title - Main heading (default: "Refer a friend")
Subtitle - Description text
Copy Button - Button text (default: "Copy")
Share Links - HTML for additional sharing options
Click Save to apply your changes.
Method 2: Account Embed Widget
The Account Embed Widget automatically adds referral information to classic customer account pages with minimal setup required.
Setup Instructions
From your Rivo Dashboard, go to Onsite > Account Embed.
Toggle the switch to ON to enable the account embed.
Customize the default text and settings:
Loyalty Program and Rewards - Title of the account widget embed
You have points - Points balance display text
View My Rewards Account - Link text to open the widget
Freeform text - Custom text to explain your rewards program
Optionally set a custom redirect path to open your rewards page instead of the widget.
Click Save and visit your store's
/accountpage to preview the changes.
📝 Note: The Account Embed Widget works best with classic customer accounts. If you're using Shopify's new customer account experience, consider using the Account Dashboard Block instead.
Method 3: Manual Liquid Integration (Advanced)
For stores that need custom placement or have specific technical requirements, you can manually integrate referral links using Shopify metafields.
✨ Rivo Shopify Metafields is available on the Plus plan. See pricing →
Setup Instructions
From your Rivo Dashboard, go to Settings.
Click Developer Toolkit.
Enable Rivo Shopify Metafields.
From your Shopify admin, go to Online Store > Themes.
Click Actions > Edit code.
Search for the account page liquid template in your theme code (e.g.
main-account.liquid).Add the example code below to your liquid file.
<!-- Referral link section --><div style="display: flex; flex-direction: column; align-items: start; padding: 20px 20px 20px 40px !important; background-color: #f2f2f2; border-radius: 5px;"> <!-- Heading text --> <h3>Your referral link to share with friends</h3> <!-- Referral link input field --> <input id="referralLink" type="text" value="https://#{{ shop.domain }}/?referral_code=#{{ customer.metafields.custom.rivo.value.referral_code }}" disabled style="margin-bottom: 10px; width:500px; padding: 15px !important; border: 2px solid white; background: white !important;"> <!-- Copy button --> <button id="copyButton" onclick="copyToClipboard()">Copy to Clipboard</button> </div><script>// Function to copy the referral link to the clipboardasync function copyToClipboard() { let referralLink = document.getElementById('referralLink').value; let copyButton = document.getElementById('copyButton'); try { await navigator.clipboard.writeText(referralLink); console.log('Referral link copied to clipboard!'); copyButton.innerText = "Copied!"; setTimeout(function() { copyButton.innerText = "Copy to Clipboard"; }, 3000); } catch (err) { console.error('Failed to copy link: ', err); }}</script>
📝 Note: We're using #{{ shop.domain }} in Liquid to get your shop's primary domain and #{{ customer.metafields.custom.rivo.value.referral_code }} to get the referral code from a Rivo Metafield.
Social Sharing Options
Rivo supports multiple social sharing platforms to help your customers spread the word about your referral program:
Email - Send referral links directly via email
SMS - Share referral codes through text messages
Twitter - Post referral links on Twitter
Facebook - Share on Facebook with custom messaging
WhatsApp - Send referral links via WhatsApp
To configure social sharing options:
From your Rivo Dashboard, go to Referrals > Settings.
Enable the social platforms you want to offer.
Customize the sharing messages for each platform.
Set the order in which sharing options appear.
Troubleshooting
Referral link not showing up
Ensure the customer is logged into their account
Verify that the referral program is enabled in your Rivo Dashboard
Check that the customer has a referral code assigned
For manual integration, confirm that Rivo Shopify Metafields is enabled
Theme compatibility issues
Some custom themes may require additional CSS styling
The Account Dashboard Block works with most modern themes
For older themes, try the Account Embed Widget or manual integration
Customer account type considerations
Classic customer accounts - All three methods work
New customer account experience - Use Account Dashboard Block for best results
Check your Shopify admin under Settings > Customer accounts to see which type you're using
Common Questions
Can I customize the appearance of the referral block?
Yes! The Account Dashboard Block offers the most customization options including colors, fonts, and styling. You can also customize all text through your Rivo Dashboard.
Which method should I use for my store?
We recommend starting with the Account Dashboard Block as it provides the most flexibility and modern design options. If you're using classic customer accounts, the Account Embed Widget is also a great choice for quick setup.
Can customers share their referral links on social media?
Absolutely! Rivo supports sharing on multiple platforms including email, SMS, Twitter, Facebook, and WhatsApp. You can enable and configure these options in your Referrals settings.
Can you help me design it?
Yes! Reach out to your Customer Success Manager and they'll help with all the design: [email protected].