Set up Points at Checkout
28 2月, 2023BON Loyalty Widget and SPA
18 10月, 2023Points on Customer account pages
Learn how to set up BON Loyalty extensions on Customer account pages
IMPORTANT NOTE: This feature is available for stores using the Customer Account Login type. It is not supported for Legacy accounts.
Introduction
App embeds are app elements that overlay your theme or add code to your online store without being visible to your customers. It can be a chat bubble app that appears in the corner of your store, or a call-out card displaying loyalty points and rewards.
With BON Loyalty, there are four options to showcase your loyalty program on pages such as Profile, Account, Order status, and a full page extension that acts like a landing page.
Overview
Setting up app embeds on the Profile page
- To add BON embed on the Profile page, you’ll need to go to Themes > Customize.
- Select Check out and customer accounts on the page list.
- Go to Apps > Find the extension called bon-customer-account-ui. Add that to your Profile page and adjust the position to your liking.
- You can also customize the content shown on the extensions. Please do not change the attribute in ‘{{_}}’, as they are used to display the value sync from BON Loyalty.
- If you’d prefer not to display both the first and last name using the {{first_name}} {{last_name}} attributes, you can choose to use either {{first_name}} or {{last_name}} instead, whichever fits your message best.
Setting up app embeds on the Order status page
On the Order status page, you can showcase information regarding the order’s points and referred links for your referral program.
- As you are already in the editing tab for Checkout and customer account, go to Apps > Select extensions called bon-referral-program-extension for referral program embed, OR Select bon-order-point-rewards to show a message about points earned from orders.
To edit contents, you can adjust the default by typing in the text inputs in the left corner. While editing, please make sure you do not change the attributes in the ‘{{_}}’. The direct link in the hyperlink text is by default and cannot be changed.
IMPORTANT NOTE: Please make sure you have activated the according program (i.e. referral program, turn on rewards in the point-redemption program) for the extension to work.
BON full-page extension
With the customer account extension, the hassle of navigating through multiple pages or completing many steps in the shopping flow has been minimized. The customer shopping experience is enhanced by adding a dedicated page for tracking membership progress, viewing membership tiers, or checking and redeeming points directly on the extension page. All these features can be found in the bon-loyalty-fullpage-extension.
To learn how this full page works, please refer to this VIDEO.
IMPORTANT NOTE: Please make sure you have activated all programs required (i.e. VIP Tiers, point-earning programs, point-redemption programs). Customization for branding, including colors, fonts, text colors, etc., will be synced in accordance to your Shopify theme and cannot be changed manually.