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

Create a beautiful page for your website to house your loyalty and referrals 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 rewards page on your website.

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

Customize the Lootly rewards page template

  1. Go to Display -> Rewards Page and click on Edit Page

  2. Customize all the elements of the page template:

  • Header Settings and Design

  • How it works Settings and Design

  • Earning Settings and Design

  • VIP Settings and Design

  • Spending Settings and Design

  • Referral Settings and Design

  • FAQ section - enable this section and add your own questions and answers here:

rewards page lootly

3. Once you’re done, save your changes and simply copy the provided code at the end of the customization screen and paste it on a dedicated page on your website.

Example rewards page:

example rewards page

Branding your rewards page

You can change the font used on your rewards page, remove Lootly branding and apply some CSS changes to your rewards page to make it completely on brand.

  1. Go to Display -> Rewards Page -> Edit Branding

  • Here, you can choose a font ( or if your desired font isn’t available please reach out to our support team)

  • Remove Lootly Branding - check the box if you wish to remove the Lootly logo

  • Apply CSS - if you wish to revamp the looks of the rewards page template, you can apply your CSS code in our CSS editor.

2. Save your changes.

Note: the provided iframe code is static, meaning changing it in Lootly won't affect your actual website page.

If you wish to change the size of the page for example, you'll have to do this on the code in your webpage.

Using HTML and CSS editors to add a custom rewards page

Part of Lootly’s advanced customization options are the HTML and CSS editors available to users who wish to add a custom rewards page instead of using Lootly’s reward page template.

You can get to the HTML editor by switching to it on the top of the Rewards Page settings:

Once the editor opens, you can make HTML changes to create your custom page design.

Save your changes when you’re done, copy the provided code and paste it on the dedicated page on your website.

That's it!

Did this answer your question?