Creating a Rewards Page

Goals and Outcomes

Your Rewards Page is the central hub for customers to sign up, log in, view their VIP Tier status, and earn or redeem points. It’s a dedicated page that allows them to easily track and manage their rewards, which can significantly boost engagement and drive sales.

In this guide, you’ll learn how to set up and publish a Rewards Page on your store.

Rewards Page Overview

Upon creating a new instance, Yotpo automatically creates a default Rewards Page based on your Loyalty & Referrals program settings, ensuring your page includes the most relevant sections from the start.

Below is an example of what you’ll see after creating a new Rewards Page instance.

Before You Start

Before you build your Rewards Page, you need to:

• Complete the Yotpo Loyalty & Referrals setup 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 align with your program setup.

Steps to create a new Rewards Page:

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

2. Click Create Rewards Page.

3. Customize which sections you want to include, arrange their order, and tailor them to match your brand’s style and tone.

The Rewards Page configuration settings are split into two tabs:

• Page Settings - Adjust the general page layout, branding, fonts, and member opt-in settings.

• Edit Sections - Modify individual sections, update text, buttons, and overall appearance.

Page Settings

This is where you configure the general sections and branding style for the page, split into several settings:

• Brand Kit - Preview your Brand Kit design and make changes if necessary.

• Layout - Check the sections that appear on the page and use the dropdown to add or remove sections. Drag and drop the different sections to arrange their order.

• Fonts and Section headers - Customize the fonts and section headers to match your brand.

• Member opt-in

  • Important

    The Member opt-in setting is only for brands that are using Shopify’s new customer accounts and their loyalty program eligibility is set to “only members who signed up.”

  • This setting relates only to the Welcome Banner (banner section) at the top of your Rewards Page. It lets you configure what customers who haven’t yet opted in to your rewards program will see. You can customize the disclaimer and button asking non-members to join your program.

  • Disclaimer type - you can choose between no disclaimer, text only, or text with checkbox. By default, the no disclaimer option is selected.

Edit Sections

The default settings and content of each section are based on your loyalty program settings. You can edit them individually to customize the text, buttons, looks, and feel to match your brand.

To customize the sections, click the Edit Sections tab and choose the section you want to customize. We’ll go over each section in more detail below.

Banner Section

This is the welcome banner at the top of your Rewards Page. It’s a great opportunity to add an on-brand image and let customers sign up or log in to their account and your loyalty program. You can customize everything from the fonts and default text to the logged-in/logged-out state, and much more.

See a complete guide to customizing the Banner Section.

My Activity

This section is a way to greet your customers 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

The Earning Points section is a way to display all your earning rules and ways to earn points. You can customize the layout, choose which earning rules to display on the page (and therefore make it available to customers), and tailor the content of each tile. Learn more about the different earning rules and how to set them up in our Earning Rules Overview guide.

Note

If you update any earning rules in your Manage Program settings, be sure to also update the corresponding text and/or values in the Rewards Page to keep everything aligned.

See a complete guide to customizing the Earning Points Section.

Tip

Shopify merchants subscribed to our Platinum and Enterprise plans can further customize targeted earning rules using the List & Segments feature.

Redeem Points Sections

Customers can redeem their points in multiple ways. The redemption options you enable will determine which Redeem Points sections will appear on your Rewards Page.

Tip

If you’re not sure which redemption section you should add, go to our Guide to the Redeem Points Modules and see which one will best suit your needs.

Note

If you make any redemption configurations after publishing, this will not automatically update the Rewards Page. You must manually adjust the Redemption options in the Rewards Page layout settings to sync the changes.

The options include:

Redeem Points (Interactive)

This section allows customers to redeem points directly from the Rewards Page. Before using this option, you must first set up fixed-amount or percentage-based rewards in your loyalty admin.

Use this option if:

• You want customers to redeem points directly from the Rewards Page.

• You offer fixed-amount or percentage-based rewards.

Learn how to customize the Redeem Points (Interactive) section.

Note

If you don’t see the Redeem Points (Interactive) section in your Rewards Page Builder, make sure you have at least one fixed-amount or percentage-based reward set up. Once configured, return to the Layout settings (Page Settings > Layout) to add the section.

Redeem Points (Read-only)

The Read-only section displays how much points are worth but does not allow direct redemption. This is ideal for brands using Shopify Plus that enable point redemption at checkout instead of through the Rewards Page.

Use this option if:

• You want to show customers how much their points are worth.

• You allow points to be redeemed at checkout rather than on the Rewards Page.

Learn about customizing the Redeem Points Section (Read-only).

Note

If you don’t see the Redeem Points (Read-only) section in your Rewards Page Builder, make sure you’ve set up a variable reward in your Loyalty admin. Once configured, return to the Layout settings (Page Settings > Layout) to add the section.

VIP Tiers

Available for

Yotpo Loyalty & Referrals Platinum and Enterprise plans.

This section is where you display all your VIP Tiers and what customers 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.

Notes

• If you don’t see a VIP Tiers section, you first need to set up some VIP Tiers in your Loyalty admin. Once finished, return to the Rewards Page editor and you'll see the option to add a VIP Tiers section to your layout.

• Adding or removing VIP Tiers after publishing will not automatically update the Rewards Page. You must manually adjust the VIP Tiers layout settings in the Rewards Page to reflect any changes.

• Updates to VIP thresholds will be automatically reflected on the Rewards Page.

See a guide to customizing the VIP Tiers Section.

Refer Friends

This section is where you encourage customers to share their unique referral links with friends. See a guide to customizing the Refer Friends Section.

Note

If you do not see a Refer Friends section, you first need to set up your referral program in your Loyalty admin. Once finished, return to the Rewards Page editor and you'll see the option to add a Refer Friends section to your layout.

Reviewing and Publishing Your Rewards Page

Preview

At this stage, you can review your page by clicking Preview. Inside the preview, you can toggle between the logged-out and the Logged-in view. When you are ready to make it live, continue to the next step.

Publish 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 guide on Publishing your Rewards Page in Shopify.

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 Publish.

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.