The Theme Editor is available for Shopify stores on the Classic plan and above. New accounts have it switched on automatically. If you don't see Launch Theme Editor, contact our Support team at support@loyaltylion.com to switch it on for you.
In this article:
Overview
A custom block is a section of your loyalty page that holds your own HTML and CSS. You add it in the LoyaltyLion Theme Editor, alongside the standard sections, to show content the standard sections don't cover.
Adding a custom block
You add a custom block from the Sections list in the Theme Editor.
In LoyaltyLion, go to Display, and then Store components.
On the Loyalty Page card, click Customize, and then Launch Theme Editor.
In the Theme Editor, click Add section at the bottom of the Sections list. We add a new custom block to your page and open its settings on the right.
Under Content, enter your HTML in the HTML box. Click Format to tidy its indentation.
Under Custom CSS, enter your CSS in the CSS box.
To list the block in your loyalty page's menu, check Show in navigation menu under Menu, and then set its Menu title and Menu icon.
Click Publish. Your custom block is now live on your loyalty page.
We scope the CSS in a custom block to that block automatically. You don't need to add #loyaltylion to your selectors, and your styles won't change the rest of your loyalty page.
Using program values in a custom block
A custom block can show values from your loyalty program, such as {program_name}, {points_total} or {current_tier}. Type a variable into the HTML box, braces included. We fill it in when the page loads, so the block keeps up when your program changes.
These are the variables you can use in a custom block:
Variable | What it shows | Shown to |
{is_member} | True when signed in | Everyone |
{program_name} | The program's name | Everyone |
{signup_points} | Points granted for signing up, if any | Everyone |
{points_per_currency_unit} | Points earned per unit of currency spent, if any | Everyone |
{referral_points} | Points earned for a successful referral, if any | Everyone |
{referral_minimum_spend} | What a referred friend must spend for the referral to pay out, if any | Everyone |
{referral_friend_discount} | The referred friend's own discount, if the program offers one | Everyone |
{rewards.<id>.title} | A reward's name, as in {rewards.42.title} | Everyone |
{rewards.<id>.cost} | A reward's cost in points, as in {rewards.42.cost} | Everyone |
{tiers.<id>.name} | A tier's name, as in {tiers.7.name} | Everyone |
{tiers.<id>.threshold} | What a shopper needs to reach that tier | Everyone |
{name} | Customer first name | Signed-in members |
{points} | Pending points | Signed-in members |
{points_total} | Total point balance | Signed-in members |
{points_redeemable} | Redeemable point balance | Signed-in members |
{current_tier} | Current tier name | Signed-in members |
{next_tier} | Next tier name, if any | Signed-in members |
{points_to_next_tier} | Points still needed to reach the next tier | Signed-in members |
{spend_to_next_tier} | Spend still needed to reach the next tier | Signed-in members |
{tier_expiry_date} | Current tier membership expiry, if any | Signed-in members |
For a specific reward or tier, replace <id> with its id, as in {rewards.42.title}. When you type {rewards. or {tiers. in the HTML box, the Theme Editor suggests your rewards and tiers.
Variables for signed-in members only have a value when a member is signed in. To show different content to members and guests, use {% if is_member %}...{% else %}...{% endif %} in your HTML.
Managing your custom blocks
In the Sections list of the Theme Editor, a custom block works like any other section:
To edit it, click its name.
To move it, drag it up or down the list.
To hide it, hover over it and click the eye icon.
To delete it, hover over it and click the bin icon, and then confirm. Only custom blocks can be deleted.
Changes reach your loyalty page when you click Publish.
FAQ
Can I have more than one custom block?
Yes. Each time you click Add section, we add another custom block to your loyalty page.
Do I need custom blocks to build my loyalty page?
No. Your loyalty page comes with LoyaltyLion's standard sections. Custom blocks are there if you want to customize the page further.
Can a custom block hold anything other than HTML and CSS?
No. To protect your loyalty page and your customers, we remove these from a custom block, both in the Theme Editor preview and when you publish:
Scripts, and event attributes such as onclick
Embedded content in an iframe, such as a YouTube video or an embedded form
Forms and form fields
Images and LoyaltyLion attributes are kept, so a custom block can still open the Referral Modal, for example.