What is the storefront loyalty page?
The storefront loyalty page is a page on your Shopify store that explains your loyalty program and lets members use it. You build it from six ready-to-use blocks that you can add via Loop admin.
Each block acts as one section of the page, such as a loyalty welcome banner, a list of ways to earn, or a referral banner. You can choose which blocks to use, put them in any order, and place them on any page of your store. We also recommend creating a dedicated loyalty page that brings them all together, so customers know exactly where to go for the complete loyalty experience.
Admin configuration
To get started with setting up the loyalty storefront page, you can head to the Loop admin portal > Loyalty > Customer experience > Storefront page.
Storefront page blocks
The storefront page is built with five blocks. You set up each block in the Loop admin, then add it to a page on your store using the Shopify theme editor.
Block | What it does for shoppers |
Welcome banner | Introduces the program at the top of the page and invites visitors to join or log in |
How it works | Explains the program in a few simple steps |
Rewards section | Lets logged-in members turn their balance into a coupon and view available coupons |
Referral | Shows the refer-a-friend offer and gives referrers their referral link to share with their friends and family |
Ways to earn | Lists every action that earns rewards |
FAQs | Answers common questions about the program |
What you manage in Loop and what you do in Shopify
Task | Where you do it |
Texts | Loop admin |
Images and icons | Loop admin |
Set colors, corner radius, border width, and banner size | Loop admin |
Turn a block on or off | Loop admin |
Add a block to a page and put blocks in order | Shopify theme editor |
Create the page and add it to your store menu | Shopify admin |
Set up your storefront loyalty page
Setting up the loyalty page has three parts: configure the blocks in Loop, create a page in Shopify, and add the blocks to that page. Every storefront app block has the same three panels on the right side of the screen, whichever tab you are on.
Panel | What you can do here |
Status | Keep the block as a Draft while you set it up, then switch it to Active when you want shoppers to see it. |
Configure app block | Choose the page where the block should appear. A label next to it shows whether the block has already been added to that page.
Select Configure app block to open the Shopify theme editor for that page and add the block there. |
Preview | See how the block looks as you make changes. Switch between the logged-out and logged-in states, and between desktop and mobile view. |
Below are all the blocks available on the Loop admin and the configurations you can do inside each block:
Block 1: Welcome banner
The welcome banner is the first thing shoppers see, so it tells them what your program is and what to do next. For logged-out customers, you can configure a heading, a short description, and a sign-up button, whereas logged-in members see a different heading and description, with no button.
Section | What you can do here |
Configuration: Desktop banner | Upload the banner images shown on desktop. The banner is made of slides, and each slide holds one image. You can add 1 to 3 slides, so you can show up to three banner images. Use the delete icon to remove a slide |
Configuration: Mobile banner | Upload the images that will be shown on mobile view, using the same slides as desktop, so you can fit each image to its screen |
Configuration: Text position and height | Choose whether the text sits on the left or right of each banner, and set the height of the desktop banner |
Text: Logged-out state | Write the heading, description, and sign-up button text that visitors see before they log in |
Text: Logged-in state | Write the heading and description that members see after they log in |
Styles: Welcome section | Choose the colors of the heading, description, and button, or reset them to the defaults |
Block 2: How it works
The How it works block explains your program in a few short steps to make it easier for users to understand what they have to do. It looks the same for logged-out and logged-in shoppers, because it contains general information, not personal details.
Section | What you can do here |
Configuration: Overview text | Configure the section title and description shown to the users |
Configuration: Configure steps | Add the steps your customers will actually see, up to a maximum of 5. Use the delete icon on a step to remove it.
Each step has a label text, a title, a short description, and an icon. For each step, either select one of the existing icons or upload your own. |
Styles: How it works | You can configure the colors of the banner background, the title and description, the icon, and more. Select Reset to default to restore the original colors |
Styles: Banner | Set the border radius to round the corners of the section. It applies to both desktop and mobile. |
Block 3: Rewards section
The Rewards section lets logged-in members turn their balance into a coupon and see the coupons they already have. This section is not visible in the logged-out state. This block has two tabs, Text and Styles.
Section | What you can do here |
Text: Redeem balance text | Configure the texts shown to your customers for various states in the redeem balance and the my coupons section. |
Styles: Rewards section | Choose the various colors for the section, such as the card background, primary and secondary text, and more. Select Reset to default to restore the original colors |
Styles: Cards | Set the border radius to round the corners of the redeem balance and coupons cards. It applies to both desktop and mobile. |
Block 4: Referral
The Referral block invites customers to share your store with friends and earn a reward when a friend buys. Logged-out visitors see your offer and a button to log in. Logged-in members also see their personal referral link, buttons to copy and share it, and a count of their completed referrals.
On the admin side, this block has three tabs: Text, Configuration, and Styles.
Section | What you can do here |
Text: Referral | In this section, you can configure the texts visible to your users, including the heading, the reward text, the description, and more. |
Configuration | Upload the image shown next to the text in the desktop and mobile banner view, and choose the position of the image. |
Styles: Referral | Choose the colors of the banner, the text, the referral link, and the buttons. Select Reset to default to restore the original colors. |
Styles: Banner | Set the border radius to round the corners of the referral banner. It applies to both desktop and mobile views. |
Block 6: FAQs
The FAQs block answers common questions about your loyalty program. On your store, each question appears as a dropdown. While it is closed, shoppers see only the question, and they select it to open the answer. The block looks the same for logged-out and logged-in shoppers, because it contains general information.
On the admin side, this section has two tabs: Configuration and Styles.
Section | What you can do here |
Configuration: Overview text | Write the title and the short description shown at the top of the block |
Configuration: Configure FAQ | Add your questions and answers, up to a maximum of 20. Each FAQ has a question and an answer. Use the delete icon to remove one, and drag the handle next to it to change the order. |
Styles: FAQ | Choose the colors of the block background, the title and description, and more. Select Reset to default to restore the original colors. |
Styles: Card | Set the border radius to round the corners of the FAQ cards. It applies to both desktop and mobile. |
Use cases of the loyalty storefront page
You can use the loyalty storefront page when you want shoppers to discover and use your loyalty program without having to log in to a portal first.
Promote the program to new visitors. Give people who have never signed up a clear page that explains what they get and how to join.
Turn browsers into members. Show the benefits, the ways to earn, and the referral offer before asking anyone to sign up.
Give members one place to check in. Logged-in customers can see their balance, create coupons, copy their referral link, and track what they have already earned.
Link to it from anywhere. Add the page to your store menu, footer, emails, or ads, so there is one address you can share for your loyalty program.
Reuse single blocks on other pages. You can place just one block, for example, the referral block, on multiple pages to increase its visibility.
FAQs
Do I have to necessarily create a new page for storefront blocks?
No. You can add the blocks to any page of your store, such as your homepage, or to a page you already have. We recommend creating a dedicated loyalty page and adding all the blocks there, so customers know where to go for the complete experience.
Can I show different text or colors for the same block on different pages?
No. Each block has one set of text, images, and styles in Loop, so it looks the same on every page where you add it. If you change something in Loop, the change applies everywhere that block appears.
Do I need to edit my theme every time I change a block?
No. Text, images, and colors are managed in Loop, so you can update them at any time without opening the Shopify theme editor. You only go back to the theme editor to add a block to a page, remove it, or change the order of blocks.
Need help?
No worries - we're here for you! If you have any questions or need assistance, feel free to email us at [email protected] or chat with us using the support beacon at the bottom right of your screen.
Regards, Loop subscriptions team 🙂