Creating a page for your program with an Online Store 2.0 theme

In this guide we'll take a look at how to create a landing page for your Loyalty, Rewards and Referrals program on your website using Shopify's 2.0 theme editor. There are a few ways you can build a page for your Rewards Program. One is to make it totally from scratch, writing your own HTML and CSS but this takes a lot of time. You could also use a page builder app but one of the easiest and most flexible ways to create a loyalty page is using a Shopify Online Store 2.0 theme. You can find out if you're using a 2.0 theme by clicking here. If you're not using an Online Store 2.0 theme yet, you can upgrade your current theme by following this article.

In this article
Creating a page with an Online Store 2.0 theme
Rivo's demo store page
Tips and tricks

Creating a page with an Online Store 2.0 theme

Rivo Loyalty online store editor

To get started with creating a page, follow the steps below.

The first thing you need to do is create a new page template. To do this:

From your Shopify admin, go to Online Store > Themes and click Customize.

When the theme editor opens, click the dropdown at the top of the screen and select Pages > Create template.

Name your new template and then click Create template.

On the next page you're now able to customize your new template.

Click Add section on the left-side menu to start adding new sections to the page.

Once you have added your sections and are happy with your new template, click Save in the top-right corner.

Now that you have created a template, you need to assign it to a page. This will be your rewards page.

From your Shopify admin, go to Online Store > Pages.

Click Add page in the top-right corner.

Give your page a title.

From the Theme template dropdown on the right, choose the template you have just created.

Click Save. To see how your page looks, click View page in the top-right corner.

Rivo's demo store page

In this section, we'll give a breakdown of some of the template sections we used to make a rewards page for our demo store: https://rivo-rewards.myshopify.com (password: rivo)

We used Shopify's free Online Store 2.0 theme 'Dawn' to create our page.

Banner image

We added a banner image to the very top of our template using a stock image and added all the default blocks available for the section: Heading, Buttons and Text.

Our banner image

How it works

This is made up of two sections:
Rich Text: This is the text 'How it works'
Multicolumn: The three columns 'Signup', 'Earn' and 'Redeem'.

Each column consists of a header, some description and a link to a section of the loyalty widget.

We added a deep link to each column linking to a different section of the loyalty widget. When you add a deep link on a page, remember you only need to add the deep link itself e.g. #ba-loyalty-ways-to-earn

The 'How it works' sections

Here's how to earn points

Similarly to 'How it works', this is made up of two sections:
Rich Text: This is the text 'Here's how to earn points'
Multicolumn: The four columns 'Create an account', 'Shop for plants', 'Complete a Referral' and 'Share the love'.

Each column consists of a header, some description and an image. We used animated gifs to give the page some extra energy!

We followed the same formula when we created the sections for Ways to Redeem and our Loyalty Program.

The 'Here's how to earn points' sections

Frequently asked questions

The FAQ section

This section is a little trickier as it involves making a new page in Shopify, creating the FAQ using HTML & CSS, and then adding that page as a section. To do that follow these steps:

From your Shopify admin, go to Online Store > Pages.

Click Add page in the top-right corner.

Give your page a title, something like FAQ.

Select the HTML editor. The buttons looks like this: < >

Paste the following code for the same FAQ we have on our demo store page:

<details open=""> <summary>How do I earn points?</summary>
<div class="faq__content">
<p>Lots of ways! You can earn points by following us on social platforms, completing purchases, even celebrating your birthday. </p>
</div>
</details> <details> <summary>How do referrals work?</summary>
<div class="faq__content">
<p>You will be provided with a unique link. Send this link to (all) your friends: you and your friends will receive a discount. </p>
</div>
</details> <details> <summary>How do I check my points?</summary>
<div class="faq__content">
<p>You can check how many points you have by <a href="#ba-loyalty-home">clicking here</a> to log in. </p>
</div>
</details>
<style>
summary {
font-size: 1.25rem;
font-weight: 600;
background-color: #EEECEC;
color: #333;
padding: 1rem;
margin-bottom: 1rem;
outline: none;
border-radius: 0px;
text-align: left;
cursor: pointer;
position: relative;
}
details > summary::after {
position: absolute;
content: "+";
right: 20px;
}
details[open] > summary::after {
position: absolute;
content: "-";
right: 20px;
}
details > summary::-webkit-details-marker {
display: none;
}

details[open] summary ~ * {
animation: sweep .2s ease-in-out;
}
@keyframes sweep {
0% {opacity: 0; margin-top: -10px}
100% {opacity: 1; margin-top: 0px}
}
</style>


Save this page.

Add this page's contents as a section to your new rewards page by selecting Add section > Page on the left-side menu.

You can change the text of the FAQ by editing the questions inside the <summary> tags and the answers inside the <p> tags at the top of the code.

Tips and tricks

For great stock images, check out Burst, Unsplash, and Pexels

For some stylish icons that you can add to your page, visit iconpacks, uxwing and The Noun Project

Use deep links to open the the loyalty widget to different sections. For example #ba-loyalty-ways-to-earn to open the Ways to Earn section.

Add a link to your Loyalty page or widget in your navigation: https://shopify.com/admin/links

Now that you have a dedicated Loyalty page, if you'd like to hide the widget and only open it when someone clicks a button on mobile or desktop, visit our deep links guide!

To redirect your new Loyalty members signups to a 'success' page after they login, add the URL /account/register?checkout_url=/pages/rewards to your register button. Remember to replace 'rewards' with the name of the page you created.
Was this article helpful?
Cancel
Thank you!