Create a dedicated loyalty page →

Integrate your Loyalty Program on the Shopify Customer Account Page

✨ NEW: We just launched the Customer Account Page Embed! Check it out here
Integrating our Loyalty snippet on your customer account page lets your members know about their loyalty points. It also creates a seamless integration across your website so your customers can easily access their points balance right from their account. This feature integrates their points balances into their personal online store account, so when a customer logs in to their account, they can see their points on their account page.



✨ NEW: Rivo's Loyalty, Rewards & Referrals Account Embed now integrates with Customer Account Concierge. Check the app out here and see our guide here.

In this article:
Setting up your Loyalty account embed
Advanced Settings and Custom theming
Account Themes using CSS
Common Questions

Shopify Account Page Embed

Setting up your Loyalty account embed

Let's walkthrough how to integrate your customer's points balance into their already existing customer account page.

From your Loyalty Dashboard, click On-Site Displays in the left side navigation.

Next, click Account Embed or visit this link.

Make any edits to the default text or settings.

Loyalty Program and Rewards: This is the default title of the account widget embed.
You have {{ points }} points: The {{ points }} variable will display your customers points amount as a number on their customer account page.
View My Rewards Account: This is the link that will open the widget.
Set custom redirect path: This option allows you to set a custom redirect path that will open a new tab. By default, clicking the link opens the widget but now you can set it to open your rewards page instead.
Freeform text: Here you can add any custom text on the account. This is a great place to explain your rewards program.

Toggle the ON button to enable the widget.

Click Save and visit your store's /account page to preview the changes.

Now, when your customers log in to their account, they'll see their points balance displayed.

Looking to create a loyalty page too? Create a dedicated on-site Rewards Page for your loyalty program

Advanced Settings and Custom theming



Setting a custom selector to embed the widget

Here you can add in an HTML class, to tell our app where to show the widget on the account page. For example, adding .order-history here would display the widget above your customer's order history. By default, the widget is displayed at the top of the account page.

Choosing the page position of the widget

Our app automatically places the embed points widget above your customer account page. Setting a custom selector will change where the embed widget will be inserted.

beforebegin: Embeds the account widget before the element

afterbegin: Embeds the account widget after the beginning of the element (first child)

beforeend: Embeds the account widget before the end of the element

afterend: Embeds the account widget after the element

Note: Only use this setting if current selector doesn't work on your theme or plan to change the widget location. If you need help, just message our team!

Account themes using Custom CSS

Need help adding some style to your account theme? We've got you covered! Just copy and paste these CSS themes below for a fresh new look to your customer account. Or if you're more of a self-starter, try it out on your own to customize the widget. See our guide on Customizing CSS for helpful getting started resources.

Tip: If you aren't seeing your changes refresh, click the Sync button button on the settings page.

Clean and simple



Copy the CSS below and paste it in the Custom CSS field.

#rivo-loyalty-program-and-rewards {
    margin-top: 30px;
    padding: 30px 50px 20px 50px;
    margin-bottom: 30px;
    text-align: left;
    border: 1px solid #EDEDED;
}

h2#loyalty-program-header {
    display: inline;
    border-radius: 50px;
}

p#widget-click a {
    padding: 10px 40px 10px 40px;
    text-decoration: none;
    border-radius: 30px;
    font-size: 16px;
    color: white;
    font-weight: bold;
    background: #000;
}

p#points-balance {
    color: #000;
    border-radius: 10px;
    font-size: 65px;
    font-family: ui-sans-serif;
    line-height: 1em;
}

p#freeform-text {
    white-space: pre-wrap;
    color: #000;
}

#rivo-loyalty-program-and-rewards  { animation: fade-in-move-down 0.7s; } @keyframes fade-in-move-down { 0% { opacity: 0; transform: translateY(-3rem); } 100% { opacity: 1; transform: translateY(0); } }


Bright and blue

Bright and Blue CSS theme

Copy the CSS below and paste it in the Custom CSS field.

#rivo-loyalty-program-and-rewards {
    margin-top: 30px;
    padding: 40px;
    margin-bottom: 30px;
    background: #EDF6F7;
    border: 2px solid #000;
    border-radius: 20px;
    box-shadow: 5px 5px 0 #000;
}

p#widget-click a {
    color: #fff;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
    font-size: 16px;
    border: 2px solid #000;
    background: #78BDBE;
}

p#points-balance {
    display: inline;
    color: #000;
    font-size: 50px;
}

#rivo-loyalty-program-and-rewards  { animation: fade-in-move-down 0.7s; } @keyframes fade-in-move-down { 0% { opacity: 0; transform: translateY(-3rem); } 100% { opacity: 1; transform: translateY(0); } }


Dark Mode

Dark Mode CSS theme

Copy the CSS below and paste it in the Custom CSS field.

#rivo-loyalty-program-and-rewards {
margin-top: 30px;
    padding: 30px 50px 20px 50px;
    margin-bottom: 30px;
    background: #000;
    border-radius: 10px;
}

h2#loyalty-program-header {
    letter-spacing: 2px;
    padding: 5px 20px 5px 20px;
    display: inline;
    border-radius: 50px;
    font-size: 16px;
    background: #F9C408;
}

p#widget-click a {
    padding: 10px 40px 10px 40px;
    text-decoration: none;
    border-radius: 0px;
    font-size: 14px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bold;
    border: 1px solid #fff;
    background: #000;
}

p#points-balance {
    display: inline;
    color: #fff;
    font-size: 36px;
}

p#freeform-text {
    white-space: pre-wrap;
    font-size: 14px;
    color: #fff;
}

#rivo-loyalty-program-and-rewards  { animation: fade-in-move-down 0.7s; } @keyframes fade-in-move-down { 0% { opacity: 0; transform: translateY(-3rem); } 100% { opacity: 1; transform: translateY(0); } }


Mellow Yellow

Mellow Yellow

Copy the CSS below and paste it in the Custom CSS field.

#rivo-loyalty-program-and-rewards {
    margin-top: 30px;
    padding: 30px 50px 20px 50px;
    margin-bottom: 30px;
    background: #FBEED1;
    text-align: left;
    border-radius: 6px;
}

h2#loyalty-program-header {
    display: inline;
    border-radius: 50px;
}

p#widget-click a {
    padding: 10px 40px 10px 40px;
    text-decoration: none;
    border-radius: 30px;
    font-size: 18px;
    color: #fff;
    font-weight: bold;
    background: #F9C408;
}

p#points-balance {
    color: #F9C408;
    border-radius: 10px;
    font-size: 65px;
    font-family: ui-sans-serif;
    line-height: 1em;
}

p#freeform-text {
    white-space: pre-wrap;
    color: #000;
    font-weight: 500;
}

#rivo-loyalty-program-and-rewards  { animation: fade-in-move-down 0.7s; } @keyframes fade-in-move-down { 0% { opacity: 0; transform: translateY(-3rem); } 100% { opacity: 1; transform: translateY(0); } }


Pro Tip: Add a smooth transition to the account widget by adding this line of CSS:
#rivo-loyalty-program-and-rewards  { animation: fade-in-move-down 0.7s; } @keyframes fade-in-move-down { 0% { opacity: 0; transform: translateY(-3rem); } 100% { opacity: 1; transform: translateY(0); } }


Common Questions

Can I embed this widget somewhere else on my website?
Right now, the widget can only be embedded on the customer account page.

Can someone help me customize the design?
Yes! Email our technical team at tier2@rivo.io and we'll be happy to spruce it up.
Was this article helpful?
Cancel
Thank you!