Introduction
Strategically position your referral campaign pop-up to streamline the referral process and engage customers at the optimal moment. Whether integrated into buttons or set to appear for returning customers, these pop-ups make it easy for users to sign up with a single click!
✨ Referral campaigns are available on the Scale and Plus plans. See pricing →
Trigger referral pop-ups from buttons and links
By clicking buttons and links, customers can seamlessly access the referral campaign through a pop-up, without being redirected to another page.
These HTML elements will serve as gateways for customers to sign up as advocates of your brand. You can either edit existing elements or add new ones to your theme code.
From your Shopify admin, go to Online Store > Themes
Click on the ... button > Edit code
Decide where you want the referral pop-up to be triggered (e.g. the /account page) and search for the file
Locate the element and add
open-rivo-advocate-campaignto its class. If you want to create a new button, use the following code as a reference:<button type="button" class="button button--primary open-rivo-advocate-campaign">
Refer Friends
</button>Optional: If you have multiple referral campaigns enabled, add the attribute
data-referral-campaign-id="{{referral campaign ID}}after the class for specifying the campaign<button type="button" class="button button--primary open-rivo-advocate-campaign" data-referral-campaign-id="5578">
Refer Friends
</button>Save changes.
Visit your storefront and navigate to the page where you added the element. Here's an example of our new button on the /account page.
Display referral pop-ups to returning customers
✨ Available on the Plus plan only
When a customer re-visits your store after purchasing, they will be greeted with a targeted pop-up that encourages them to enroll in your referral campaign. This approach helps to engage loyal customers, reminding them of the opportunity to refer friends and earn rewards.
From your Shopify admin, go to Settings > Checkout
Scroll down to Post-purchase page
Copy the following code and paste it into the Additional scripts box
<script type="text/javascript">
var time = parseInt(new Date().getTime());
localStorage.setItem("ba_msg_active", time);
try {
const checkout = window.Shopify.checkout;
if (checkout) {
const checkoutTime = new Date(checkout.created_at).getTime();
const checkoutData = {
email: checkout.email,
first_name: checkout.credit_card?.first_name || checkout.billing_address?.first_name || checkout.shipping_address?.first_name,
customer_id: checkout.customer_id,
created_at: checkoutTime,
recorded_at: time
}
localStorage.setItem("rivo_recent_order", JSON.stringify(checkoutData));
let orderTimestamps = JSON.parse(localStorage.getItem("rivo_order_timestamps")) || [];
if (!orderTimestamps.includes(checkoutTime)) {
orderTimestamps.push(checkoutTime);
localStorage.setItem("rivo_order_timestamps", JSON.stringify(orderTimestamps));
}
}
} catch (e) {
console.log(e);
}
</script>Save changes
From your Rivo Dashboard, go to Referrals > Campaigns
Edit your preferred referral campaign
Within the campaign editor, go to Advanced > Post Purchase Advocate Signup
Check the option Customer return visit advocate signup
Under Delay, enter the wait time in minutes before showing the advocate sign-up modal
Under Frequency, enter the number of minutes between showing the advocate sign-up modal again. Set to
0to display the modal only onceSave changes.
Going forward, Rivo will track your customers' sessions after they place an order, ensuring that the referral campaign pop-up is displayed when they return to your store. To provide a smooth experience, we recommend enabling the post-purchase advocate sign-up modal within a single campaign.