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.
Simple component: Customer pointsRule 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).
- 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 Customer Points
- Loyalty Lion Points For Rule
- Loyalty Lion Customer Referral URL
- Loyalty Lion Points For Cart
- This content item is only available to be added in the Cart
- Maps to the Points For Cart SDK component
- Loyalty Lion Points For Product
- This content item is only available to be added within Source Product
- Maps to the Points For Product SDK Component
- Referral URL
- Loyalty Lion Referral Modal
- This can be triggered automatically on page load. See how to do this in the Loyalty Lion docs.
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.