Create a dedicated loyalty page →

Create a dedicated Rewards Page for your loyalty program

✨ NEW: Loyalty & Rewards Page Builder! Try it free for 14 days
Using a dedicated on-site page for your loyalty program is the optimal place where you can explain how your loyalty and rewards program works. A rewards page will be the main place where your customers (and potential customers) can sign up and understand your loyalty programs benefits! In this article we'll learn how to create a landing page for your Loyalty, Rewards and Referrals program on your website using our in-app page builder.

Show how your Loyalty, Rewards and Referrals program works and how customers can sign up
Explain the benefits of your loyalty program on a dedicated page
Encourage your customers (and potential customers) to login, earn points and redeem rewards



In this article:
Step 1: Create your loyalty and rewards page
Step 2: Customize your rewards page using the page builder
Step 3: Launch your page
Customizing your page with CSS
Adding additional content (technical tutorial)
Common questions

Note: After creating the page, it will be active on your website under /pages/loyalty-program, but the page will not visible to your customers until you add it manually in your navigation Step 3: Launch your page.

Step 1: Create your loyalty and rewards page



The first thing you need to do is navigate to the page setup in the app

From your Loyalty dashboard, click Growth Tools

Next click Configure on the Dedicated Loyalty Page card (or click here to go directly there) and click Create Page

Tada! Your Loyalty page is now created and visible at /pages/loyalty-program on your website

If you navigate to the pages section of your Shopify Admin, a new page will be created called "Loyalty Program".

Step 2: Customize your rewards page using the page builder

Next up, the fun part – let's start to customize the look and feel of the page! We’ll walk through how you can edit, add, arrange and customize your rewards page sections. Your customers can sign in and see their points and loyalty program activity on the page you create. Using the page builder, you can customize images, colors, text, fonts, and the order of your page sections!

The page builder

There are two views to the page, logged out (guest) and logged in (member). The logged out (guest) view of the page is visible to customers browsing your website when they aren't signed in to their account. It will show the the benefits, and display prompts to join your loyalty program. The logged in (member) view is visible if the customer is signed in to their account. It will show the customer's account details, their points balance, referral URL and their VIP tier status.

The page is divided into 6 parts, Banner, Explainer, Ways to Earn, Ways to Redeem, Referrals and VIP Tiers. In each of these sections you can customize the font, colors, text, images, background and more. You can also customize each of the logged in views and logged out views.

Try to match the colors of your loyalty program to the colors on your website! You can even add a banner image at the top to match your branding.

Tip: For a banner image, try using Unsplash and searching for keywords related to your brand. For something more custom use one of Canva's free templates. The optimal banner size is 1600x400.

You can reorder or toggle visibility (hide) sections by clicking the eye icon and the up and down arrows next to the sections. The page preview on the left will update in real time as you write and change items.

Step 3: Launch your page

Add a link to your loyalty program

After enabling the page on your website, it's accessible by visiting /pages/loyalty-program on your website! To launch it live to your customers, for the last step we'll need to add a link to it through your website navigation.

Click here to add a link to your Loyalty page or widget in your menu navigation so your customers can access your loyalty program! The URL or link for your page is /pages/loyalty-program.

And here's how it looks in your website navigation

And voila! You now have a loyalty page in 3 simple steps!

Customizing your page with CSS

Using CSS is an awesome way we can add that unique custom look and feel to your page. To use Custom CSS on your page follow these steps:

From your dashboard, click Growth Tools on the left sidebar

Now click Loyalty Page

On the right side, click General Settings

Now you're all ready to start writing your CSS. Any CSS you write should update in real time on the left hand side. Just click save each time you make changes. And since we want to override the default styles, make sure to use the !important tag. If you're not familiar with using CSS just yet, we recommend checking our other guide on Using Custom CSS.

Here are a few quick tips to change some general styling →


Add space to the top of the page sections.
.page-section {
padding-top: 100px !important;
padding-bottom: 100px !important;
}



Add a circle around the number in the explainer section
.step-number {
    display: inline-block !important;
    font-weight: 700 !important;
    border-radius: 50%  !important;
    width: 50px  !important;
    height: 50px  !important;
    padding: 10px  !important;
    line-height: 29px !important;
color:#fff !important;
    background: rgb(0, 171, 132) !important;
margin-bottom:20px !important;
}



Change the color of your page icons
svg.svg-icon, img.custom-icon {
    fill: rgb(0, 171, 132) !important;
}

path {
    fill: rgb(0, 171, 132) !important;
}


Tip: If you need any help customizing your page, send an email with your customizations to tier2@rivo.io and we'll give you a hand!

Adding additional content (technical tutorial)

After you've created your loyalty page in the app, you'll notice that now a page on your website will exist under /pages/loyalty-program as well as a new page template in your theme called page.rivo-loyalty.liquid. You can access the page.rivo-loyalty.liquid page template by visiting this link. Our app loads the content of this page through javascript by injecting the <div id="rivo-page-wrapper"></div> into the page template.

If you'd like to add additional content to this page, you can edit this page template above with your own HTML and CSS. Any content added to this page template will be visible on your Loyalty Page.

Common questions

Can I use the page with only 1 program enabled?
Yes you can. If you don't have a program enabled, the page section will automatically hide on it's own. If you'd like to hide a page section manually, click the "eye" icon next to the title.

Can I use the loyalty page exclusively instead of the widget?
Yes! Your customers can earn, spend and redeem points right from the page itself. You can hide the widget by visiting this link. Note that sharing a referral link will still open the widget.

Can I create multiple loyalty pages?
The app creates a page template in your theme, if you’d like to show this loyalty program on another page, simply create a new page on your shopify store and assign that page this page template.

Does the app translate my page automatically?
If you use a translation app or feature on your website, that app should pickup that this page is part of your website, and translate the page for you.

Is my page SEO friendly?
Yes! The page pulls in all the relevant meta tags from your Shopify Admin.

Can I use my own custom icons and will they also update on this page?
Yes! You can set up your own custom icons by visiting this article
Was this article helpful?
Cancel
Thank you!