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. If you wish to keep the free product rewards together with the rest of the reward types in one block, go to the Advanced Settings of the How to redeem section and check the box "Display free product spending rewards" :

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:

That’s it!

You’re all set.

FAQ:

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