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.

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.

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.

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.

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.

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.

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.