--- title: "Creating a Rewards Page" slug: "creating-a-rewards-page" tags: ["Shopify", "Salesforce Commerce Cloud", "Shopify Plus", "Adobe Commerce (Magento)", "BigCommerce", "Loyalty and Referrals"] updated: 2025-06-25T09:11:41Z published: 2025-06-25T09:11:41Z canonical: "support.yotpo.com/creating-a-rewards-page" --- > ## Documentation Index > Fetch the complete documentation index at: https://support.yotpo.com/llms.txt > Use this file to discover all available pages before exploring further. # Creating a Rewards Page Products Loyalty & Referrals ###### Supported plans Pro, Premium, Enterprise ###### eCommerce Platform Shopify, Shopify Plus, BigCommerce, Salesforce Commerce Cloud, Adobe Commerce (Magento), Custom ## 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. ![Rewards page overview](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/new-rewards-page-overview.gif?sv=2026-02-06&spr=https&st=2026-10-31T07%3A43%3A59Z&se=2026-10-31T08%3A43%3A59Z&sr=c&sp=r&sig=80u42e%2F6Z6kfuKHA3iLE3fHk0h%2F0nxhIXATtcKkL8Tk%3D) ### Before You Start Before you build your Rewards Page, you need to: - Complete the [Yotpo Loyalty & Referrals setup](https://support.yotpo.com/docs/installing-on-your-ecommerce-platform) on your eCommerce platform. - Configure your Loyalty & Referrals program. This includes setting up [earning rules](https://support.yotpo.com/v1/docs/campaigns-overview), [VIP tiers](https://support.yotpo.com/v1/docs/loyalty-referrals-vip-tiers), an [ESP integration](https://support.yotpo.com/docs/emails-1), and a [referral program](https://support.yotpo.com/docs/setting-up-your-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**](https://loyalty-app.yotpo.com/rewards-page-builder-widget). 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](https://support.yotpo.com/docs/setting-up-your-yotpo-brand-kit) 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. > [!TIP] > Tip > > To remove a section from the Rewards page, such as the Refer Friends widget, go to **Page Settings > Layout > Section order** and click the trash icon next to the respective widget. When ready, save your changes by clicking the **Publish** button. > > ![Deleting the refer friends widget](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/deleting-page-section.png?sv=2026-02-06&spr=https&st=2026-10-31T07%3A43%3A59Z&se=2026-10-31T08%3A43%3A59Z&sr=c&sp=r&sig=80u42e%2F6Z6kfuKHA3iLE3fHk0h%2F0nxhIXATtcKkL8Tk%3D) - **Fonts and Section headers** - Customize the fonts and section headers to match your brand. - **Member opt-in** - > [!WARNING] > Important > > The **Member opt-in** setting is only for brands that are [using Shopify’s new customer accounts](https://support.yotpo.com/docs/using-yotpo-loyalty-referrals-with-shopifys-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. ![Member opt-in settings overview](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/rewards-page-member-opt-in(2).gif?sv=2026-02-06&spr=https&st=2026-10-31T07%3A43%3A59Z&se=2026-10-31T08%3A43%3A59Z&sr=c&sp=r&sig=80u42e%2F6Z6kfuKHA3iLE3fHk0h%2F0nxhIXATtcKkL8Tk%3D) ### 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](https://support.yotpo.com/v1/docs/rewards-page-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](https://support.yotpo.com/v1/docs/my-activity-on-site-module#customize-module-settings). ## 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](https://support.yotpo.com/docs/campaigns-overview) guide. > [!WARNING] > 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](https://support.yotpo.com/v1/docs/earning-points-on-site-widget#customize-module-settings). > [!TIP] > Tip > > Shopify merchants subscribed to our Platinum and Enterprise plans can further customize targeted earning rules using the [List & Segments feature](https://support.yotpo.com/v1/docs/creating-targeted-loyalty-campaigns-using-lists-segments#customizing-on-site-modules-for-target-audiences). ## Redeem Points Sections ![Redeem points sections](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/redeem-points-sections.png?sv=2026-02-06&spr=https&st=2026-10-31T07%3A43%3A59Z&se=2026-10-31T08%3A43%3A59Z&sr=c&sp=r&sig=80u42e%2F6Z6kfuKHA3iLE3fHk0h%2F0nxhIXATtcKkL8Tk%3D) 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] > Tip > > If you’re not sure which redemption section you should add, go to our [Guide to the Redeem Points Modules](https://support.yotpo.com/v1/docs/guide-to-the-redeem-points-modules) and see which one will best suit your needs. > [!WARNING] > 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](https://support.yotpo.com/v1/docs/redeem-points-on-site-module-interactive#customize-module-settings). > [!WARNING] > 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](https://support.yotpo.com/v1/docs/guide-to-the-redeem-points-modules) 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](https://support.yotpo.com/docs/checkout-modules) 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)](https://support.yotpo.com/v1/docs/redemption-on-site-module#customize-module-settings). > [!WARNING] > 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](https://support.yotpo.com/v1/docs/guide-to-the-redeem-points-modules) in your Loyalty admin. Once configured, return to the Layout settings (Page Settings > Layout) to add the section. ## VIP Tiers > [!NOTE] > 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](https://support.yotpo.com/v1/docs/loyalty-referrals-vip-tiers) here. > [!WARNING] > 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](https://loyalty-app.yotpo.com/rewards-page-builder-widget) 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](https://support.yotpo.com/v1/docs/vip-tiers-on-site-module#customizing-the-module). ## 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](https://support.yotpo.com/v1/docs/refer-friends-module#customizing-your-refer-friends-module). > [!WARNING] > Note > > If you do not see a Refer Friends section, you first need to set up your [referral program](https://support.yotpo.com/v1/docs/setting-up-your-referral-program) in your Loyalty admin. Once finished, return to the [Rewards Page editor](https://loyalty-app.yotpo.com/rewards-page-builder-widget) 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](https://support.yotpo.com/v1/docs/creating-and-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. ![How to get your Rewards Page codes](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/rewards-page-embed-codes.gif?sv=2026-02-06&spr=https&st=2026-10-31T07%3A43%3A59Z&se=2026-10-31T08%3A43%3A59Z&sr=c&sp=r&sig=80u42e%2F6Z6kfuKHA3iLE3fHk0h%2F0nxhIXATtcKkL8Tk%3D) ## Next Steps Check out this [guide to Launching your Loyalty Program On-site](https://support.yotpo.com/v1/docs/guide-to-launching-your-loyalty-referrals-program-on-site) to see all the steps for implementing your program. ## Deactivating the Rewards Page If you want to pause or deactivate your Rewards Page, follow these steps: 1. From your **Yotpo Loyalty admin**, go to **Display On-site > Rewards Page**. 2. Locate your **active Rewards Page** and click the ellipsis icon (three dots). 3. Select **Deactivate** and confirm your choice by clicking **Deactivate widget**. ![Deactivating a rewards page](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/deactivate-rewards-page.png?sv=2026-02-06&spr=https&st=2026-10-31T07%3A43%3A59Z&se=2026-10-31T08%3A43%3A59Z&sr=c&sp=r&sig=80u42e%2F6Z6kfuKHA3iLE3fHk0h%2F0nxhIXATtcKkL8Tk%3D) Deactivating your Rewards Page will remove all instances from your site. To reactivate the page, follow the same steps from above but select **Activate** from the ellipsis menu.