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
For this template follow the below steps -:
Step 1: Create page Template and add the code below -:
{{ 'loyalty.css' | asset_url | stylesheet_tag }}
{% section 'banner' %}
{% section 'how-its-works' %}
{% section 'earn-points' %}
{% section 'refer-friend' %}
{% section 'vip-section' %}
{% section 'redeem' %}
{% section 'faq-section' %}
Step 2: Create all sections like ‘banner’ , ‘how-its-works’ etc and put all the code.
banner.liquid
<section class="banner" style="background-image:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)),url({{ section.settings.banner | img_url:'original' }})">
{% if section.settings.mobile-banner != blank %}
<div class="banner-img">
<img src="{{ section.settings.mobile-banner | img_url:'original' }}">
</div>
{% endif %}
<div class="page-width">
<div class="icon">
<img src="{{ section.settings.icon-image | img_url:'original'}}">
</div>
{% if section.settings.heading != blank %}
<h2>{{ section.settings.heading }}</h2>
{% endif %}
{% if section.settings.para != blank %}
<p>{{ section.settings.para }}</p>
{% endif %}
<div class="btns">
{% if section.settings.btn1 != blank %}
<a href="{{ section.settings.url1 }}">{{ section.settings.btn1 }}</a>
{% endif %}
{% if section.settings.btn2 != blank %}
<a href="{{ section.settings.url2 }}">{{ section.settings.btn2 }}</a>
{% endif %}
</div>
</div>
</section>
{% schema %}
{
"name": {
"de": "banner",
"en": "banner",
"es": "banner",
"fr": "banner",
"it": "banner",
"ja": "banner",
"pt-BR": "banner"
},
"class": "index-section",
"settings": [
{
"type":"image_picker",
"id":"banner",
"label":"banner"
},
{
"type":"image_picker",
"id":"mobile-banner",
"label":"mobile banner"
},
{
"type":"image_picker",
"id":"icon-image",
"label":"image"
},
{
"type":"text",
"id":"heading",
"label":"heading"
},
{
"type":"text",
"id":"para",
"label":"para"
},
{
"type":"url",
"id":"url1",
"label":"url1"
},
{
"type":"text",
"id":"btn1",
"label":"btn1"
},
{
"type":"url",
"id":"url2",
"label":"url2"
},
{
"type":"text",
"id":"btn2",
"label":"btn2"
}
],
"presets": [
{
"name": {
"de": "banner",
"en": "banner",
"es": "banner",
"fr": "banner",
"it": "banner",
"ja": "banner",
"pt-BR": "banner"
}
}
]
}
{% endschema %}
2. how-its-works.liquid
<div class="how-its-works">
<div class="page-width">
{% if section.settings.title != blank %}
<h2>{{ section.settings.title }}</h2>
{% endif %}
<div class="image-block">
{% for block in section.blocks %}
<div class="image">
{% if block.settings.image != blank %}
<div class="icon-imag"><img src="{{ block.settings.image | img_url:'original' }}"></div>
{% endif %}
{% if block.settings.heading != blank %}
<h3>{{ block.settings.heading}}</h3>
{% endif %}
{% if block.settings.para != blank %}
<p>{{ block.settings.para}}</p>
{% endif %}
</div>
{% endfor%}
</div>
</div>
</div>
{% schema %}
{
"name": "works",
"settings": [
{
"type": "text",
"id": "title",
"label": "title"
}
],
"blocks": [
{
"type": "works",
"name": "works",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "text",
"id": "heading",
"label": "heading"
},
{
"type": "text",
"id": "para",
"label": "para"
}
]
}
],
"presets": [
{
"name": "works"
}
]
}
{% endschema %}
3. earn-points.liquid
<div class="earn-points">
<div class="page-width">
{% if section.settings.title != blank %}
<h2>{{ section.settings.title }}</h2>
{% endif %}
<div class="image-block">
{% for block in section.blocks %}
<div class="image">
{% if block.settings.image != blank %}
<div class="icon-imag"><img src="{{ block.settings.image | img_url:'original' }}"></div>
{% endif %}
{% if block.settings.heading != blank %}
<h3>{{ block.settings.heading}}</h3>
{% endif %}
{% if block.settings.para != blank %}
<p>{{ block.settings.para}}</p>
{% endif %}
<div class="hover-content">
<div class="item-center">
{% if block.settings.url-text != blank %}
<div class="btn-section"><a href="{{ block.settings.url}}">{{ block.settings.url-text}}</a></div>
{% endif %}
{% if block.settings.rich-text != blank %}
{{ block.settings.rich-text}}
{% endif %}
</div>
</div>
</div>
{% endfor%}
</div>
</div>
</div>
{% schema %}
{
"name": "earn-points",
"settings": [
{
"type": "text",
"id": "title",
"label": "title"
}
],
"blocks": [
{
"type": "earn-points",
"name": "earn-points",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "text",
"id": "heading",
"label": "heading"
},
{
"type": "text",
"id": "para",
"label": "para"
},
{
"type": "url",
"id": "url",
"label": "url"
},
{
"type": "text",
"id": "url-text",
"label": "hover text"
},
{
"type": "richtext",
"id": "rich-text",
"label": "hover richtext"
}
]
}
],
"presets": [
{
"name": "earn-points"
}
]
}
{% endschema %}
4. refer-friend.liquid
<div class="newsletter-section{% if section.settings.show_background %} index-section--newsletter-background{% endif %}">
<div class="page-width">
<div class="section-header text-center" style="text-align:center;">
{% if section.settings.sub_title != blank %}
<h4 class="h2">{{ section.settings.sub_title | escape }}</h4>
{% endif %}
{% if section.settings.section_title != blank %}
<h2 class="h2">{{ section.settings.section_title | escape }}</h2>
{% endif %}
{% if section.settings.subheading != blank %}
<div class="rte">{{ section.settings.subheading }}</div>
{% endif %}
</div>
<div class="form-section">
{% if section.settings.email-text != blank %}
<div class="text">{{ section.settings.email-text }}</div>
{% endif %}
{%- assign formId = 'Contact_' | append: section.id -%}
{% form 'customer', id: formId, novalidate: 'novalidate' %}
<div class="input-group password__input-group{% if form.errors %} input-group--error{% endif %}">
{% include 'form-status', form_id: formId, success_message: 'general.newsletter_form.confirmation' %}
<input type="hidden" name="contact[tags]" value="newsletter">
<input type="email"
name="contact[email]"
id="{{ formId }}-email"
class="input-group__field newsletter__input{% if form.errors %} input--error{% endif %}"
value="{% if customer %}{{ customer.email }}{% endif %}"
placeholder="email"
aria-label="email"
aria-required="true"
autocorrect="off"
autocapitalize="off"
{% if form.errors %} aria-invalid="true" aria-describedby="{{ formId }}-email-error"{% endif %}>
<span class="input-group__btn">
<button type="submit" class="btn newsletter__submit" name="commit" id="Subscribe">
<span class="newsletter__submit-text--large">Next</span>
</button>
</span>
<span id="{{ formId }}-email-error" class="input-error-message">{% include 'icon-error' %} {{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}.</span>
</div>
{% endform %}
<div class="share-link">
<ul>
<li> <a href="#"><img src="https://cdn.shopify.com/s/files/1/0040/3551/0383/files/link.png"><span>Copy Link</span></a></li>
<li> <a href="#"><img src="https://cdn.shopify.com/s/files/1/0040/3551/0383/files/twitter.png"><span>Twitter</span></a></li>
<li><a href="#"> <img src="https://cdn.shopify.com/s/files/1/0040/3551/0383/files/facebook.png"><span>Facebook</span></a></li>
<li> <a href="#"><img src="https://cdn.shopify.com/s/files/1/0040/3551/0383/files/messenger.png"><span>Messenger</span></a></li>
<li> <a href="#"><img src="https://cdn.shopify.com/s/files/1/0040/3551/0383/files/whatsapp.png"><span>WhatsApp</span></a></li>
</ul>
</div>
</div>
</div>
</div>
{% schema %}
{
"name": {
"de": "Newsletter",
"en": "Newsletter",
"es": "Boletín",
"fr": "Newsletter",
"it": "Newsletter",
"ja": "ニュースレター",
"pt-BR": "Newsletter"
},
"class": "index-section index-section--flush",
"settings": [
{
"type": "text",
"id": "sub_title",
"label": "sub title"
},
{
"type": "text",
"id": "section_title",
"label": {
"de": "Titel",
"en": "Heading",
"es": "Título",
"fr": "En-tête",
"it": "Heading",
"ja": "見出し",
"pt-BR": "Título"
},
"default": {
"de": "Unseren Newsletter abonnieren",
"en": "Subscribe to our newsletter",
"es": "Suscríbete a nuestro boletín de noticias",
"fr": "S'inscrire à la newsletter",
"it": "Iscriviti alla nostra newsletter",
"ja": "ストアからのお知らせを受け取る",
"pt-BR": "Assine a nossa newsletter"
}
},
{
"type": "richtext",
"id": "subheading",
"label": {
"de": "Unter-Überschrift",
"en": "Subheading",
"es": "Subtítulo",
"fr": "Sous-titre",
"it": "Sottotitolo",
"ja": "小見出し",
"pt-BR": "Subtítulo"
},
"default": {
"de": "<p>Eine kurze Beschreibung zum Inhalt des Newsletters</p>",
"en": "<p>A short sentence describing what someone will receive by subscribing</p>",
"es": "<p>Una frase corta que describe lo que las personas recibirán al suscribirse</p>",
"fr": "<p>Petite phrase qui décrit ce qu'on reçoit en s'inscrivant</p>",
"it": "<p>Una breve frase che descrive ciò che qualcuno riceverà effettuando l'iscrizione</p>",
"ja": "<p>購読している人が何を受け取ることができるかについて説明する短い文章</p>",
"pt-BR": "<p>Uma frase curta que descreva o que alguém receberá ao assinar</p>"
}
},
{
"type": "text",
"id": "email-text",
"label": "text"
},
{
"id": "show_background",
"type": "checkbox",
"label": {
"de": "Hintergrund anzeigen",
"en": "Show background",
"es": "Mostrar fondo",
"fr": "Afficher l'arrière-plan",
"it": "Mostra sfondo",
"ja": "背景を表示する",
"pt-BR": "Exibir plano de fundo"
},
"default": true
},
{
"type": "paragraph",
"content": {
"de": "Alle Kunden, die sich eintragen, bekommen ein Konto in Shopify. [Kunden ansehen](/admin/customers?query=&accepts_marketing=1)",
"en": "Any customers who sign up will have an account created for them in Shopify. [View customers](/admin/customers?query=&accepts_marketing=1)",
"es": "Todos los clientes que se registren tendrán una cuenta creada para ellos en Shopify. [Ver clientes](/admin/customers?query=&accepts_marketing=1)",
"fr": "Tous les clients qui s'inscrivent auront un compte créé pour eux sur Shopify. [Voir les clients](/admin/customers?query=&accepts_marketing=1)",
"it": "Qualsiasi cliente che si iscrive avrà un account creato appositamente su Shopify. [Visualizza clienti](/admin/customers?query=&accepts_marketing=1)",
"ja": "サインアップしたお客様は、Shopifyでアカウントが作成されます。[お客様を表示](/admin/customers?query=&accepts_marketing=1)",
"pt-BR": "Todos os clientes que se inscreverem terão uma conta criada para eles na Shopify. [View customers](/admin/customers?query=&accepts_marketing=1)"
}
}
],
"presets": [
{
"name": {
"de": "Newsletter",
"en": "Newsletter",
"es": "Boletín",
"fr": "Newsletter",
"it": "Newsletter",
"ja": "ニュースレター",
"pt-BR": "Newsletter"
},
"category": {
"de": "Promotional",
"en": "Promotional",
"es": "Promocional",
"fr": "Promotionnel",
"it": "Promozionale",
"ja": "プロモーション用",
"pt-BR": "Promocional"
}
}
]
}
{% endschema %}
5. vip-section.liquid
<div class="earn-points vip-section">
<div class="page-width">
{% if section.settings.title != blank %}
<h2>{{ section.settings.title }}</h2>
{% endif %}
<div class="image-block">
{% for block in section.blocks %}
<div class="image">
<div class="center-item">
{% if block.settings.image != blank %}
<img src="{{ block.settings.image | img_url:'original' }}">
{% endif %}
{% if block.settings.heading != blank %}
<h3>{{ block.settings.heading}}</h3>
{% endif %}
{% if block.settings.para != blank %}
<p>{{ block.settings.para}}</p>
{% endif %}
<div class="richtext">
{% if block.settings.richtext != blank %}
{{ block.settings.richtext }}
{% endif %}
</div>
</div>
</div>
{% endfor%}
</div>
</div>
</div>
{% schema %}
{
"name": "vip-section",
"settings": [
{
"type": "text",
"id": "title",
"label": "title"
}
],
"blocks": [
{
"type": "vip-section",
"name": "vip-section",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "image"
},
{
"type": "text",
"id": "heading",
"label": "heading"
},
{
"type": "text",
"id": "para",
"label": "para"
},
{
"type": "richtext",
"id": "richtext",
"label": "richtext"
}
]
}
],
"presets": [
{
"name": "vip-section"
}
]
}
{% endschema %}
6. redeem.liquid
<div class="earn-points redeem">
<div class="page-width">
{% if section.settings.title != blank %}
<h2>{{ section.settings.title }}</h2>
{% endif %}
{% if section.settings.para != blank %}
<p>{{ section.settings.para }}</p>
{% endif %}
{% if section.settings.sub-title != blank %}
<h4>{{ section.settings.sub-title }}</h4>
{% endif %}
<div class="image-block">
{% for block in section.blocks %}
<div class="image">
{% if block.settings.heading != blank %}
<h3>{{ block.settings.heading}}</h3>
{% endif %}
{% if block.settings.para != blank %}
<p>{{ block.settings.para}}</p>
{% endif %}
</div>
{% endfor%}
</div>
</div>
</div>
{% schema %}
{
"name": "redeem",
"settings": [
{
"type": "text",
"id": "title",
"label": "title"
},
{
"type": "text",
"id": "para",
"label": "para"
},
{
"type": "text",
"id": "sub-title",
"label": "sub title"
}
],
"blocks": [
{
"type": "redeem",
"name": "redeem",
"settings": [
{
"type": "text",
"id": "heading",
"label": "heading"
},
{
"type": "text",
"id": "para",
"label": "para"
}
]
}
],
"presets": [
{
"name": "redeem"
}
]
}
{% endschema %}
7. faq-section.liquid
<div class="faq-section">
<div class="page-width">
{% if section.settings.title != blank %}
<h2>{{ section.settings.title }}</h2>
{% endif %}
<div class="rich-text">
{%if section.settings.rich-text != blank %}
{{ section.settings.rich-text }}
{% endif %}
</div>
<div class="rich-text two">
{% if section.settings.text2 != blank %}
<h3>{{ section.settings.text2 }}</h3>
{% endif %}
{%if section.settings.rich-text2 != blank %}
{{ section.settings.rich-text2 }}
{% endif %}
</div>
</div>
</div>
{% schema %}
{
"name": "faq",
"settings": [
{
"type": "text",
"id": "title",
"label": "title"
},
{
"type": "richtext",
"id": "rich-text",
"label": "richtext"
},
{
"type": "text",
"id": "text2",
"label": "text"
},
{
"type": "richtext",
"id": "rich-text2",
"label": "richtext2"
}
],
"presets": [
{
"name": "faq"
}
]
}
{% endschema %}
Step 3: Create the asset file and add the CSS
CSS Code:
main#MainContent {
padding-top: 0;
}
.banner-img {
display: none;
}
.how-its-works .image .icon-imag {
max-width: 100%;
}
main#MainContent div#shopify-section-banner {
padding: 0 !important;
}
.share-link ul li a img {
max-width: 20px;
vertical-align: middle;
margin-right: 6px;
}
.image-block .icon-imag img {
max-height: 40px;
}
section.banner {
background-repeat: no-repeat;
background-size: cover;
background-position: top;
position: relative;
min-height: 60rem;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
/* .page-width .icon {
width: 100%;
height: 100%;
} */
section.banner h2 {
font-size: 110px;
color: #fff;
letter-spacing: normal;
line-height: normal;
margin-bottom: 0;
}
section.banner p {
font-size: 27px;
color: #fff;
line-height: 35px;
}
.btns {
margin-top: 50px;
}
.btns a {
background: #000;
color: #fff;
padding: 10px 30px;
font-size: 15px;
font-weight: 400;
text-align: center;
min-width: 150px;
display: inline-block;
line-height: 28px;
margin-right: 11px;
}
.btns a:last-child {
margin-right: 0;
}
.btns a:hover {
color: #fff;
}
.how-its-works {
background: #fff8f8;
padding: 60px 0 80px;
text-align: center;
}
.how-its-works h2, .earn-points h2 {
font-size: 35px;
letter-spacing: normal;
margin-bottom: 40px;
}
.image-block .icon-imag {
max-width: 50px;
margin: auto;
}
.image-block {
display: flex;
align-items: center;
justify-content: center;
max-width: 1000px;
margin: auto;
}
.image-block h3 {
font-size: 20px;
color: #000;
letter-spacing: normal;
margin: 10px auto;
}
.image-block .image {
flex: 0 0 33%;
text-align: center;
}
.image-block p {
font-size: 16px;
max-width: 165px;
font-weight: 400;
margin: auto;
}
.earn-points {
text-align: center;
margin-top: 70px;
}
.earn-points .image-block {
flex-wrap: wrap;
justify-content: start;
max-width: 100%;
}
.earn-points .image-block .image h3 {
color: #fff;
}
.earn-points .image-block .image p {
color: #fff;
}
.earn-points .image-block .image {
background: #000;
flex: 0 0 23%;
margin: 0 8px;
margin-bottom: 14px;
padding: 80px 20px;
position: relative;
}
.earn-points .image-block .image .hover-content {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
text-align: center;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
background: #000;
opacity: 0;
visibility: hidden;
}
.earn-points .image-block .image:hover .hover-content {
opacity: 1;
visibility: visible;
}
.earn-points .image-block .image .hover-content .btn-section a {
background: #fff;
padding: 10px 20px;
text-transform: uppercase;
font-weight: 600;
display: block;
}
.item-center p {
margin-top: 5px;
}
.item-center p a {
color: #fff;
}
.item-center p a:hover {
color: #fff;
}
.faqq-section {
text-align: center;
margin-top: 60px;
}
.rich-text p {
margin-bottom: 12px;
}
.rich-text.two h3 {
font-size: 1.6em;
text-transform: uppercase;
letter-spacing: .1em;
margin-top: 60px;
}
.faq-section {
text-align: center;
margin-top: 50px;
margin-bottom: 50px;
}
.earn-points.redeem {
background: #fff8f8;
padding-top: 150px;
padding-bottom: 40px;
margin-bottom: 100px;
}
.earn-points.redeem h2 {
margin-bottom: 10px;
}
.earn-points.redeem p {
font-size: 20px;
}
.earn-points.redeem h4 {
display: inline-block;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
padding: 15px 0;
margin-bottom:10px;
margin-top: 10px;
}
.earn-points.redeem .image {
background: transparent;
}
.earn-points.redeem .image h3 {
color: #000;
font-size: 20px;
}
.earn-points.redeem .image p {
color: #000;
}
.earn-points.vip-section .image-block {
justify-content: space-between;
align-items: start;
max-width: 100%;
}
.earn-points.vip-section .image-block .image {
background: #FFF8F8;
min-height: 410px;
flex: 0 0 32%;
margin: 0;
}
.earn-points.vip-section .image-block .image img {
max-width: 60px;
}
.earn-points.vip-section .image-block .image h3 {
color: #000;
margin: auto;
font-size: 23px;
font-weight: 500;
}
.earn-points.vip-section .image-block .image h3 + p {
color: #000;
font-size: 20px;
margin-top: 2px;
}
.earn-points.vip-section .image-block .richtext {
border-top: 1px solid #fff;
padding-top: 20px;
text-align: left;
margin-top: 20px;
padding-left: 30px;
padding-right: 30px;
}
.earn-points.vip-section .image-block .richtext p {
margin: 0;
max-width: 100%;
font-size: 18px;
position: relative;
padding-left: 25px;
margin-bottom: 10px;
}
.earn-points.vip-section .image-block .richtext p::before {
display: block;
content: "\f00c";
color: #fff;
position: absolute;
left: 0;
top: 7px;
font: normal normal normal 14px/1 FontAwesome;
}
.earn-points.vip-section .image-block .image:first-child p {
color: #000;
}
.earn-points.vip-section .image-block .image:last-child {
background: #000;
}
.earn-points.vip-section .image-block .image:nth-child(2) {
background: #B65963;
}
.earn-points.vip-section .image-block .image:last-child p, .earn-points.vip-section .image-block .image:last-child h3, .earn-points.vip-section .image-block .image:nth-child(2) h3, .earn-points.vip-section .image-block .image:nth-child(2) p {
color: #fff;
}
div#shopify-section-refer-friend .newsletter-section {
background: #000;
margin-top: 60px;
padding-top: 40px;
}
div#shopify-section-refer-friend .newsletter-section h4.h2 {
color: #fff;
font-size: 20px;
letter-spacing: normal;
}
div#shopify-section-refer-friend .newsletter-section h2.h2 {
/* margin-top: 130px; */
color: #fff;
font-size: 50px;
}
div#shopify-section-refer-friend .newsletter-section .rte p {
color: #fff;
font-size: 18px;
margin-top: 30px;
}
div#shopify-section-refer-friend .newsletter-section .rte p {
color: #fff;
font-size: 18px;
max-width: 780px;
margin: auto;
}
div#shopify-section-refer-friend .newsletter-section .section-header.text-center {
margin-bottom: 0;
}
.form-section {
max-width: 720px;
margin: auto;
text-align: left;
}
.form-section .text {
color: #fff;
letter-spacing: 2px;
font-size: 12px;
margin-bottom: 10px;
margin-top: 30px;
}
.form-section .input-group.password__input-group {
max-width: 100%;
display: block;
margin-bottom: 40px;
}
.form-section .input-group.password__input-group input#Contact_refer-friend-email {
width: 100%;
min-height: 50px;
}
.form-section .input-group.password__input-group button#Subscribe {
background: #fff;
color: #000;
font-size: 20px;
letter-spacing: normal;
max-width: 400px;
margin: 50px auto 0;
display: block;
padding: 15px 100px;
}
.share-link ul {
display: flex;
margin-bottom:20px;
align-items: center;
justify-content: center;
}
.share-link ul li a {
color: #fff;
padding: 0 20px;
}
.share-link ul li a:hover {
color: #fff;
}
@media screen and (min-width:768px) and (max-width:1024px) {
section.banner h2 {
font-size: 80px;
}
section.banner p {
font-size: 20px;
line-height: 27px;
}
.btns {
margin-top: 20px;
}
.image-block .icon-imag img {
max-height: 40px;
}
.earn-points .image-block .image {
flex: 0 0 22%;
padding: 50px 10px;
}
section.banner {
min-height: 30rem;
}
div#shopify-section-refer-friend .newsletter-section .page-width, .earn-points.redeem .page-width {
padding: 0 20px;
}
.earn-points.redeem .image h3 {
font-size: 16px;
}
.earn-points.redeem p {
font-size: 16px;
}
.earn-points.vip-section .image-block .image {
min-height: auto;
}
.earn-points.redeem {
padding-top: 100px;
padding-bottom: 20px;
}
.earn-points .image-block {
padding: 0 20px;
justify-content: center;
}
.form-section .input-group.password__input-group button#Subscribe {
margin: 20px auto 0;
}
div#shopify-section-refer-friend .newsletter-section h2.h2 {
margin-top: 50px;
font-size: 40px;
}
}
@media (max-width:767px) {
section.banner {
background-image: none !important;
display: block;
text-align: center;
}
.banner-img {
display: block;
}
.image-block {
display: block;
}
.form-section .input-group.password__input-group button#Subscribe {
font-size: 18px;
max-width: 80%;
margin: 10px auto 0;
}
.share-link ul {
flex-wrap: wrap;
}
.share-link ul li {
flex: 0 0 50%;
margin-bottom: 10px;
text-align: center;
}
.earn-points.vip-section .image-block .richtext {
padding-left: 10px;
padding-right: 10px;
margin-top: 10px;
}
.earn-points .image-block .image {
margin: 0 0 20px;
padding: 20px 20px;
}
.earn-points.redeem .image h3 {
font-size: 18px;
}
.earn-points.redeem {
padding-top: 70px;
padding-bottom: 40px;
}
.earn-points.vip-section .image-block .image {
min-height: auto;
margin-bottom: 20px;
}
div#shopify-section-refer-friend .newsletter-section h2.h2 {
margin-top: 50px;
color: #fff;
font-size: 30px;
}
div#shopify-section-refer-friend .newsletter-section {
margin-top: 30px;
}
.earn-points .image-block .image {
margin: 0 0 20px;
}
section.banner {
min-height: auto;
}
section.banner .page-width img {
max-width: 50px;
}
section.banner h2 {
font-size: 50px;
color: #000;
}
section.banner p {
font-size: 15px;
color: #000;
line-height: 24px;
text-align: center;
}
section.banner p br {
display: none;
}
.btns {
margin-top: 20px;
margin-bottom: 30px;
}
.btns a {
padding: 5px 8px;
font-size: 15px;
min-width: 130px;
}
.how-its-works {
padding: 60px 0 40px;
}
.image-block .image {
margin-bottom: 30px;
}
section.banner .page-width {
padding: 20px;
}
.how-its-works h2, .earn-points h2 {
font-size: 28px;
}
}
After adding all the code in the theme template create a page