Skip to main content
All CollectionsGetting StartedSet up the loyalty UI
Building a Loyalty Page with Shopify App Blocks
Building a Loyalty Page with Shopify App Blocks

Building a Loyalty Page through the Shopify Theme editor using our App Blocks

Dave Clark avatar
Written by Dave Clark
Updated over a week ago

LoyaltyLion provides a variety of App Blocks which can be added to supported Shopify templates to build a customized Loyalty Page. Each block has options to adjust how it's displayed, including colors, text size, and layout.

Requirements for using App Blocks

App Blocks only work with "Online Store 2.0" themes. Please contact Shopify or your theme developer if you're not sure if your theme is compatible.

Additionally, the theme will need to have a "main page" section which has been configured to allow blocks of type @app. The majority of new themes in the Shopify ecosystem should support this, but you may need to ask your theme developer to add if it not; please refer to the Shopify App Block documentation.

Creating a Loyalty Page with App Block support

When you create a Loyalty Page from the LoyaltyLion admin you have the option of using App Blocks. If your theme meets the requirements, and you enable this option, we'll create a new page template (called "loyaltylion"), and a a blank page using this template. You can then add LoyaltyLion App Blocks to the page.

If you have an existing Loyalty Page which you'd like to migrate to use App Blocks, please let us know and we'll help you migrate.

Building your Loyalty Page

Opening your Loyalty Page in the Shopify Theme Editor

App Blocks are saved to a template, which in turn is applied to a page. You should have a "loyaltylion" template, which has already been applied to your Loyalty Page.

To start editing, open the Shopify Theme editor, and then in the drop down at the top, click "Pages", and then find the "loyaltylion" template:

This will open the template for editing, and should automatically preview your Loyalty Page (which will have the name you chose when you created it). If it's showing a different page, click the "Change" link in the sidebar's "Preview" section and select the correct page.

Adding App Blocks to the page

To add your first block, click "Add section" under the template sidebar, then click "Apps", and then select the "Header and navigation" block by LoyaltyLion.

To add further blocks, you can click "Add block". It's also possible to intersperse LoyaltyLion blocks with other types of block, for example to use your own headings.

Customizing individual blocks

When you click on an App Block, you'll see a variety of options you can use to customize how that block is displayed. For example, you can show or hide headings, change colors and font sizes, or the size and number of rows and columns used for grid-based blocks.

Global customization

In addition to individual App Block options, you can also change options that relate to every LoyaltyLion UI element on the page. To do this, open the "App embeds" menu, enable "LoyaltyLion SDK" and then customize using the options inside.

These will apply to all blocks on the page, although some blocks may have their own color settings which will override the global settings.

Did this answer your question?