Loyalty 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
Display the loyalty page on your storefront

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!

Loyalty page display with coding

‘Subscribe to newsletter’ point-earning action

Amount Discount