LoyaltyLion integration for Shogun Frontend.

Power your ecommerce growth by building a better understanding of what will drive longer-lasting relationships and use those insights to create a loyalty program as unique as your brand.

⚠️ This package runs on Shogun Frontend and is in customer Beta. It might not currently support all ecommerce platforms or cover all use cases.

LoyaltyLion website →


yarn add @frontend-sdk/loyaltylion

npm install @frontend-sdk/loyaltylion

Initial setup

Call the useLoyaltyLion hook at the top level, so that the script is injected only once, and all LoyaltyLion widgets can utilize it. This hook injects and initializes the LoyaltyLion script.

import { useLoyaltyLion } from '@frontend-sdk/loyaltylion'

const App = () => {

How to find required values

You can find your LoyaltyLion Site Token and LoyaltyLion Secret here.

To find this page manually: log in to https://app.loyaltylion.com > click on "Manage" in the top nav bar > scroll down to the "Configurations" section in the left nav bar and click "Settings" > scroll down to the bottom of the page to see your token and secret.


This package currently enables the "guest" view only. Functionality for logged in customers will follow shortly.


Prerequisite: Make sure you've followed the steps in initial setup above.

Go to your LoyaltyLion admin portal to activate and customize the widgets you'd like to use.

Each widget will provide you with a string of HTML. E.g. <div id="loyaltylionWidget></div>.

Paste the provided HTML into the Shogun Frontend section where you'd like the widget to appear. Note that some HTML code may need to be manually converted to JSX to work properly. E.g. The <input> tag in HTML is written as <input /> in JSX.

Loyalty Page

In your LoyaltyLion admin portal, navigate to https://app.loyaltylion.com/sites/YourLoyaltylionSiteId/manage/design/app-integrated (Manage > Customize > Loyalty Page), customize as you like, and set to visible.

In Shogun Frontend, create a new section and page, and paste the following snippet.

<div data-lion-integrated-page></div>

Note: Make sure this is the only element with a data-lion... attribute on this page.

Source: https://help.loyaltylion.com/en/articles/4385100-loyalty-page


export const LoyaltyPage = () => {
  return (
      <div data-lion-integrated-page></div>

Other Widgets

A full list of LoyaltyLion's widgets and their code snippets can be found here. There are components that are embeddable in the page, and others that are rendered in a modal. All will follow the same general format of pasting the provided HTML into Shogun Frontend.

Did this page help you?