All Collections
Design Customization
How to add a program rewards page
How to add a program rewards page

Create a beautiful page for your website to house your loyalty, referrals and affiliate program

Aleksandra Velkova avatar
Written by Aleksandra Velkova
Updated over a week ago

Overview

Your loyalty and referrals program is an asset to your business and you want to give it a proper space to live in, a page on your website where people can be directed to check out what you offer, what rules should they follow and to find answers to their FAQs.

To save you time and resources, Lootly allows you to add a fully customizable and interactive rewards page on your website.

This guide explains the ways you can do this and how.


The Rewards page V2 Template

To get to the rewards page template, navigate to Display -> Rewards page.

Note: If you were using Lootly’s previous rewards page template, you may see it on this screen named as “Legacy Page”

We recommend disabling the legacy page and using the new, improved rewards page template. It allows for more customization options and for interaction; customers can sign into their accounts on the page and perform actions there as well as see their rewards.

You can use the rewards page with the widget, or as a standalone user interface.


Customization options for the rewards page

To start customizing the rewards page, first you have to create one.

Click on the “Create Page” button on the top right of the screen:

Once you do, the page editor will open and you can start customizing.

First, you’ll see the main customization menu on the left side.

This is the Rewards Page Editor with 2 main sections: Edit Sections and Page Settings.

Edit Sections gives you access to all the sections the page can have.

Page Settings refers to the rewards page as an interface, and allows you to do changes across the entire page. Here, you can choose which sections you want to display on the page and which ones to hide.

You can also reorder sections.

And you can apply CSS for custom design changes.

Recommendation: start by customizing the page settings. Here you define what sections the page should have (maybe you don’t want to show the affiliate program section here. Or maybe you’ll only want to display points and rewards) and also set the order of the sections on the page.

Next, we move on to customizing each section of the page.

For each section, you’ll be able to customize the layout, the design, the content.

You can do this for both Logged in and Logged out view.

The screenshot above shows the design customization options for the Earn points section. You can see it highlighted in the preview on the right. If you click on Logged out from the menu, it will allow you to customize the page view when the customer is not logged into their account. Same for the Logged in menu option.

Note: The Free Products section is designed to display any free product rewards you offer to your customers. You can customize this as a Rewards Bazaar section, Products to buy with your points section and more.

How it works is super simple: once the customer clicks redeem on the button below the product display, the points are redeemed and the product is added to their cart.

Once you’re done customizing all sections and elements, click Save.

Watch a brief demo video of the rewards page 👇


Deploying the rewards page on your site

To add the rewards page you just designed onto your site, navigate back to the main rewards Page screen: Display (from the main Lootly menu) -> Rewards Page

You can see here your new page created:

You can see the date when the page was last updated.

You can give a name to your new rewards page.

And you can see the page status, which is “Enabled”.

If you hover over this page, a 3 dot menu will appear on the left top corner of the page along with an Edit option.

From here you can:

  • Disable the page

  • Copy the code to deploy on your site

  • Delete the page entirely


That’s it!

You’re all set.


FAQ:

  1. Can customers redeem their points on the page?

  • Yes they can. Make sure the “My Rewards” section is enabled on the page.

2. Are there 2 versions of the page, logged in and out?

  • There’s only 1 page editor where you can edit both page views: what customers see when they log in, and what they see when they’re logged out.

Did this answer your question?