Introduction
Loyalty programs are a powerful way to build lasting relationships with your customers. They not only encourage repeat purchases but also create a sense of community around your brand. However, the key to a successful loyalty program lies in its presentation and ease of use. A well-designed loyalty template ensures your customers understand the benefits and are motivated to engage with your program.
In this article, we’ll guide you through the process of setting up a loyalty template that is visually appealing, easy to navigate, and optimized for engagement
Note📝: You need to change CSS according to your theme
There are 2 ways to add this code to the page -:
1.) Add code on page
2.) Another way to create the template and add a template on the page
Code:
<div class="page-widths">
<div class="grids">
<div class="grid__items">
<div class="rte">
<meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1" />
<div class="loyalty-front-page-ui-one">
<div class="main-banner">
<div class="site-container">
<div class="main-banner-left-sec">
<div class="main-page-text text-poppins">Loyalty Reward Program</div>
<div class="main-page-sub-text text-arial">Become a member and earn points & exclusive rewards every time you shop.</div>
{% if customer %}<a class="main_btn text-arial hvr-ripple-out ait-trigger-wayto-earn-points">Rewards</a>{% else %}<a class="main_btn text-arial hvr-ripple-out ait-trigger-wayto-earn-points">Join Rewards</a>{% endif %}</div>
<div class="main-banner-right-sec"><img src="https://app.aitrillion.com/assets/loyalty/images/loyalty-festive-promotion_1.png" /></div>
</div>
</div>
<div class="earnpoint-section">
<div class="site-container">
<div class="section-header">
<div class="section-header-main text-poppins">Ways to earn points</div>
</div>
<div class="section-content">
<div class="earnpoint-blocks">
<div class="earnpoint-block-content"><a class="earnpoint-block hvr-rectangle-out ait-trigger-wayto-earn-points">
<div class="earnpoint-icon"><img src="https://app.aitrillion.com/assets/loyalty/images/welcome-icon.svg" alt="Welcome Points" /></div>
<div class="earnpoints text-poppins">25 Points</div>
<div class="earnpoint-type text-arial">Welcome Points</div>
</a></div>
<div class="earnpoint-block-content"><a class="earnpoint-block hvr-rectangle-out ait-trigger-wayto-earn-points">
<div class="earnpoint-icon"><img src="https://app.aitrillion.com/assets/loyalty/images/purchase-icon.svg" alt="Make Purchase" /></div>
<div class="earnpoints text-poppins">10 Points Per $1.00</div>
<div class="earnpoint-type text-arial">Make Purchase</div>
</a></div>
<div class="earnpoint-block-content"><a class="earnpoint-block hvr-rectangle-out ait-trigger-wayto-earn-points">
<div class="earnpoint-icon"><img src="https://app.aitrillion.com/assets/loyalty/images/reviewstar-icon.svg" alt="Write a Review" /></div>
<div class="earnpoints text-poppins">10 Points</div>
<div class="earnpoint-type text-arial">Write a Review</div>
</a></div>
<div class="earnpoint-block-content"><a class="earnpoint-block hvr-rectangle-out ait-trigger-wayto-earn-points">
<div class="earnpoint-icon"><img src="https://app.aitrillion.com/assets/loyalty/images/fb-icon.svg" alt="Share on Facebook" /></div>
<div class="earnpoints text-poppins">25 Points</div>
<div class="earnpoint-type text-arial">Share on Facebook</div>
</a></div>
<div class="earnpoint-block-content"><a class="earnpoint-block hvr-rectangle-out ait-trigger-wayto-earn-points">
<div class="earnpoint-icon"><img src="https://app.aitrillion.com/assets/loyalty/images/refer-icon.svg" alt="Refer a Friend" /></div>
<div class="earnpoints text-poppins">500 Points</div>
<div class="earnpoint-type text-arial">Refer a Friend</div>
</a></div>
<div class="earnpoint-block-content"><a class="earnpoint-block hvr-rectangle-out ait-trigger-wayto-earn-points">
<div class="earnpoint-icon"><img src="https://app.aitrillion.com/assets/loyalty/images/store-icon.svg" alt="Store visit" /></div>
<div class="earnpoints text-poppins">10 Points</div>
<div class="earnpoint-type text-arial">Store visit</div>
</a></div>
</div>
<div class="earnpoint-btnsec full_width"><a class="main_btn text-arial hvr-ripple-out ait-trigger-wayto-earn-points">More ways to earn points</a></div>
</div>
</div>
</div>
<div class="site-container scissor-divider"></div>
<div class="reward-section">
<div class="site-container">
<div class="section-header">
<div class="section-header-main text-poppins">Your rewards</div>
<div class="section-header-para text-arial">Want to use your points for a discount on your upcoming subscription order? No problem, just redeem here and click "manage subscriptions" below to apply your discount!</div>
</div>
<div class="section-content">
<div class="reward-blocks">
<div class="reward-block-content"><a class="reward-block hvr-float-shadow ait-trigger-redeem-points">
<div class="reward-discount text-poppins">$5.00 Off</div>
<div class="reward-points text-poppins">500 POINTS</div>
<div class="divider-dashed"></div>
<div class="reward-redeem text-arial">Redeem Coupon</div>
</a></div>
<div class="reward-block-content"><a class="reward-block hvr-float-shadow ait-trigger-redeem-points">
<div class="reward-discount text-poppins">$10.00 Off</div>
<div class="reward-points text-poppins">1000 POINTS</div>
<div class="divider-dashed"></div>
<div class="reward-redeem text-arial">Redeem Coupon</div>
</a></div>
<div class="reward-block-content"><a class="reward-block hvr-float-shadow ait-trigger-redeem-points">
<div class="reward-discount text-poppins">$25.00 Off</div>
<div class="reward-points text-poppins">2500 POINTS</div>
<div class="divider-dashed"></div>
<div class="reward-redeem text-arial">Redeem Coupon</div>
</a></div>
</div>
<div class="reward-btnsec full_width"><a class="main_btn text-arial hvr-ripple-out ait-trigger-redeem-points">Redeem Points</a></div>
</div>
</div>
</div>
<div class="site-container scissor-divider scissor-right"></div>
<div class="faq-section">
<div class="site-container">
<div class="section-header">
<div class="section-header-main text-poppins">FAQ’s</div>
</div>
<div class="section-content">
<div class="faq_sec_block full_width">
<div class="faq_sec-content">
<div class="faq_sec">
<div class="full_width">
<div class="faq_single active">
<h6 class="in">Lorem ipsum dolor sit amet consectetur adipiscing elit? <span class="accicon"></span></h6>
<p style="display: none;">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
</div>
<div class="faq_single">
<h6 class="">Sed do eiusmod tempor incididunt ut labore et dolore? <span class="accicon"></span></h6>
<p style="display: none;">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
</div>
<div class="faq_single">
<h6>Ut enim ad minim veniam? <span class="accicon"></span></h6>
<p style="display: block;">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
</div>
<div class="faq_single">
<h6>Quis nostrud exercitation ullamco laboris nisi? <span class="accicon"></span></h6>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
</div>
<div class="faq_single">
<h6>Aliquip ex ea commodo consequat? <span class="accicon"></span></h6>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
</div>
<div class="faq_single">
<h6>Duis aute irure dolor in reprehenderit in voluptate velit? <span class="accicon"></span></h6>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
<!--
/* Ripple Out */
@-webkit-keyframes hvr-ripple-out {
100% {
top: -12px;
right: -12px;
bottom: -12px;
left: -12px;
opacity: 0;
}
}
@keyframes hvr-ripple-out {
100% {
top: -12px;
right: -12px;
bottom: -12px;
left: -12px;
opacity: 0;
}
}
.hvr-ripple-out {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
}
.hvr-ripple-out:before {
content: '';
position: absolute;
border: #ee5763 solid 2px;
border-radius: 5px;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
.hvr-ripple-out:hover:before, .hvr-ripple-out:focus:before, .hvr-ripple-out:active:before {
-webkit-animation-name: hvr-ripple-out;
animation-name: hvr-ripple-out;
}
/* Float Shadow */
.hvr-float-shadow {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
-webkit-transition-duration: 0.3s !important;
transition-duration: 0.3s !important;
-webkit-transition-property: transform !important;
transition-property: transform !important;
}
.hvr-float-shadow:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
top: 100%;
left: 5%;
height: 10px;
width: 90%;
opacity: 0;
background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
/* W3C */
-webkit-transition-duration: 0.3s !important;
transition-duration: 0.3s !important;
-webkit-transition-property: transform, opacity !important;
transition-property: transform, opacity !important;
}
.hvr-float-shadow:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
/* move the element up by 5px */
}
.hvr-float-shadow:hover:before, .hvr-float-shadow:focus:before, .hvr-float-shadow:active:before {
opacity: 1;
-webkit-transform: translateY(5px);
transform: translateY(5px);
}
/* Rectangle Out */
.hvr-rectangle-out {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
background: #e1e1e1;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-rectangle-out:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fff9f9;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
border-radius: 18px;
}
.hvr-rectangle-out:hover, .hvr-rectangle-out:focus, .hvr-rectangle-out:active {
color: white;
}
.hvr-rectangle-out:hover:before, .hvr-rectangle-out:focus:before, .hvr-rectangle-out:active:before {
-webkit-transform: scale(1);
transform: scale(1);
background:radial-gradient(#f5e0e0c7, transparent);
}
*{box-sizing: border-box;}
body{margin: 0px;padding: 0px}
.text-poppins{font-family: 'Poppins', sans-serif;font-style: normal;}
.text-arial{font-family: 'Arial', sans-serif;font-style: normal;}
.page-width.page-width--narrow {
width: 100%;
max-width: 100%;
padding: 0px;
}
.main-page-title{display:none}
.loyalty-front-page-ui-one .main-banner{background:#F2F3F7;display: flex;}
.main-banner .site-container{display: flex;flex-wrap: wrap;}
.site-container{width:95%;max-width:1100px;padding-left:15px;padding-right:15px;margin-left:auto;margin-right:auto}
.main-banner-left-sec{padding:68px 0px;width: 39%;float: left;position: relative;}
.main-banner-left-sec .welcome-text{font-weight: 600; font-size: 20px; line-height: 106.5%;display: flex; align-items: center; color: #EE5763;margin-bottom:12px}
.main-page-text{font-weight: 700; font-size: 41px; line-height: 51px;display: flex; align-items: center; color: #000000;margin-bottom:16px}
.main-page-sub-text{font-weight: 400; font-size: 16px; line-height: 23px;color: #000000;margin-bottom:30px}
.main_btn {text-decoration:none;font-weight: 700; font-size: 18px; line-height: 18px;color: #FFFFFF !important; padding: 17px 15px; background: #EE5763; border-radius: 5px;display:inline-block;min-width: 208px;text-align: center;}
.main-banner-right-sec{width: 61%;float: left;position: relative;text-align: right;display: flex;align-items: flex-end;justify-content: flex-end;}
.main-banner-right-sec img{border:none !important;margin-bottom: 0px !important;margin-top: auto;margin-right: 0px;margin-left: auto;max-width: 100%}
.reward-section{display: flex;width: 100%; background:#fff;text-align: center;padding: 54px 0px}
.section-header-main{font-weight: 600; font-size: 36px; line-height: 54px;text-align: center; color: #000000;margin-bottom: 9px}
.section-header-para{font-weight: 400; font-size: 14px; line-height: 23px; text-align: center; color: #636363;margin-bottom: 40px}
.section-content{margin-left: auto;margin-right: auto;max-width:935px;}
.reward-section .section-header-para{max-width: 676px;margin-left: auto;margin-right: auto;}
.loyalty-front-page-ui-one a:not([href]){cursor: pointer !important;}
.reward-blocks{margin-left: -20px; margin-right: -20px;margin-bottom: 20px;display: flex;flex-wrap: wrap;}
.reward-block-content { padding-left: 20px; padding-right: 20px; float: left; width: 33.33%; margin-bottom: 20px }
.reward-block{padding: 24px 0px 5px 0px;background: #FFFFFF; border: 1px solid #EE5763;border-radius: 12px;width: 100%;display: block;text-decoration: none !important;}
.reward-discount{font-weight: 600; font-size: 32px; line-height: 48px;text-align: center; color: #F33846;}
.reward-points{font-weight: 500; font-size: 16px; line-height: 24px; text-align: center; letter-spacing: 0.05em; color: #464141;margin-bottom: 25px}
.reward-redeem{font-weight: 400; font-size: 15.2043px; line-height: 19px;color: #EE5763;}
.divider-dashed{background: url(https://app.aitrillion.com/assets/loyalty/images/dashed-line.png);display: block !important;margin-bottom: 5px; width:100%;height: 1px;}
.full_width{float: left;width: 100%}
.reward-section, .earnpoint-section{display: flex;flex-wrap: wrap;}
.reward-section .main_btn{min-width: 213px}
.scissor-divider { clear: both; height: 20px; display: flex !important; align-items: center; position: relative; }
.scissor-divider:before { content: ""; position: absolute; background: url(https://app.aitrillion.com/assets/loyalty/images/scissor.svg); height: 20px; width: 26px; background-repeat: no-repeat; z-index: 2; top: 0px; left: 4%;right: auto;}
.scissor-divider:after { content: ""; position: absolute; top: auto; bottom: auto; margin: auto 0px; left: 0; right: 0; border-top: 1px dashed #B4B4B4; z-index: 1; }
.scissor-divider.scissor-right{transform: rotate(180deg);}
.earnpoint-section {text-align: center;padding: 75px 0px 60px 0px; float: left; width: 100%;}
.earnpoint-section .section-header-main{margin-bottom: 30px}
.earnpoint-blocks{margin:0 -15px;display: flex;flex-wrap: wrap;}
.earnpoint-block-content{width: 33.33%;float: left;position: relative;padding: 0px 15px;padding-bottom: 30px}
.earnpoint-block{background: #FFF9F9;border: 2px solid #EE5763;border-radius: 18px;padding: 72px 20px;height: 100%;width: 100%;text-decoration: none !important;display: block;}
.earnpoint-block img{border: none !important;}
.earnpoints{font-weight: 600; font-size: 22px; line-height: 33px;text-align: center; letter-spacing: 0.2px; color: #EE5763;margin-bottom: 8px}
.earnpoint-type{font-weight: 400; font-size: 15px; line-height: 18px;text-align: center; color: #585858;margin-bottom: 0px}
.earnpoint-icon{margin-bottom: 20px}
.earnpoint-icon img {vertical-align: middle; margin-bottom: 0px;}
.earnpoint-btnsec{margin-top: 10px}
.earnpoint-btnsec .main_btn{width: 100%;max-width: 307px}
.faq-section .section-header-main{margin-bottom: 40px;padding-top: 50px}
.faq_sec {
padding-bottom: 90px;
padding-top: 0px;
text-align: left;
max-width: 780px;
margin-left: auto;
margin-right: auto;
display: flex;
}
.faq_sec .faq_single {
background: #F9FAFD !imporatnt;
box-shadow: none;
border-radius: 0px;
padding:10px 30px 10px 30px;
max-width: 100%;
border-bottom: 1px solid #E0E0E0;
margin-bottom: 33px;
}
.faq_sec .faq_single h6 .fa-plus {
background-color: #FFEAE9;
padding: 0px 4px 0px 4px;
color: #F86259;
width: 30px;
height: 30px;
border-radius: 50px;
line-height: 30px;
text-align: center;
position: absolute;
right: 0;
font-family: 'Sailec-Regular';
top: -1px;
margin-right: 0px
}
.faq_sec .faq_single h6 {
font-family: 'Arial';
font-weight: 400;
font-size: 18px;
line-height: 22px;
color: #333333;
letter-spacing: normal;
margin-bottom: 0px;
margin-top: 0px;
cursor: pointer;
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
}
.faq_sec .faq_single p {
font-family: 'Arial';
font-weight: 400;
font-size: 14px;
line-height: 23px;
color: #636363;
padding-top: 18px;
margin: 0px;
}
span.accicon {
position: relative;
float: right;
width: 16px;
height: 16px;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
box-shadow: none;
text-shadow: none;
margin-left: 30px;
margin-right: 0px;
}
span.accicon:before, span.accicon:after {
content: "";
position: absolute;
display: inline-block;
}
span.accicon:before {
width: 14px;
height: 2px;
background: #585757;
}
span.accicon:after {
width: 2px;
height: 14px;
background: #585757;
}
.faq_sec .faq_single h6.in span.accicon:after{
display: none;
}
@media (max-width: 992px){
.main-banner-left-sec{width: 50%;padding-right: 15px;padding-bottom: 40px;padding-top: 40px}
.main-banner-right-sec{width: 50%}
.main-page-text{font-size: 32px;line-height: 42px}
.reward-blocks{margin-left: -10px;margin-right: -10px}
.reward-block-content{padding-left: 10px;padding-right: 10px}
.earnpoint-blocks{margin: 0px -10px}
.earnpoint-block-content{padding: 0px 10px 20px}
.earnpoint-block{padding: 40px 15px 30px}
}
@media (max-width: 768px){
.reward-section,.earnpoint-section{max-width: 100%;margin-left: auto;margin-right: auto;float: none;}
.reward-block-content{width: 100%}
.earnpoint-block-content{width: 50%}
}
@media (max-width: 600px){
.main-banner-left-sec{padding-bottom: 0px;padding-right: 0px;}
.main-banner-left-sec,.main-banner-right-sec{width: 100%;text-align: center;}
.main-banner-left-sec .welcome-text,.main-page-text{text-align: center;display: block;}
.main-banner-left-sec .welcome-text{font-size: 16px;line-height: 17px;margin-bottom: 10px}
.main-page-text{font-size: 32px;line-height: 36px;margin-bottom: 8px}
.main-page-sub-text{font-size: 12px;line-height: 16px}
.main-banner-left-sec{padding-top: 24px}
.main-page-sub-text{margin-bottom: 20px}
.main-banner-right-sec img{max-height: 252px;margin-left: auto;margin-right: auto;}
.main_btn{font-size: 14px;line-height: 16px;min-width: 154px;padding: 12px 15px}
.section-header-main{font-size: 28px;line-height: 42px;margin-bottom: 8px}
.reward-section{padding: 40px 0px 51px 0px}
.section-header-para{margin-bottom: 30px}
.site-container{max-width: 100%;width: 100%}
.reward-block-content{margin-bottom: 16px}
.reward-block{padding: 14px 0px 15px 0px;}
.reward-blocks{margin-bottom: 14px}
.earnpoint-section{padding:40px 0px 50px 0px}
.earnpoint-blocks{margin: 0px -8px}
.earnpoint-block{padding: 43px 12px 40px}
.earnpoint-block-content{padding: 0px 8px 16px}
.earnpoint-btnsec{margin-top: 14px}
.earnpoint-icon img{max-height: 32px;max-width: 32px}
.earnpoints{font-size: 14px;line-height: 21px}
.earnpoint-type{font-size: 12px;line-height: 10.47px}
.reward-section .main_btn,.earnpoint-btnsec .main_btn { font-size: 16px; line-height: 17px; padding: 13px 15px; }
.reward-section .main_btn{min-width: 192px; width: auto;}
.earnpoint-btnsec .main_btn{min-width: 263px;width: auto;}
.faq-section .section-header-main{padding-top: 40px;margin-bottom: 30px}
.faq_sec .faq_single{padding: 0px 0px 24px 0px;margin-bottom: 23px;}
.faq_sec .faq_single h6{font-size: 16px;line-height: 22px}
.faq_sec .faq_single p{font-size: 14px;line-height: 23px}
}
@media (max-width: 375px){
.earnpoint-block-content{width: 100%}
}
.main_btn {
padding: 17px 15px !important;
}
.main-content {
padding-top: 0 !important;
}
footer.site-footer.critical-hidden {
clear: both !important;
}
--></style>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script type="text/javascript">// <![CDATA[
$(".faq_single.active").find("p").slideDown();
$(document).ready(function () {
$(".faq_single > h6").click(function (e) {
//$(".faq_single > h6.in").removeClass("in");
e.preventDefault();
$(this).toggleClass("in");
$(this).parent().addClass("active");
$(this).parent().siblings().removeClass("active");
$(this).siblings("p").slideToggle(500);
$(".faq_single").not(".active").find("p").slideUp();
$(".faq_single").not(".active").find("h6").removeClass("in");
});
$("#headingOne").click(function () {
$(this).find("a").toggleClass("open");
$("#collapseOne").slideToggle();
});
});
// ]]></script>
</div>
</div>
</div>
</div>