Skip to main content

Touchpoint: Show a customer's referral link on the account page

Make it easy for your customers to share their referral link by adding it directly to their customer account

T
Written by Travis Brault

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:

  1. Account Dashboard Block (Recommended) - Modern theme app extension with full customization

  2. Account Embed Widget - Perfect for classic customer accounts with simple setup

  3. 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

  1. From your Shopify admin, go to Online Store > Themes.

  2. Click Customize on your active theme.

  3. Navigate to your customer account page template.

  4. Click Add block and select Rivo: Account Dashboard.

  5. In the block settings, enable Referral Block Enabled.

  6. Customize the appearance using the available styling options.

  7. 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:

  1. From your Rivo Dashboard, go to Onsite > Account Dashboard.

  2. Scroll to the Referral Block section.

  3. Customize the following text fields:

  4. 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

  1. From your Rivo Dashboard, go to Onsite > Account Embed.

  2. Toggle the switch to ON to enable the account embed.

  3. Customize the default text and settings:

  4. Optionally set a custom redirect path to open your rewards page instead of the widget.

  5. Click Save and visit your store’s /account page 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 Premium and Enterprise plans. See pricing →


​

Setup Instructions

  1. From your Rivo Dashboard, go to Settings.

  2. Click Developer Toolkit.

  3. Enable Rivo Shopify Metafields.

  4. From your Shopify admin, go to Online Store > Themes.

  5. Click Actions > Edit code.

  6. Search for the account page liquid template in your theme code (e.g. main-account.liquid).

  7. 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:

  1. From your Rivo Dashboard, go to Referrals > Settings.

  2. Enable the social platforms you want to offer.

  3. Customize the sharing messages for each platform.

  4. Set the order in which sharing options appear.


​
​

Troubleshooting


​

  • 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].

Related Articles
Did this answer your question?