All Collections
Loyalty Touchpoints (coming soon)
Touchpoint: Show a customer's referral link on the account page
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

James Dohm avatar
Written by James Dohm
Updated over a week ago


Seamlessly integrate the referral link directly into the /account page to ensure a smooth and effortless sharing process, empowering your loyal customers to spread the word!

✨ Rivo Shopify Metafields is available on the Plus plan. See pricing β†’

Editing the account template

Stores using the classic customer accounts can show a customer's referral URL with a copy field right within their customers/account template. Let's dive in!

  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.

<!-- Main div containing the heading, input field, and copy button -->
<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>

<!-- Disabled input field displaying the referral along with the Rivo metafield -->
<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;">

<!-- Button triggering the clipboard copy function -->
<button id="copyButton" onclick="copyToClipboard()">Copy to Clipboard</button>


// Function to copy the referral link to the clipboard
async function copyToClipboard() {
// Retrieving the referral link and copy button
let referralLink = document.getElementById('referralLink').value;
let copyButton = document.getElementById('copyButton');

try {
// Copying the referral link to clipboard and changing button text
await navigator.clipboard.writeText(referralLink);
console.log('Referral link copied to clipboard!');
copyButton.innerText = "Copied!";

// Resetting button text after 3 seconds
setTimeout(function() {
copyButton.innerText = "Copy to Clipboard";
}, 3000);
} catch (err) {
// Error handling
console.error('Failed to copy link: ', err);

πŸ“ 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.

Common questions

Can you help me design it?

Yes! Reach out to your Customer Success Manager and they'll help with all the design: [email protected].

Did this answer your question?