Loyalty landing page

Learn how to create an SEO-friendly Loyalty page for your Shopify store, showcasing rewards, points, and tiers to boost customer engagement and loyalty

Who can use the Loyalty Page?

Basic features are available for Free users.
Enhanced features are available for Professional, Advanced, and Enterprise plans.
Your theme needs to support OS 2.0 app blocks

Introduction

When setting up your loyalty program, you may choose to have both a dedicated Loyalty Page and a simple floating widget. While the widget is convenient, it’s not always SEO-friendly. A fully customized Loyalty Page not only enhances SEO but also provides a solid destination for targeting your ads, email campaigns, and social posts.

With Joy Loyalty’s embedded content, you can tailor your Loyalty Page to meet your needs and drive engagement. Let’s explore how to set it up for maximum effectiveness.

Jumpstart your Loyalty Page

Our Loyalty page will use the Shopify page combined with Theme OS 2.0 app blocks to design. With this approach, you will be able to elevate all your existing themes and app blocks to design your loyalty landing page.

To kick things off, please navigate to the 'Embedded Content' on your left menu. Once there, click on 'Generate Loyalty Page' to create our page in Shopify.

A blank Loyalty Page will be generated and located at /pages/joy-loyalty-page. You will then be redirected to your Online Store editor.

You can go to Shopify pages and find the Edit website SEO section to change this page's handle if you want to.

⚠️ Important note: When you select'Generate Page' we will automatically create a page named 'joy-loyalty' using a template called 'joy-loyalty.' When setting up a page for your loyalty program, please note the following case:

Case #1: If you have already created a loyalty page named 'loyalty-page' using the Shopify theme but have not yet clicked 'Generate Page' in the embed content, clicking 'Generate Page' will convert the loyalty page you previously created into the new 'joy-loyalty' page."

Case #2: If you have already generated a loyalty page and then create a new page and set it up based on 'joy-loyalty,' this new page will automatically convert into the loyalty page that you previously generated.

Add your content

Here, click on 'Apps' in the left menu and add the first 'Hero Banner Block'. You also have the option to use your own theme’s Hero banner instead of ours. While our banner is designed to suit most Loyalty Page needs, using your own banner may be better if you want a slideshow or a more interactive experience.

Once the Joy Hero Banner block is added, you can find all the settings on your right menu in which you can customize the following:

Banner image: It is recommended that you design your banner.
Buttons: Change your primary and secondary buttons' content, color, and links.
Layout: Change your content alignment to the left, center, or right depending on the banner background image.

To create a fully functional and effective Loyalty Page, we recommend including the following blocks: "Joy How it Works," "Joy Ways to Earn," and "Joy Ways to Redeem." A well-structured Loyalty Page typically follows this layout: a Hero Banner at the top, followed by sections for How it Works, Ways to Earn, and Ways to Redeem. Optionally, you can add an Inline Banner for a call-to-action (CTA) and a FAQs section to provide additional clarity and drive engagement.

These Ways to Earn, and Ways to Redeem will dynamically display the content according to your program settings.

Customizing icons

Use our icons

In each block setting, you can find the "Icon color" input to change the color of our default icons according to your brand color.

Use your self-designed icons

In the Embedded content menu, go to Loyalty blocks to browse for Ways to redeem and Ways to earn blocks. You can upload your icons to our app or you can paste your own hosted URL that can be used for the loyalty page.

It is recommended that you can design your icons with Figma, or you can design them on Freepik

Besides these two blocks, if you want to customize the How it works block, then the custom icon inputs are built-in. You can upload it right in the Shopify theme editor.

Further customization

Some blocks may allow you to manage their advanced settings inside the Joy Loyalty Program application. For instance, with the “Joy Way to redeem” block, you can head back to your Joy Loyalty Program to set up the displaying order of programs in the 'Way to Earn' block.

Navigate to 'Embedded content', then 'Loyalty blocks' (on your left menu) and you will find the 'Way to earn' block. In this example, you can set up the order of each way to redeem, or toggle their display ON or OFF.

Also, the Joy: FAQs block would require you to set up your FAQs list inside our apps. If you want to use your own theme FAQs blocks combined with Shopify Meta Objects then it would be fine as well.

Feel to to add any of your theme blocks like Video, Collage, etc to create a seamless loyalty landing page for your site.

Change your SEO

As mentioned earlier, you can update your page handle, title, and meta description directly within Shopify. Here’s how to do it:

Go to Shopify Admin → Online Store → Pages → Select your landing page.
Click on Edit website SEO.
Update the page handle, title, and meta description as needed.
Click Save to apply your changes.

Once all is settled, make sure to submit your page to Google Indexing.

Be sure to add your Loyalty Program page to your store’s navigation so customers can easily find it. This not only improves user experience but also boosts SEO by adding valuable internal links to your site. Go to Shopify Admin > Online Store > Navigation to update the menu to your liking.

Wrap up

And that’s it! You’ve created an engaging Loyalty Page for your customers. Remember, the key to a successful Loyalty Program is making sure your page is both inviting and easy to navigate. Keep refining it to meet your customers' needs.