Walkthrough: embedding the Loyalty Panel on a Shopify page

Follow this guide to create a new page in your Shopify store and embed the Loyalty Panel on it.

Note: embedding the Loyalty Panel is not available on the free plan

Embedding the Loyalty Panel on a page makes it look more integrated with your store, and also means you have a simple URL to share if you want to link people directly to it. It also looks great on mobile devices, as it's fully responsive and will resize automatically to fit.

To begin, log in your Shopify admin and navigate to your Online store > Pages section. Once there, click the "Add page" button.

Next, enter a title for your page. An ideal title is the name of your loyalty program.

To actually embed the panel, we need to add a small bit of HTML to the page. To do this, first click the "Show HTML" button on the editor:

Now paste in the following HTML into the editor:

<code><div data-lion-account></div>

It should look like this when done correctly:

OPTIONAL: if you'd like, you can adjust the Search engine listing section to specify a meta description and alternate title or URL.

Now save the page and then click the "View" button at the top of the page to view it in your online store. The Loyalty Panel should be displayed as part of the page - if you don't see it, double check the HTML or get in touch.

You can now use this URL to link customers directly to your program. If they're logged in, they'll see the Loyalty Panel, otherwise they'll be presented with the guest splash. Both will be embedded and work great on desktop and mobile devices.

If you've added LoyaltyLion to your header, you could change that link to point directly to your new embedded page instead.