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.
⚠️ Things to 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. The Loyalty Page elements should now appear on the page. You can move the Loyalty Page app block to its desired location on the page
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 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
Modules are individual blocks, that together form part of 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 block 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 block 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 block also shows redeemed rewards that have not been used.
Move Up Tiers: This block displays all tiers relative to each other, perks per tier and the customer’s current tier.
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.
Style settings
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.