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
Go to Display -> Rewards Page and click on Edit Page
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:
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:
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.
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!