(ver 2.0) Enable loyalty page

How to display loyalty page on your store

In order to protect data privacy, and stay informed with the changes of the store, BON introduces the loyalty page manually set up instruction for our merchants.

Before activating the display of the loyalty page, you must make sure that your BON’s program status is activated, and your loyalty page feature in BON is enabled.

To check this, first go to BON > Settings > Program status:

Next, at BON > Branding > Click “Customize” for Loyalty Page to check the Status:

Next, kindly set up the loyalty page following this instruction: Watch on Youtube.

If your store theme setting is different from what is in the video, follow the 2nd method instruction below:

Step 1: Create a new code template

Go to Shopify > Online Store > Theme > Click on the 3-dot button > Select Edit code:

At the Templates folder > Click “Add a new template” > Select template type “page“

Click to select “liquid” > enter the file name: bon-loyalty-page > click Done:

Then, a code template section appeared. Copy and paste this code set below > Select Format code > Click Save.

Important note: Do not edit the code set, or else it will damage your store theme’s display.

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