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 or your Account Manager to switch it on for you.
In this article:
Overview
The LoyaltyLion Theme Editor lets you preview and edit your Integrated Loyalty Page directly on your store. You can see how the page looks to guests and to signed-in members, and change its colors, buttons, icons, sections and text without writing any HTML or CSS.
Launching the Theme Editor
You launch the Theme Editor from your LoyaltyLion admin.
Go to Display, and then Store components.
On the Loyalty Page card, click Customize.
Click Launch Theme Editor. The Theme Editor opens on your store's loyalty page.
If you haven't created a Loyalty Page yet, create one first, and then you can customize it in the Theme Editor.
Launching the Theme Editor on an unpublished theme
You can use the Theme Editor on a Shopify theme that isn't live yet.
In Shopify, add a new theme and leave it unpublished.
Click Customize on the new theme and check that the LoyaltyLion SDK app embed is turned on.
Preview the new theme.
In the same browser, open LoyaltyLion, go to Display > Store components, click Customize on the Loyalty Page card, and then click Launch Theme Editor.
The Theme Editor opens on the theme you're previewing. If you don't see LoyaltyLion on the page, launch the Theme Editor again.
Finding your way around
The Theme Editor has a bar along the top, a panel on the left listing everything you can edit, and your loyalty page in the middle. When you pick something from the left panel, its settings open in a panel on the right.
The top bar of the Theme Editor has these controls, from left to right:
Undo and Redo. You can also press ⌘Z and ⇧⌘Z on a Mac, or Ctrl+Z and Ctrl+Y on Windows.
Preview on a phone or tablet, either inside the editor or in a separate window.
Frame the storefront within the editor, which insets your page in the editor.
Open editor in new window, which moves the editor's panels into their own window beside your store.
Preview as, covered in Previewing a customer below.
Publish, which puts your changes live.
The left panel of the Theme Editor has two groups:
Settings: Brand and Translations are always here. Campaigns, Challenges and Drops appear when your program uses them.
Sections: every section of your loyalty page, in page order. A person icon marks a section that only signed-in members see.
If your loyalty page uses more than one language, the top bar shows which language you're editing. To see another language in the Theme Editor, change your store's language in Shopify. You add languages and their translations in Display > Languages & text.
Previewing a customer
Use Preview as in the top bar of the Theme Editor to see your loyalty page as a Guest or as a signed-in Member. While you preview a member, you can also:
Manage points: add 100, 1,000 or 10,000 points, or click Remove all.
Change tier, if your program has tiers.
Challenge stage: switch between Milestones and Recurring.
You can claim rewards in the preview too. Nothing is redeemed: the preview shows a placeholder code instead of a real voucher.
Editing brand settings
Under Settings in the Theme Editor, click Brand to change the colors and styles that apply to your whole loyalty page. The Brand settings include:
Brand colors, your primary and secondary colors. Other color settings can use them as a quick way to change several colors in one place, though every color setting accepts any color.
Colors for call to action buttons and standard buttons, and the size and rounded corners of buttons.
Headings, the default style for every section heading.
Page layout: page width, background color, spacing, mobile spacing and font.
Custom CSS, covered in Using custom CSS below.
Editing sections
The Sections list on the left of the Theme Editor shows every section of your loyalty page, in the order your customers see them.
Showing, hiding & reordering sections
To hide or show a section, hover over it and click the eye icon. A hidden section stays in the list, dimmed, with a crossed-out eye.
To move a section, drag it up or down the list.
To add a custom block with your own HTML and CSS, click Add section at the bottom of the list.
Editing a section's settings
Click a section's name to open its settings on the right.
Editing text
Under Settings in the Theme Editor, click Translations to edit the text on your loyalty page. These are the same strings you can edit in Display > Languages & text in LoyaltyLion. Type in Search for text to find a string, or browse the tabs below it.
Using the text inspector
Click the arrow icon to the right of the search box to turn on the inspector. Text you can edit gets a dashed purple outline. Click any outlined text to open it in the panel, then change it and watch the page update.
Rule and reward titles can't be selected with the inspector. Change them on the rule or reward itself in LoyaltyLion.
Publishing your changes
Changes you make in the Theme Editor don't reach your store until you click Publish in the top right. Publishing updates your loyalty page straight away, with no confirmation step.
Until you publish, we keep your edits as a draft. If you close the Theme Editor and come back later, you'll see You have unpublished changes from a previous session. Click Restore to pick up where you left off, or Discard to start again from what's live.
The draft is saved in your browser, so it's only there when you come back on the same computer and browser. Images you uploaded but didn't publish aren't kept in the draft, so you'll need to add them again.
Publish is unavailable when the language you're editing hasn't been added to LoyaltyLion. Add it in Display > Languages & text first.
Using custom CSS
To add your own CSS in the Theme Editor, go to Settings > Brand and scroll to Custom CSS. We prefix your selectors with #loyaltylion automatically, so your styles only apply to LoyaltyLion elements. Click Edit in new window for a larger editor. Custom CSS here applies on top of the Theme Editor's other Brand settings.
You can also keep using your own custom CSS alongside the Theme Editor. Your own custom CSS always takes precedence, so some controls in the Theme Editor may have no effect. For example:
If your custom CSS changes icons, such as rule or reward icons, the icon you pick in the Theme Editor won't take effect. To edit icons in the Theme Editor, remove those rules from your custom CSS and add your custom icons back through the Theme Editor.
If your custom CSS changes LoyaltyLion layout elements, such as the background color of buttons or grids, the related color settings in the Theme Editor will have no effect.