The Loyalty Page is a full-page display for a merchant's loyalty program. Visitors to the store can access the page through site navigation or merchants can drive traffic to it, via loyalty campaigns. This is the ideal solution for merchants who want to put their loyalty program front and center with their customers.
In this article, you’ll learn about:
How to create a Loyalty Page on your Shopify storefront.
⚠️ NOTE
Before proceeding, please ensure that you have Okendo widgets and app embeds enabled. Review the Troubleshooting section of this article to find out how.
Create a page on your Shopify storefront
Go to Shopify Admin > Online Store > Pages > Add page
Complete the page details, as required.
⚠️ NOTE
We recommend creating a new template (specifically for your Loyalty Page) within your Shopify theme, and assigning it to this page. That way, you'll be able to make changes to this template, without impacting the layout of other pages onsite.
Embed the Loyalty Page app into your page
Go to Shopify Admin > Sales Channels > Online Store. Select Customize against your store theme.
Select the appropriate template at the top of the page. Then go to the appropriate section in the template and select Add Block > Apps > Loyalty Page (circled in red below). The Loyalty Page app block should now appear, with all enabled modules included in it. You can move the Loyalty Page app block to its desired location on the page.
Alternatively, you add each individual Loyalty module as an app block (circled in green below) to the template. This option provides you with more design flexibility, as it allows Loyalty modules to be inserted into different sections on the page, allowing other content to be inserted in between.
Once you've finished customising, save the template and exit.
Configure the Loyalty Page elements
Configure landing page elements by going to Okendo Admin > Loyalty > On-site Displays > Loyalty Page. Note the configurable elements of the page on the left and the preview pane on the right. Review changes to the Loyalty Page, in real time, via the preview pane.
Configure style elements of the landing page, including button colors, button borders, text and link colors.
Quickstart
Simplify the process of styling elements on the Loyalty Page by selecting Quick Start > Auto Style. Auto Style can create an entire color palette, based on the selections below and applies them across different elements of the Loyalty page:
Brand Primary Color
Primary Text Color
Secondary Text Color
Modules
⚠️ NOTE
These settings only apply to the Loyalty Page app block. Individual modules that have been added as separate app blocks, are not affected by configuration options selected here.
Modules are individual blocks, that together form the Loyalty Page. They are designed in such a way as to incentivize members to take action - that is to earn more points, use coupons or progress to higher tiers.
Modules include:
Profile: When the member is logged in to their store account, this block will show their points balance, when they become a loyalty member and their current tier (if enabled). If the member is not logged in or the customer does not have a store account, then a sign-up field will show, prompting customers to enter their email address.
Earn Points: This module allows members to view all earn rules, including those which have already been earned as well as those that can be earned again.
Redeem Rewards: This module allows members to view all enabled rewards and (if logged in to their store account) allows them to redeem them, provided they have enough points. This module also shows redeemed rewards that have not been used.
Move Up Tiers: This module displays all tiers relative to each other, perks per tier and the customer’s current tier.
Refer Friends: This module allows members to send referrals to new customers, directly from the Loyalty Page. Only available to those merchants with both Referrals and Loyalty products.
FAQ: This module allows members to view Frequently Asked Questions about the merchant's loyalty program. The question and answer list is compiled by the merchant in Loyalty > Settings > Program FAQ. Once added, the list display type can be altered between the Default view, the Card view and the Individual Cards view.
⚠️ NOTE
The FAQ module display types only apply to the Loyalty Page app block or if the FAQ module is added as a separate app block, to a page.
Default view
Card view
Individual card view
Modules can be removed by selecting X or added back by selecting the + button. Modules can also be re-ordered by selecting the ∧ or ∨ buttons.
FAQ module
Compile a list of the most frequently asked questions about your loyalty program, by going into Okendo Admin > Loyalty > Settings >Program FAQ.
Select + and complete the required text fields, for each question and answer. Use B (bold) or I (italicize) to stylize text or 
to link to another webpage or resource. Select Add to add each question/answer to the list.
Use 
to reposition each question/answer in the list.
To save the list, select Save.
This list is now ready to incorporate into the loyalty page app block or with the FAQ module, added as a separate app block, to a page.
This list is automatically displayed in the floating widget, by selecting 
. 
Style settings
⚠️ NOTE
These settings apply to the Loyalty Page app block as well as each individual app block.
Style settings enable merchants to modify the look and feel of text, links and buttons on the Loyalty Page.
Configurable Options | Description |
Brand Primary Color | Set the color for sliders, progress bars and highlights for the Loyalty Page. |
Brand Positive Color | Used for positive messaging, including tick icons and success alerts |
Hide Okendo Branding | Toggle to remove 'Powered by Okendo' branding from the Loyalty Page (available on Growth plans and above). |
Text
Configurable Options | Description |
Primary Text Color | Color used for module headings and rule labels. |
Secondary Text Color | Color used for sub-headings |
Link Text Color | Color used for links within the Loyalty Page (eg “Tier Perks”) |
Buttons
Configurable Options | Description |
Button background Color | Customize button colors. |
Button Background Color Hover | Configure button colors on mouse hover. |
Button Text Color | Set the color of the button text. |
Button Text Color Hover | Adjust button text colors on mouse hover. |
Button Border Color | Define the color of button borders. |
Button Border Color Hover | Set the color of button borders on mouse hover. |
Create navigation links to the Loyalty Page
Go to Shopify Admin > Sales Channels > Online Store > Navigation and select the main and/or footer menu. The example below shows the main (Header) menu navigation.
Select Add Menu Item and complete as follows:
Repeat this step for the other navigation menu, if you wish.
Once saved, you should now have new main and/or footer menu navigation links to the Loyalty page. You should also have the URL for the Loyalty landing page, to use in general communications and promotions.
Troubleshooting
I cannot see the Loyalty Page app block in my themes
Please make sure the follow are enabled:
Enable Widgets in Okendo Admin
Access Okendo Admin > Settings > Widgets under the Settings page.
Verify that the Enable Review Widgets toggle switch is turned on.
Enable Okendo App Embed in the Shopify Theme Customizer
Access the Shopify admin panel > Online Store > Themes.
Locate desired theme and select Customize.
Go to the Theme Settings tab and click it.
Locate the App Embeds tab.
Toggle on the Okendo Reviews app embeds switch.
Ensure the loyalty program has been launched. You will know this if under Loyalty > Settings > General, the Backdate Program section is greyed out.
If you have any specific questions or need further assistance, feel free to reach out to our support team.