Loyalty Lion

Feature your Loyalty Lion rewards program on Nyla

Loyalty Lion's SDK is integrated with Nyla so that you can use the app to power your rewards programme on your Nyla site. 

If you are migrating an existing Loyalty Lion programme to Nyla, or launching a new programme from scratch, it's worth mentioning that there are some restrictions that Loyalty Lion have for Headless sites which are documented here. 

Nyla's integration with Loyalty Lion supports their SDK components as outlined in the screenshot below (minus the Loyalty Panel and the Loyalty Widget, which have been deprecated by Loyalty Lion), which you can use on your site via content items. You can also use the customer metafields that Loyalty Lion write to Shopify in order to display loyalty information. 

If you have any questions on what these components can do in relation to your loyalty programme, or how any Loyalty Lion restrictions on headless support might impact you, we recommend reaching out to your Loyalty Lion contact to understand more. 

App Activation


Once you have the Loyalty Lion app installed on your store, you can activate the app on Nyla. In order to do this: 
  • Activate the App in Nyla Apps
  • To get the Site token and Secret:
    • Open the Loyalty Lion app inside your Shopify store
    • Click on Manage
    • On the Left column click on Configuration -> Settings
    • Your “Token and Secret” can be found by scrolling to the bottom of the page
    • You should paste both into your Nyla activation screen, then save and publish

Setting up Loyalty Lion

Before adding components to your site, we suggest to set up your programme rewards and ways of earning points in Loyalty Lion first. 

Tip: if you want to preview your loyalty page whilst building it out, you can view your theme in Shopify, and append "?redirect=false" to the URL to see the Loyalty Lion components on your old theme. e.g the typical URL of the Loyalty Lion rewards page after you have launched on Nyla will be: https://checkout.yoursite/pages/rewards?redirect=false

Adding the programme to your site

Once you have the basics of the programme set up in Loyalty Lion, you can begin to add components to your Nyla site. 

Nyla's Loyalty Lion integration has multiple content items that you can use on your site. These map to the Loyalty Lion SDK components as outlined in the screenshot at the top of this document. 

At the time of writing, Loyalty Lion's suggestion for adding the Loyalty Lion rewards page using the SDK components was to add the following components in the following order.
Simple component: Customer points
Rule section
  • Simple component: Points for rule
  • Embeddable component: Rules list
  • Embeddable component: Rewards list
  • Modal component: Referral modal
  • Modal component: Rule modal
Rewards section
  • Redeem reward modal
  • Claimed reward modal
Tiers section
  • Embeddable component: Tier overview
  • Embeddable component: Tier benefits compare
  • Embeddable component: Tier rewards compare
  • Embeddable component: Tier rules compare
History
  • Embeddable component: Claimed rewards list
  • Embeddable component: History table

If you have questions on how to mix up this page design, you can add the Nyla content items to any page you'd like in the order you'd like. However if you have questions on how to style the components, or find out more about what each component on Loyalty Lion does, we suggest reaching out to your Loyalty Lion contact for more information.

Adding components to your site: 

In order to add Loyalty Lion components to your site, you can use the following content items in Nyla. 

Note that some components will show blank unless you are logged in as a customer, so we suggest testing the views both whilst logged in and logged out as you build out your pages and checking the Loyalty Lion documentation for any limitations. For example: 

    • Some components have a customer logged in and logged out view (for example the Loyalty Page).
    • Some components (e.g the claimed-rewards-list) will show as blank unless a customer is logged in. 
    • Some components won't show unless they have been set up in Loyalty Lion, for example the tier-overview will not show unless Tiers have been set up. 
    • Some components won't show unless they are in the cart (Loyalty Lion Points For Cart) or in a source product (Loyalty Lion Points For Product). 
The Content items available as follows: 
  • Loyalty Lion Components:
    • Contains the following components, that map to the SDK Embeddable components by name. 
    • Note that the Loyalty Page shows the Loyalty Page set up in the Loyalty Lion app

Loyalty Lion Metafields

It's also possible to use the metafields that Loyalty Lion write to Shopify as properties in Nyla by following the same process you would use to add any Shopify metafields as properties on your site.