‘Subscribe to newsletter’ point-earning action
27 February, 2023Amount Discount
15 April, 2023Loyalty page display with coding
Understand how to display your loyalty page (for Shopify themes without template section apps)
Introduction
With a simple coding tweak, you can create a stunning loyalty page that will set you apart from the competition. Don’t miss out on this opportunity to boost customer engagement and drive sales!
IMPORTANT NOTE: Displaying the BON loyalty landing page is available in our paid plans: Basic, Growth, and Professional. Check out our pricing plans for more information!
Overview
Activate your loyalty page
Go to BON Loyalty > Branding > Loyalty page > Status > Enable the Loyalty page.

Display the loyalty page on your storefront
With the loyalty page activated, let’s make it visible to your customers!
1. Create a new loyalty page template in your theme:
Go to your Shopify admin > Sales channel > Online store > Theme > Click the 3-dot button > Select Edit code.

In the Templates folder, click Add a new template > Select Page, then Liquid > Enter a file name (e.g., bon-loyalty) > Click Done.


Paste the following code into the template section. Select Format liquid > Click Save.
IMPORTANT NOTE: Avoid editing this code to prevent any display issues.
{% liquid
assign bonLoyaltyPageInfo = shop.metafields.bonLoyaltyPageInfo.bonLoyaltyPageInfo
assign bonShopInfo = shop.metafields.bonShopInfo.bonShopInfo
%}
<script> var bonLoyaltyPageInfo = {{ bonLoyaltyPageInfo | json }}; </script>
<script> var bonShopInfo = {{ bonShopInfo | json }}; </script>
<div class='shopify-section'>
{{ page.content }}
<script id='script-bon-loyalty-page' src='https://d31wum4217462x.cloudfront.net/loyalty_page/js/app.js'></script>
</div>

2. Add the template to Pages menu:
Next, you’ll need to assign the newly created template to the Pages menu you’re currently using in your store.
Go to your Shopify admin > Sales channel > Online store > Pages > Add page.

Select the new template you created in the Theme Template section > Name your loyalty page (e.g., Rewards Program, Loyalty Page).

3. Add the new template to the Navigation bar:
Last but not least, put the loyalty page onto your navigation bar.
Go to your Shopify admin > Sales channel > Online tore > Navigation > Choose to display your loyalty page at either the Footer menu or the Header menu (Main Menu).

Go to Add menu item > Homepage > Pages > Select the newly created template > Add.

Your loyalty page is now ready to engage your customers!