The Loyalty Page is a dedicated section of your Shopify storefront where customers can discover your loyalty program, track their progress through VIP tiers, learn how to earn and redeem points, and access all the information they need to make the most of their membership.
Unlike the Loyalty Widget (a floating button visible on every page), the Loyalty Page gives you a full-screen canvas to showcase your program with customizable branding and content.
What the Loyalty Page shows
The page is built from configurable sections. Each section can be enabled, disabled, and reordered from the page editor. The available sections are:
Hero banner — a welcome header with a call-to-action button for guests or points balance and current VIP tier for signed in customers.
How it works — a quick intro explaining the program flow.
Ways to earn — cards showing all the ways customers can earn points.
Ways to redeem — cards showing available rewards customers can redeem their points for.
VIP program — VIP tier overview showing tier names, entry requirements, and current rewards.
FAQ — customizable Q&A section for common questions about your program.
Sign-up banner — a second call-to-action at the bottom of the page (shown to guests only).
Custom block — a fully flexible section for your own content: heading, text, image, or button.
How the page connects to your loyalty programs
Most blocks on the Loyalty Page are automatically filled with your loyalty program data, which means that for a proper setup there must be at least one program (either points or VIP, or both) eligible for inclusion.
To be considered eligible, the program must be:
Active (turned on).
Available to all customers. Programs restricted by customer tags are excluded to avoid confusion.
If there are several programs meeting the criteria, the highest priority program will be picked.
If no eligible program exists for a given section (for example, you only have tag-restricted programs, or all programs are inactive), that section will not appear on the live storefront. The corresponding sections in the editor will also be blocked.
Setting up the Loyalty Page
The Loyalty Page is created and managed directly from Alpha Loyalty. Follow the steps below to get it live on your store.
Step 1: Open the Loyalty Page editor
In Alpha Loyalty, go to On-site → Loyalty Page and click Create page.
Alpha Loyalty will prompt you to choose your preferred URL and automatically create the page in your Shopify store.
You'll then be redirected to the page editor to customize it as needed.
Step 2: Configure your sections
In the left panel, you'll see a list of all available sections.
For each section you can:
Enable or disable it using the toggle. Disabled sections are hidden from your storefront.
Reorder sections by dragging them up or down.
Click into a section to edit its content and design.
Hovering over any section in the preview shows a gear icon (⚙) in the top-right corner. Click it to jump directly to that section's settings.
Step 3: Customize content and design
Each section has two configuration tabs.
The Content tab lets you edit headings, descriptions, button labels, and other text.
Most fields support Markdown (ex. bold with **text**, links with [text](url)).
The Design tab is for adjusting colors and other visual properties.
Accent color
You can customize the colors and styling of each section individually. However, for a quicker way to align the page with your store's branding, simply update the accent color, which is used for highlights throughout the page.
Step 4: Preview and save
Use the controls at the top of the editor to preview your page:
Desktop / Mobile — switch between viewport sizes.
Guest / Signed-in — preview what visitors see before and after logging in.
When done editing, click Save to save your changes. If you're leaving the default texts as is, the Save button won't appear so you can just go on to the next step.
Step 5: Activate in the theme and add to your navigation
For the page to appear on your website, two things need to be done:
1. Activate in the theme
Click the Activate in the theme button.
This will open the Theme editor, where the Alpha Loyalty "Loyalty page" block will be added to your page. Click Save in the Theme editor to apply the changes.
2. Add the page to site navigation
Go to Shopify admin → Content → Menus and add the Loyalty Page link to the appropriate menu (e.g., main menu or footer).
Adding the page to your navigation is optional, but without it customers and search engines may have difficulty finding the page.
If you're using an existing page
Every Shopify page has a layout template assigned to it.
When you create a new loyalty page in Alpha Loyalty, the app automatically creates an alpha-loyalty template and assigns it to the page. Normally, clicking Activate in the Theme will open this template in the Shopify theme editor, with the Alpha Loyalty "Loyalty page" block added.
However, if you have specify a URL that already existed in your store, Alpha Loyalty accepts the choice without creating a new page.
Clicking the "Activate in the Theme" button in this case will open whichever template that is currently assigned to that page.
So if you are re-using an existing URL, there are two scenarios to choose from:
If the existing template works for you (for example, it already has your custom header and footer) — just add the Alpha Loyalty "Loyalty page" block to it.
If the template isn't right (for example, it was created by another app) — first go to Shopify admin → Online Store → Pages, and switch the page's template to alpha-loyalty, and then add the block there.
Guest vs. signed-in experience
The Loyalty Page adapts some of its content based on whether the visitor is signed in:
| Guest | Signed-in customer |
Hero Banner | Welcome message + Sign In/Sign Up button | Personalized welcome with customer name |
Sign-Up Banner | Visible | Hidden |
What happens when your programs change
The Loyalty Page stays in sync with your programs automatically. It picks your primary Points and VIP programs — active, available to all customers, and highest on the program list — and links the page content to those programs.
Here's what to expect in common scenarios:
1. You disable or swap a program
When you disable the linked program, the corresponding sections disappear from the page automatically:
Disabled | Sections hidden |
Points program | Ways to earn, Ways to redeem |
VIP program | VIP program |
When you re-enable the same program, the sections reappear automatically.
If you create a new eligible program instead, the page will automatically link to it, and the sections will reappear showing the rules from the new program.
2. You disable, delete, or swap a reward or way to earn
When you disable or delete a reward or way to earn, the corresponding card disappears from the page automatically.
If you disable or delete the last active item in a section, the entire section disappears — same as when the Points program itself is disabled.
When you re-enable an item or add a new one, the section and its cards reappear automatically.
The only exception to this syncronisation is when you click Save in the page editor while some sections are disabled.
We treat this as a sign that you want to keep the page in its current state — so if the sections become available again (for example, you re-enable a program or add rewards), they will not reappear automatically. You will need to re-enable them manually in the page editor.