Creating a Rewards Page

The rewards page is where customers can sign up, log in, view their VIP Tier status, and earn/redeem points. Having a dedicated page for this is a great way to skyrocket your loyalty engagement and sales.

In this article, you’ll learn how to easily set up and implement a rewards page on your store.

How it works

Yotpo will create an initial default rewards page for you based on your loyalty and referrals program settings, to automatically start you off with the relevant page sections.

Below is an example of what you will see after you create a new rewards page instance.

Before you start

Before you begin building your rewards page, you need to:

• Complete Setting up Yotpo Loyalty & Referrals on your eCommerce Platform
• Configure your Loyalty & Referrals program. This includes setting up earning rules, VIP tiers, an ESP integration, and a referral program, depending on what is relevant to you.

Creating a new rewards page

When you create a new page, the page sections are automatically generated to fit your program setup.

To create a new rewards page, do the following:

1. From the Yopto Loyalty & Referrals main menu, go to On-site Modules > Rewards Page Builder.
2. Click Create Rewards Page.

Now you can customize which sections you want to include, arrange the order they appear, and customize them to match the tone and voice of your brand.

Page settings

The first step is to check you are happy with all the sections that appear on the page.

Here you can choose which section you want your page to have, choose the order in which the sections appear, and customize the fonts and section headers.

Edit sections

Your default settings and texts are created for you based on your Loyalty program settings. You can edit each section individually and customize all texts, buttons, and the look and feel to match your brand.

The next step is to go over individual sections and check that everything is as you want it.

To customize your individual sections, click the Edit Sections tab and choose the section you want to customize.

The different sections include:

Banner section

This section is a way to add an on-brand image to your page and let shoppers sign up/log in. You can customize everything from the fonts and default texts to the logged-in/logged-out state, and much more.

See a complete guide to customizing the Banner Section.

My activity section

This section is a way to greet your shoppers and show them their activity in your loyalty program. You can customize everything from the fonts and colors to the logged-in/logged-out state, and more.

See a complete guide to customizing the My Activity Section

Earning points section

The Earning Points Section is a way to display all your earning rules and ways to earn points. You can customize everything from the fonts and colors to the logged-in/logged-out state, and more.

To learn more about the different earning rules and how to set them up, go to the Earning Rules Overview article.

See a complete guide to customizing the Earning Points Section.

Redeem Points sections

There are multiple ways shoppers can redeem points. How and where you want to let customers redeem their points will determine which Redeem Points sections you will have on your Rewards page.

The options include:

• Redeem Points (Interactive)

Use this option if you want to let customers redeem points directly from your rewards page.

You can use fixed redemption options/percentage coupons.

See a guide to customizing the Redeem Points Section (Interactive)

If you do not have a Redeem Points (Interactive) section, you must first set up some fixed-amount or percentage rewards in your loyalty admin. Once those are set up, return to the Rewards Page Builder and you'll see the option to add the Redeem Points (Interactive) section to your Layout.

• Redeem Points (Read-only)

The Read-only Section is an easy way to visually display to customers how much points are worth. Most brands use this section on their rewards page if they allow customers to redeem their points on the checkout page.

See a guide to customizing the Redeem Points Section (Read-only)

If you do not have a Redeem Points (Read-only) Section, you first need to set up a variable reward in your Loyalty admin. After that, return to the Rewards Page Builder and you'll see the option to add a Redeem Points (Read-only) section to your page layout.

VIP tiers section

This section is where you display all your VIP Tiers, and also what shoppers must do to reach the next tier. If you don’t have a VIP Tier Program set up yet, see a guide to setting it up here.

See a guide to customizing the VIP Tiers Section.

Refer friends section

This section is where you encourage shoppers to share their unique referral links with friends.

See a guide to customizing the Refer Friends Section.

Previewing your page

At this stage, you can review your page by clicking Preview. Inside the preview, you can toggle between the logged-out view and the Logged-in view.

When you are ready to make it live, continue to the next step.

Publishing on-site

To implement your rewards page on your store, you need to embed the page code.

You can embed your page as a whole, or embed all the sections individually.

If you prefer to first develop your Rewards Page as part of a test environment that is not live on your website, embed the codes in your test environment. Once you’re ready, you can embed the code to your live site.

Publishing on Shopify

If you're a merchant on Shopify or Shopify Plus, refer to our Creating and Publishing your Rewards Page in Shopify article.

Publishing on other eCommerce platforms

To embed your Rewards Page code on your store, do the following:

1. Click Publish in the top right corner.
2. You will see a popup with all the relevant codes:
   1. To add the full page to your store, copy the code in the Embed full page box. Paste the code onto the dedicated rewards page on your website.
   2. To add individual page sections to your store, copy the code of the relevant section. Paste the codes on a dedicated page or any page of your choosing.
3. Click Done.

Moving forward, any changes you make to this rewards page instance or the embedded section instances will immediately reflect on your live site.

To access the code snippets again, click on the code snippet icon in the page instance or click the page settings.

Next steps

Check out this guide to Launching your Loyalty Program On-site to see all the steps for implementing your program.