Skip to main content
All CollectionsLoyalty Rewards ProgramSetup Program
Setup Loyalty template - 4
Setup Loyalty template - 4
Updated over a week ago

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:


<style><!--
@media screen and (min-width: 750px) { 
    #FeatureRowImage-43246420-ab5b-40ea-807c-25e1df5a4c75 {
      max-width: 545px;
      max-height: 545.0px;
    }
    #FeatureRowImageWrapper-43246420-ab5b-40ea-807c-25e1df5a4c75 {
      max-width: 545px;
      max-height: 545.0px;
    }
   } 
  
  
    
    @media screen and (max-width: 749px) {
      #FeatureRowImage-43246420-ab5b-40ea-807c-25e1df5a4c75 {
        max-width: 750px;
        max-height: 750px;
      }
      #FeatureRowImageWrapper-43246420-ab5b-40ea-807c-25e1df5a4c75 {
        max-width: 750px;
      }
    }
--></style>
<div class="page-width feature-row">
<div class="feature-row">
<div class="feature-row__item">
<div class="feature-row__image-wrapper js" id="FeatureRowImageWrapper-43246420-ab5b-40ea-807c-25e1df5a4c75">
<div style="padding-top: 100.0%;"><img srcset="//cdn.shopify.com/s/files/1/0040/3551/0383/files/loyalty-header-image-mobile-1_180x.png?v=1664174015 180w, //cdn.shopify.com/s/files/1/0040/3551/0383/files/loyalty-header-image-mobile-1_360x.png?v=1664174015 360w, //cdn.shopify.com/s/files/1/0040/3551/0383/files/loyalty-header-image-mobile-1_540x.png?v=1664174015 540w, //cdn.shopify.com/s/files/1/0040/3551/0383/files/loyalty-header-image-mobile-1_720x.png?v=1664174015 720w, //cdn.shopify.com/s/files/1/0040/3551/0383/files/loyalty-header-image-mobile-1_900x.png?v=1664174015 900w, //cdn.shopify.com/s/files/1/0040/3551/0383/files/loyalty-header-image-mobile-1_1080x.png?v=1664174015 1080w, //cdn.shopify.com/s/files/1/0040/3551/0383/files/loyalty-header-image-mobile-1_1296x.png?v=1664174015 1296w, //cdn.shopify.com/s/files/1/0040/3551/0383/files/loyalty-header-image-mobile-1_1512x.png?v=1664174015 1512w, //cdn.shopify.com/s/files/1/0040/3551/0383/files/loyalty-header-image-mobile-1_1728x.png?v=1664174015 1728w, //cdn.shopify.com/s/files/1/0040/3551/0383/files/loyalty-header-image-mobile-1_2048x.png?v=1664174015 2048w" sizes="545px" data-srcset="//cdn.shopify.com/s/files/1/0040/3551/0383/files/loyalty-header-image-mobile-1_180x.png?v=1664174015 180w, //cdn.shopify.com/s/files/1/0040/3551/0383/files/loyalty-header-image-mobile-1_360x.png?v=1664174015 360w, //cdn.shopify.com/s/files/1/0040/3551/0383/files/loyalty-header-image-mobile-1_540x.png?v=1664174015 540w, //cdn.shopify.com/s/files/1/0040/3551/0383/files/loyalty-header-image-mobile-1_720x.png?v=1664174015 720w, //cdn.shopify.com/s/files/1/0040/3551/0383/files/loyalty-header-image-mobile-1_900x.png?v=1664174015 900w, //cdn.shopify.com/s/files/1/0040/3551/0383/files/loyalty-header-image-mobile-1_1080x.png?v=1664174015 1080w, //cdn.shopify.com/s/files/1/0040/3551/0383/files/loyalty-header-image-mobile-1_1296x.png?v=1664174015 1296w, //cdn.shopify.com/s/files/1/0040/3551/0383/files/loyalty-header-image-mobile-1_1512x.png?v=1664174015 1512w, //cdn.shopify.com/s/files/1/0040/3551/0383/files/loyalty-header-image-mobile-1_1728x.png?v=1664174015 1728w, //cdn.shopify.com/s/files/1/0040/3551/0383/files/loyalty-header-image-mobile-1_2048x.png?v=1664174015 2048w" alt="" data-sizes="auto" data-aspectratio="1.0" data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]" src="//cdn.shopify.com/s/files/1/0040/3551/0383/files/loyalty-header-image-mobile-1_200x200.png?v=1664174015" class="feature-row__image lazyautosizes lazyloaded" id="FeatureRowImage-43246420-ab5b-40ea-807c-25e1df5a4c75"></div>
</div>
<noscript>
          <img src="//cdn.shopify.com/s/files/1/0040/3551/0383/files/loyalty-header-image-mobile-1_600x600@2x.png?v=1664174015" class="feature-row__image">
        </noscript></div>
<div class="feature-row__item feature-row__text feature-row__text--left">
<h2 class="h3">Loyalty Rewards</h2>
<div class="rte rte-setting featured-row__subtext">
<p>Join the movement and become a member of our rewards program.</p>
<p>As a member, you will receive rewards every time you shop, and receive early access to product launches.</p>
<div class="cta-group"><a class="btn" href="/account/register">Join Now</a><a class="btn btn--secondary" href="/account/login">Sign In</a></div>
<p>&nbsp;</p>
</div>
</div>
</div>
</div>
<meta charset="utf-8">
<h1 style="text-align: center;" class="SectionHeader__Heading Heading u-h1"></h1>
<div class="SectionHeader__Description Rte">
<p style="text-align: center;">Join the movement and become a member of our rewards program.</p>
<p style="text-align: center;">As a member, you will receive rewards every time you shop, and receive early access to product launches.</p>
<p style="text-align: center;">&nbsp;</p>
<meta charset="utf-8">
<div class="featured-text--header">
<h1 style="text-align: center;" class="SectionHeader__Heading Heading u-h1">How it Works</h1>
<table style="margin-left: auto; margin-right: auto;" width="100%">
<tbody>
<tr>
<td>
<div><meta charset="utf-8"></div>
<div style="text-align: center;" class="number">01</div>
<div style="text-align: center;" class="number"><strong>Join Now</strong></div>
<div style="text-align: center;" class="number"></div>
<p style="text-align: center;" class="u-h3">Sign up and create your account.</p>
</td>
<td>
<div><meta charset="utf-8"></div>
<div style="text-align: center;" class="number">02</div>
<div style="text-align: center;" class="number"><strong>Earn Points</strong></div>
<div style="text-align: center;" class="number"></div>
<p style="text-align: center;" class="u-h3">Earn points every time you shop and/or interact with us.</p>
</td>
<td>
<div><meta charset="utf-8"></div>
<div style="text-align: center;" class="number"></div>
<div style="text-align: center;" class="number"></div>
<div style="text-align: center;" class="number">03</div>
<div style="text-align: center;" class="number"><strong>Redeem Points</strong></div>
<div style="text-align: center;" class="number"></div>
<p style="text-align: center;">Redeem your points for exclusive discounts.</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="featured-text--body">
<div class="column">
<div style="text-align: center;" class="number"></div>
</div>
</div>
</div>
<style type="text/css"><!--
*, *:before, *:after {
    -webkit-box-sizing: border-box!important;
    box-sizing: border-box!important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.colorblock.ait-trigger-refer-a-friend {
    cursor: pointer;
}
th, td {
    border: 0px solid #e8e9eb;
}
.aaa-rewards-grid {
    display: table;
    margin: 0 auto;
    width: 100%;
    max-width: 1100px;
}
.aaa__ContentWrapper {
    padding-left: 24px;
    padding-right: 24px;
}
.aaaFeatureText__Content {
    max-width: 1200px;
    text-align: center;
    padding: 0 30px;
}

.aaa-rewards-grid .colorblock {
    cursor: pointer;
    width: 31.623931623931625%;
    padding: 5px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    height: 313.7px;
    float: left;
    margin-bottom: 2.564102564102564%;
    position: relative;
    z-index: 99;
    color: #f8f3e7;
}
.aaafeatured-text--body {
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
    justify-content: center;
}
h1.aaa-u-h1 {
    font-size: 24px;
}
h2.aaa-u-h2 {
    font-size: 16px;
    padding: 10px;
    text-transform: inherit !important;
}
h2.aaa-u-h2, h1.aaa-u-h1 {
    margin: 10px auto;
}
h3.aaa-head {
    font-size: 28px;
}
.aaa-redeempoint {
    margin-top: 20px;
    border-top: 1px solid;
    padding-top: 30px;
}
@media only screen and (max-width: 768px){
  .aaaFeatureText__Content {
    padding: 0 5px;
}
  .aaa__ContentWrapper {
      padding-left: 0;
      padding-right: 0;
  }
  .aaa-rewards-grid .colorblock {
      height: 152px;
  }
  .aaa-rewards-grid .colorblock {
      width: 48%;
      height: 321.59px;
  }
  .aaa-rewards-grid .colorblock:nth-child(4) {
    clear: none;
}

.aaafeatured-text--body {
    display: flex;
    flex-wrap: wrap;
    column-gap: 10px;
    justify-content: center;
    width: 100%;
}
.aaafeatured-text--body {
    column-gap: 10px;
}
}
--></style>
<section class="Section aaa-rewards-grid aaa-ernpoint">
<div class="aaa__ContentWrapper">
<div class="aaaFeatureText__Content">
<h3 class="aaa-head"></h3>
<h3 class="aaa-head">Earn Loyalty Points</h3>
<div class="aaafeatured-text--body">
<div style="background-color: #bd7a5e;" class="colorblock ait-trigger-wayto-earn-points">
<div class="block-inner">
<h1 class="aaa-u-h1">Create an account</h1>
<div class="aaa-image-wrap"><svg viewBox="0 0 50 50" height="50" width="50" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"> <defs> <clipPath id="clip-path"> <rect opacity="0.5" stroke-width="1" stroke="#707070" fill="#fff" transform="translate(863 789)" height="50" width="50" data-name="Rectangle 176" id="Rectangle_176"></rect> </clipPath> </defs> <g clip-path="url(#clip-path2)" transform="translate(-863 -789)" id="create-acc"> <g transform="translate(-725 -3693)" data-name="Group 193" id="Group_193"> <path opacity="0.3" fill="#fff" transform="translate(1195.641 4377.675)" d="M407.716,123.747l1.465,3.662s-11.23-1.465-6.592-13.916c0,0,5.371-7.568,14.648-2.2,0,0,6.592,8.056,1.465,13.183l-2.2-4.394s.244-8.057-7.324-6.592C409.181,113.494,402.345,115.935,407.716,123.747Z" data-name="Shape 3" id="Shape_3"></path> <path fill="#fff" transform="translate(1596.126 4486.154)" d="M22.461,42.993A.673.673,0,0,1,22,42.7C18.579,37.5,11.081,32.01,7.209,30.357,6.4,30.01,4.947,29.3,4.885,29.273c-.022-.012-.045-.024-.066-.037a1.312,1.312,0,0,1-.534-1.589c.008-.024.017-.048.027-.071l.164-.367c.673-1.572,3.677-2.77,5.27-2.091L12.522,26.3a.682.682,0,0,1,.358.892A.671.671,0,0,1,12,27.56L9.22,26.373a3.635,3.635,0,0,0-3.51,1.386l-.147.33c.232.112,1.475.713,2.171,1.011,3.915,1.671,11.395,7.12,15.075,12.385l12.727-5.049a16,16,0,0,1-.3-3.915,11.791,11.791,0,0,0-.949-5.461l-3.009-7.43a1.294,1.294,0,0,0-1.545-.656,1.162,1.162,0,0,0-.628.635,1.128,1.128,0,0,0-.021.867v0a.685.685,0,0,1-.369.889.672.672,0,0,1-.879-.373l-.695-1.714a1.815,1.815,0,0,0-2.349-1,1.763,1.763,0,0,0-.992,2.3h0a.684.684,0,0,1-.369.889.671.671,0,0,1-.879-.373l-.463-1.144a1.818,1.818,0,0,0-2.35-1,1.763,1.763,0,0,0-.991,2.3.685.685,0,0,1-.337.876.671.671,0,0,1-.882-.3L11.757,10.865c-.572-1.106-1.264-1.5-2.056-1.19a1.365,1.365,0,0,0-.795.744,1.916,1.916,0,0,0,.055,1.46l7.046,15.753a.686.686,0,0,1-.338.9.671.671,0,0,1-.892-.34L7.722,12.419a3.3,3.3,0,0,1-.055-2.536A2.715,2.715,0,0,1,9.21,8.406c1.453-.577,2.852.1,3.742,1.822l4.687,8.907a3.1,3.1,0,0,1,1.613-1.446,3.166,3.166,0,0,1,3.446.755A3.107,3.107,0,0,1,24.3,17.012a3.167,3.167,0,0,1,3.941,1.435,2.454,2.454,0,0,1,1-.742,2.641,2.641,0,0,1,3.286,1.409l3.009,7.43a13.255,13.255,0,0,1,1.049,6,14.489,14.489,0,0,0,.39,4.146.683.683,0,0,1-.408.8L22.8,42.953a.665.665,0,0,1-.341.04ZM8.683,20.353A10.227,10.227,0,0,1,11.556.1a10.27,10.27,0,0,1,6.96,15.834.67.67,0,0,1-.937.185.688.688,0,0,1-.182-.947A8.9,8.9,0,0,0,11.364,1.454,8.863,8.863,0,0,0,8.875,19a.682.682,0,0,1-.1,1.357A.672.672,0,0,1,8.683,20.353ZM6.7,15.205a.666.666,0,0,1-.319-.137A6.187,6.187,0,0,1,4.11,9.358,6.073,6.073,0,1,1,16.129,11.1a.675.675,0,1,1-1.335-.193A4.723,4.723,0,1,0,5.445,9.552a4.814,4.814,0,0,0,1.769,4.441.687.687,0,0,1,.116.957.672.672,0,0,1-.628.255Z" data-name="Shape 1" id="Shape_1"></path> </g> </g></svg></div>
<h2 class="aaa-u-h2">Earn 100 reward points for creating an account</h2>
</div>
</div>
<div style="background-color: #8a705b;" class="colorblock ait-trigger-wayto-earn-points">
<div class="block-inner">
<h1 class="aaa-u-h1">Make a purchase</h1>
<div class="aaa-image-wrap"><svg viewBox="0 0 50 50" height="50" width="50" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"> <defs> <clipPath id="clip-path"> <rect opacity="0.5" stroke-width="1" stroke="#707070" fill="#fff" transform="translate(864 714)" height="50" width="50" data-name="Rectangle 177" id="Rectangle_177"></rect> </clipPath> </defs> <g clip-path="url(#clip-path1)" transform="translate(-864 -714)" id="make-a-purchase"> <g transform="translate(434 479)" data-name="Group 195" id="Group_195"> <path opacity="0.3" fill="#fff" transform="translate(439.43 261.545)" d="M17.421,12.889V.012h2V12.889ZM0,12.889V.012H2.02V12.889ZM26.112,0h4.016V5.432l-4.016.679Z" data-name="Rectangle 1 copy 3" id="Rectangle_1_copy_3"></path> <g transform="translate(434 240.415)" id="basket"> <path fill="#fff" transform="translate(-447.401 -224.692)" d="M486.32,244.211h1.216v8.872H486.32Zm0,0" data-name="Path 53" id="Path_53"></path> <path fill="#fff" transform="translate(-9.811 -224.854)" d="M11.891,259.689V244.211H10.676v15.982l2.6,2.6h25.4v-1.216h-24.9Zm0,0" data-name="Path 54" id="Path_54"></path> <path fill="#fff" transform="translate(-109.746 -157.835)" d="M120.862,174.725a1.574,1.574,0,1,0-1.573-1.574A1.575,1.575,0,0,0,120.862,174.725Zm0-1.931a.358.358,0,1,1-.358.358A.358.358,0,0,1,120.862,172.794Zm0,0" data-name="Path 55" id="Path_55"></path> <path fill="#fff" transform="translate(-89.979 0.001)" d="M101.156,18.783a3.278,3.278,0,0,0,3.242-3.306,3.355,3.355,0,0,0-.087-.761l6.168-10.875,6.168,10.875a3.35,3.35,0,0,0-.087.761,3.242,3.242,0,1,0,6.484,0,3.311,3.311,0,0,0-2.316-3.169L113.745,0l-3.266,1.926L107.212,0l-6.982,12.31a3.314,3.314,0,0,0,.926,6.474Zm18.8-5.407.262.055a2.086,2.086,0,1,1-2.465,2.047,2.124,2.124,0,0,1,.1-.654l.084-.259L111.293,2.849,113.31,1.66Zm-19.215.055.262-.055L107.647,1.66l2.017,1.189-6.645,11.716.084.259a2.12,2.12,0,0,1,.1.653,2.05,2.05,0,1,1-2.465-2.047Zm0,0" data-name="Path 56" id="Path_56"></path> <path fill="#fff" transform="translate(-325.569 -157.835)" d="M355.452,174.725a1.574,1.574,0,1,0-1.573-1.574A1.575,1.575,0,0,0,355.452,174.725Zm0-1.931a.358.358,0,1,1-.358.358A.358.358,0,0,1,355.452,172.794Zm0,0" data-name="Path 57" id="Path_57"></path> <path fill="#fff" transform="translate(-253.418 -240.501)" d="M280.918,261.238h-5.484v13.583h5.484ZM279.7,273.606H276.65V262.454H279.7Zm0,0" data-name="Path 58" id="Path_58"></path> <path fill="#fff" transform="translate(-155.398 -240.502)" d="M168.9,274.822h5.484V261.239H168.9Zm1.216-12.368h3.052v11.152h-3.052Zm0,0" data-name="Path 59" id="Path_59"></path> <path fill="#fff" transform="translate(-57.306 -240.502)" d="M62.359,274.822h5.484V261.239H62.359Zm1.216-12.368h3.053v11.152H63.575Zm0,0" data-name="Path 60" id="Path_60"></path> <path fill="#fff" transform="translate(-190.151 -138.169)" d="M206.652,150.207h8v1.216h-8Zm0,0" data-name="Path 61" id="Path_61"></path> <path fill="#fff" transform="translate(-165.975 -199.343)" d="M180.344,216.711h12.262v1.216H180.344Zm0,0" data-name="Path 62" id="Path_62"></path> <path fill="#fff" transform="translate(-381.717 -138.19)" d="M421.5,155.6h-6.65v1.216h7.866v-6.605h-7.873v1.216H421.5Zm0,0" data-name="Path 63" id="Path_63"></path> <path fill="#fff" transform="translate(0 -138.19)" d="M7.866,155.6H1.216v-1.23H4.741v-1.216H1.216v-1.729H7.873v-1.216H0v6.605H7.866Zm0,0" data-name="Path 64" id="Path_64"></path> <path fill="#fff" transform="translate(-328.407 -316.341)" d="M363.12,343.766a6.288,6.288,0,1,0,6.287,6.287A6.295,6.295,0,0,0,363.12,343.766Zm0,11.36a5.072,5.072,0,1,1,5.072-5.072A5.078,5.078,0,0,1,363.12,355.125Zm0,0" data-name="Path 65" id="Path_65"></path> <path fill="#fff" transform="translate(-345.031 -345.155)" d="M382.149,375.121l-3.207,3.207-1.6-1.6-2.416,2.416,4.02,4.02,5.624-5.624Zm-5.508,4.02.7-.7,1.6,1.6,3.207-3.207.7.7-3.9,3.9Zm0,0" data-name="Path 66" id="Path_66"></path> <path fill="#fff" transform="translate(-351.507 -240.34)" d="M387.453,266.94v-5.7h-5.484v6.65h1.216v-5.435h3.053v4.486Zm0,0" data-name="Path 67" id="Path_67"></path> <path fill="#fff" transform="translate(-184.028 -163.68)" d="M209.068,179.157h-5.027v-1.216h5.027Zm-5.837,0h-1.216v-1.216h1.216Zm-2.026,0h-1.216v-1.216H201.2Zm0,0" data-name="Path 68" id="Path_68"></path> <path fill="#fff" transform="translate(-258.509 -34.734)" d="M285.193,45.71l-2.2-3.8,1.052-.608,2.2,3.8Zm-2.6-4.5-.608-1.052,1.052-.608.608,1.052Zm-1.014-1.754-.609-1.052,1.052-.609.609,1.053Zm0,0" data-name="Path 69" id="Path_69"></path> </g> </g> </g></svg></div>
<h2 class="aaa-u-h2">You will earn 1 reward points for making a purchase per $1 spent</h2>
</div>
</div>
<div style="background-color: #b4a981;" class="colorblock ait-trigger-refer-a-friend">
<div class="block-inner">
<h1 class="aaa-u-h1">Refer a friend</h1>
<div class="aaa-image-wrap"><svg viewBox="0 0 50 50" height="50" width="50" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"> <defs> <clipPath id="clip-path"> <rect opacity="0.5" stroke-width="1" stroke="#707070" fill="#fff" transform="translate(863 866)" height="50" width="50" data-name="Rectangle 175" id="Rectangle_175"></rect> </clipPath> </defs> <g clip-path="url(#clip-path3)" transform="translate(-863 -866)" id="refer"> <g transform="translate(-1005 -4185)" data-name="Group 194" id="Group_194"> <path stroke-width="1" stroke-miterlimit="10" stroke="rgba(0,0,0,0)" fill="#fff" transform="translate(11365 1500)" d="M-9474.856,3597c-5.93,0-17.145-.927-17.145-4.438v-2.4a6.667,6.667,0,0,1,3.507-5.858l6.648-3.6a1.955,1.955,0,0,0,1.026-1.715v-.069a15.343,15.343,0,0,1-2.61-5.353,2.933,2.933,0,0,1-1.117-2.3v-2.958a2.941,2.941,0,0,1,.745-1.942v-3.933a6.618,6.618,0,0,1,1.561-4.826c1.53-1.732,4.015-2.611,7.385-2.611s5.852.878,7.385,2.611a6.551,6.551,0,0,1,1.558,4.826v3.933a2.939,2.939,0,0,1,.746,1.942v2.958a2.913,2.913,0,0,1-1.734,2.675,16.969,16.969,0,0,1-2.2,4.29c-.194.272-.369.5-.536.7v.124a1.942,1.942,0,0,0,1.089,1.749l4.438,2.2a9.87,9.87,0,0,0-.742,1.284l-4.363-2.165a3.412,3.412,0,0,1-1.913-3.071v-.674l.186-.209a9.567,9.567,0,0,0,.624-.8,15.475,15.475,0,0,0,2.113-4.226l.119-.367.369-.112a1.471,1.471,0,0,0,1.063-1.406v-2.958a1.455,1.455,0,0,0-.5-1.089l-.248-.221.007-4.7a5.093,5.093,0,0,0-1.21-3.728c-1.235-1.388-3.337-2.092-6.248-2.092s-5.03.708-6.266,2.106a5.031,5.031,0,0,0-1.2,3.714l.007.1V3567l-.245.219a1.455,1.455,0,0,0-.5,1.091v2.958a1.469,1.469,0,0,0,.69,1.241l.253.162.066.293a13.865,13.865,0,0,0,2.543,5.226l.175.206v.6a3.431,3.431,0,0,1-1.806,3.016l-6.648,3.6a5.176,5.176,0,0,0-2.728,4.557v2.4c0,1,5.525,2.959,15.653,2.959s15.65-1.955,15.65-2.959v-2.251a5.18,5.18,0,0,0-2.739-4.566,9.71,9.71,0,0,1,1.6-.73,6.588,6.588,0,0,1,2.631,5.3v2.251C-9457.715,3596.073-9468.928,3597-9474.856,3597Z" data-name="Subtraction 21" id="Subtraction_21"></path> <g transform="translate(1898.329 5073.526)" data-name="Group 56" id="Group_56"> <path fill="#fff" transform="translate(0 0)" d="M.4,18.026h0L.115,16.562a.214.214,0,0,1,0-.023l0-.013a.049.049,0,0,0,0-.01c-.007-.036-.015-.086-.024-.15a.056.056,0,0,0,0-.011c0-.018,0-.036-.007-.056l0-.027,0-.027c0-.009,0-.02,0-.03,0-.036-.009-.074-.013-.115,0-.007,0-.015,0-.022l0-.019,0-.049c0-.027-.005-.053-.007-.08l0-.036v-.019c0-.044-.007-.089-.01-.137,0-.011,0-.023,0-.034l0-.033,0-.061,0-.043,0-.043c0-.017,0-.034,0-.051V15.4c0-.036,0-.071,0-.109s0-.055,0-.082c0-.056,0-.113,0-.172,0-.031,0-.063,0-.094,0-.049,0-.1,0-.148v-.062c0-.024,0-.048,0-.071l.009-.186c0-.037.005-.076.008-.114,0-.012,0-.025,0-.037s0-.028,0-.041l0-.039c0-.024,0-.049.006-.074,0-.04.008-.082.012-.122.007-.077.014-.139.02-.2,0-.021.005-.042.008-.063l0-.035,0-.035c.009-.066.017-.133.028-.2l.01-.063c0-.025.009-.05.012-.076l.012-.068c.007-.045.015-.091.023-.137s.019-.1.029-.148c.015-.078.029-.147.042-.208s.023-.1.036-.155q.024-.1.05-.21.021-.082.044-.164c.019-.07.039-.14.059-.21.009-.033.02-.066.03-.1l.008-.026.013-.043.019-.061c.016-.052.033-.1.05-.154s.039-.114.06-.171q.038-.108.079-.216c.023-.059.047-.119.071-.178s.059-.143.09-.216l.037-.084.02-.043.024-.053.013-.028.011-.025c.025-.055.05-.11.076-.165s.062-.125.092-.183l.02-.04c.03-.059.06-.118.092-.177s.068-.124.1-.186l.009-.017c.038-.067.076-.134.115-.2l.076-.123.04-.065.036-.055c.037-.059.07-.11.1-.157.045-.069.093-.138.129-.19.061-.087.107-.152.15-.211s.079-.108.142-.189.113-.145.165-.21c.034-.042.069-.084.1-.127l.05-.061c.074-.087.129-.151.181-.209s.112-.124.17-.186.13-.138.2-.2.129-.131.186-.185l.024-.024.024,0A8.534,8.534,0,0,1,6.225,5.631c.043-.018.082-.035.115-.053A12.623,12.623,0,0,1,10.4,4.915V0l8.272,8.231L14.182,12.7v-.012L12.6,14.268l0,.009L10.4,16.46V11.451a7.235,7.235,0,0,0-.867-.05c-.185,0-.37.006-.549.018-2.191.147-5.324,1.19-7.811,5.325L.4,18.024ZM10.529,6.05A10.207,10.207,0,0,0,5.271,7.325l-.012.007-.006,0-.006,0c-.06.036-.113.069-.162.1l-.052.034-.1.066-.06.042-.05.036c-.02.015-.041.031-.056.043l-.012.009-.007.005L4.7,7.721l0,0,0,0A10.185,10.185,0,0,0,3.325,9.084a9.445,9.445,0,0,0-2.159,5.635A12.952,12.952,0,0,1,2.7,13.037,10.961,10.961,0,0,1,5.038,11.4a9.952,9.952,0,0,1,2.216-.839,9.778,9.778,0,0,1,2.315-.281,7.111,7.111,0,0,1,1.538.145l.439.1v3.183L13.3,11.964l.544-.541,3.208-3.192-5.5-5.477v3.32l-.591-.017C10.826,6.053,10.682,6.05,10.529,6.05Z" data-name="Subtraction 2" id="Subtraction_2"></path> <path opacity="0.3" fill="#fff" transform="translate(-709.171 -137.567)" d="M710.187,153.2s1.551-10.217,15.376-6.373l.809-1.163L720.556,140v3.237S710.035,142.276,710.187,153.2Z" data-name="Shape 5" id="Shape_5"></path> </g> </g> </g></svg></div>
<h2 class="aaa-u-h2">Earn 50 reward points for referring a friend</h2>
</div>
</div>
<div style="background-color: #253d4d;" class="colorblock ait-trigger-wayto-earn-points">
<div class="block-inner">
<h1 class="aaa-u-h1">Leave a review for us!</h1>
<div class="aaa-image-wrap"><svg viewBox="0 0 50 50" height="50" width="50" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"> <defs> <clipPath id="clip-path"> <rect opacity="0.5" stroke-width="1" stroke="#707070" fill="#fff" transform="translate(861 1250)" height="50" width="50" data-name="Rectangle 179" id="Rectangle_179"></rect> </clipPath> </defs> <g clip-path="url(#clip-path8)" transform="translate(-861 -1250)" id="review"> <g transform="translate(-8321 176.306)" data-name="Group 150" id="Group_150"> <path opacity="0.3" fill="#fff" transform="translate(0.625 0.087)" d="M9205.105,1076.25l-2.121,3.453-3.984,1.328,2.656,3.453v4.25l3.449-2.125,3.988,2.125v-4.25l2.922-3.453-4.781-1.328Z" data-name="Path 93" id="Path_93"></path> <g transform="translate(9189 1074.854)" data-name="rating (10)" id="rating_10_"> <path fill="#fff" transform="translate(-89.339 0.001)" d="M98.153,5.77a.764.764,0,0,0,.194.782l3.344,3.267-.79,4.6a.764.764,0,0,0,1.108.805l4.135-2.177,4.135,2.173a.764.764,0,0,0,1.109-.805l-.79-4.6,3.344-3.261a.764.764,0,0,0-.422-1.3l-4.625-.68L106.833.391a.8.8,0,0,0-1.37,0L103.4,4.579l-4.623.672a.764.764,0,0,0-.619.519Zm5.857.261a.764.764,0,0,0,.575-.418l1.56-3.159,1.56,3.163a.764.764,0,0,0,.575.418l3.489.507L109.249,9a.764.764,0,0,0-.22.676l.6,3.474-3.12-1.64a.764.764,0,0,0-.71,0l-3.124,1.638.6-3.474a.763.763,0,0,0-.22-.676l-2.521-2.461Zm0,0" data-name="Path 89" id="Path_89"></path> <path fill="#fff" transform="translate(0.001 -77.756)" d="M8.632,89.265a.765.765,0,0,0-.39-1.2l-2.025-.6L5.026,85.726a.764.764,0,0,0-1.26,0L2.572,87.469l-2.025.6a.764.764,0,0,0-.516.949.774.774,0,0,0,.127.25l1.287,1.673-.058,2.11a.764.764,0,0,0,1.019.741l1.986-.707,1.986.707a.764.764,0,0,0,1.02-.741l-.052-2.11Zm-2.664.955a.771.771,0,0,0-.158.487l.034,1.268-1.192-.427a.766.766,0,0,0-.512,0l-1.195.425.034-1.265a.769.769,0,0,0-.158-.487l-.773-1,1.215-.359a.758.758,0,0,0,.414-.3l.717-1.047.717,1.047a.764.764,0,0,0,.414.3l1.216.359Zm0,0" data-name="Path 90" id="Path_90"></path> <path fill="#fff" transform="translate(-256.602 -77.756)" d="M290.056,88.066l-2.024-.6-1.194-1.743a.764.764,0,0,0-1.26,0l-1.194,1.743-2.025.6a.764.764,0,0,0-.389,1.2l1.287,1.673-.058,2.11a.764.764,0,0,0,1.019.741l1.986-.707,1.986.707a.764.764,0,0,0,1.02-.741l-.052-2.11,1.285-1.673a.763.763,0,0,0-.39-1.2h0Zm-2.274,2.154a.769.769,0,0,0-.158.487l.035,1.268-1.2-.427a.765.765,0,0,0-.512,0l-1.195.425.034-1.265a.769.769,0,0,0-.158-.487l-.773-1,1.215-.359a.759.759,0,0,0,.414-.3l.717-1.047.717,1.047a.763.763,0,0,0,.414.3l1.216.359Zm0,0" data-name="Path 91" id="Path_91"></path> <path fill="#fff" transform="translate(-86.508 -162.936)" d="M117.228,185.06a3.08,3.08,0,0,0-2.267.836c-.066.063-.129.129-.189.2a3.057,3.057,0,0,0-4.584,0,3.051,3.051,0,0,0-3.82-.627V182.13a3.123,3.123,0,0,0-2.893-3.182,3.056,3.056,0,0,0-3.213,2.889q0,.081,0,.162v5.679l-2.323,1.394a3.839,3.839,0,0,0-1.763,2.444L95.1,196.354a3.831,3.831,0,0,0,.056,1.878L98,208.181a.763.763,0,0,0,.734.557h19.1a.764.764,0,0,0,.71-.48l1.309-3.273a3.8,3.8,0,0,0,.274-1.419V188.241a3.124,3.124,0,0,0-2.893-3.182Zm1.365,18.505a2.273,2.273,0,0,1-.164.852l-1.117,2.793H99.306l-2.684-9.4a2.3,2.3,0,0,1-.034-1.127l1.072-4.832a2.3,2.3,0,0,1,1.059-1.468l1.539-.926v2.471a.764.764,0,0,0,1.528,0V182a1.528,1.528,0,0,1,1.526-1.53l.086,0a1.618,1.618,0,0,1,1.445,1.658v9.8a.764.764,0,1,0,1.528,0v-3.82a1.528,1.528,0,0,1,3.056,0v3.82a.764.764,0,0,0,1.528,0v-3.82a1.528,1.528,0,1,1,3.055,0v3.82a.764.764,0,0,0,1.528,0v-3.82a1.528,1.528,0,0,1,1.526-1.53l.085,0a1.618,1.618,0,0,1,1.445,1.658Zm0,0" data-name="Path 92" id="Path_92"></path> </g> </g> </g></svg></div>
<h2 class="aaa-u-h2">Earn 1 reward points for giving a review.</h2>
</div>
</div>
<div style="background-color: #c19560;" class="colorblock ait-trigger-wayto-earn-points">
<div class="block-inner">
<h1 class="aaa-u-h1">Allow a push</h1>
<div class="aaa-image-wrap"><svg viewBox="0 0 50 50" height="50" width="50" xmlns="http://www.w3.org/2000/svg"> <g transform="translate(-1203 -898)" id="push"> <g data-name="Group 269" id="Group_269"> <path opacity="0.33" fill="#fff" transform="translate(-10504 -578)" d="M11733,1485c-8.415,2.829-15.864,21.7-4.9,26.828s12.024-2.122,20.334,3.183c.531,2.122-2.3,2.829-2.3,2.829l-30.058-1.089s-3.006-1.032,0-2.8,3.484-11.852,2.424-16.449S11728.58,1481.994,11733,1485Z" data-name="Path 140" id="Path_140"></path> <g transform="translate(1156.933 901.001)" data-name="notification (1)" id="notification_1_"> <g transform="translate(53.848 0)" data-name="Group 268" id="Group_268"> <g transform="translate(0 0)" data-name="Group 267" id="Group_267"> <path fill="#fff" transform="translate(-53.848 0)" d="M87.278,32.486a4.5,4.5,0,0,1-1.464-3.308V20.623a.859.859,0,0,0-1.719,0v8.555a6.218,6.218,0,0,0,2.023,4.576,2.234,2.234,0,0,1-1.507,3.883H57.8a2.234,2.234,0,0,1-1.507-3.883,6.218,6.218,0,0,0,2.023-4.576v-9.93A12.892,12.892,0,0,1,76.83,7.649a6.365,6.365,0,1,0,1.129-1.355,14.571,14.571,0,0,0-4.074-1.4,3.179,3.179,0,1,0-5.358,0A14.632,14.632,0,0,0,56.6,19.248v9.93a4.5,4.5,0,0,1-1.464,3.308,3.952,3.952,0,0,0,2.667,6.87h7.973a5.5,5.5,0,0,0,10.864,0h7.973a3.952,3.952,0,0,0,2.667-6.87ZM82.231,6.359A4.64,4.64,0,1,1,77.591,11,4.646,4.646,0,0,1,82.231,6.359ZM71.206,1.719a1.461,1.461,0,1,1-1.461,1.461A1.462,1.462,0,0,1,71.206,1.719Zm0,40.559a3.787,3.787,0,0,1-3.681-2.922h7.363A3.787,3.787,0,0,1,71.206,42.278Z" data-name="Path 141" id="Path_141"></path> </g> </g> </g> </g> <rect opacity="0.5" fill="none" transform="translate(1203 898)" height="50" width="50" data-name="Rectangle 187" id="Rectangle_187"></rect> </g></svg></div>
<h2 class="aaa-u-h2">Earn 20 reward points when you allow web push notifications.</h2>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="Section aaa-rewards-grid aaa-redeempoint">
<div class="aaa__ContentWrapper">
<div class="aaaFeatureText__Content">
<h3 class="aaa-head">Redeem Points</h3>
<meta charset="utf-8">
<p><span>Once you’ve earned some points, you can redeem them with any purchase. All you need to do is apply the points you’d like to use at checkout.</span><br><br><span>Here’s what you get...</span><br><br><span>200 points = $10</span><br><span>300 points = $15</span><br><span>400 points = $20</span><br><span>500 points = $25</span></p>
<div class="cta-group"><a class="btn" href="/account/register">Join Now</a><a class="btn btn--secondary" href="/account/login">Sign In</a></div>
<p>&nbsp;</p>
<p><span>&nbsp;</span></p>
</div>
</div>
</section>


Related Articles
Setup Loyalty template - 1
Setup Loyalty template - 2
Setup Loyalty template - 3
Setup Loyalty template - 5
Setup Loyalty template - 6
Did this answer your question?