Skip to main content
Installing and Configuring the Loyalty Page
Written by Glenn Lee
Updated over a week ago

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.


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.


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 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


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).


Configurable Options


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”)


Configurable Options


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.


I cannot see the Loyalty Page app block in my themes

Please make sure the follow are enabled:

  1. Enable Widgets in Okendo Admin

    1. Access Okendo Admin > Settings > Widgets under the Settings page.

    2. Verify that the Enable Review Widgets toggle switch is turned on.

  2. Enable Okendo App Embed in the Shopify Theme Customizer

    1. Access the Shopify admin panel > Online Store > Themes.

    2. Locate desired theme and select Customize.

    3. Go to the Theme Settings tab and click it.

    4. Locate the App Embeds tab.

    5. Toggle on the Okendo Reviews app embeds switch.

  3. 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.

Did this answer your question?