Touchpoint
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!
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.
<!-- 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>
</div>
<script>
// 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);
}
}
</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.
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].