The LoyaltyLion Theme Editor is automatically enabled for all new LoyaltyLion accounts that have access to the Integrated Loyalty Page
If you're an existing merchant on the Advanced plan or above, we'll be enabling the Theme Editor for your account in the future. If you'd like early access, you can contact support or your account manager.
Overview
The LoyaltyLion Theme Editor can be used to preview and edit your Integrated Loyalty Page directly on your store. You can use it to see how your page will look with and without a customer, and customize many aspects of the interface, such as colors, buttons, and icons, without writing any HTML or CSS.
There are no specific requirements for using the Theme Editor, so long as you have access to the Integrated Loyalty Page.
Launching the Theme Editor
If your account has access to the Theme Editor, you can launch it by signing in to your LoyaltyLion admin, going to the "Manage" section, then "Loyalty Page", and clicking the "Launch Theme Editor" button on the page.
If you haven't created a Loyalty Page yet, you'll need to follow the steps to take that first, and can then customize it using the editor.
Launching the theme editor on dev theme
Add a new theme on your Shopify store that's not published yet.
If you're using app embed sdk, click on
Customizeand make sure LoyaltyLion SDK is enabled. Steps can be found here.Preview the new theme.
In the same browser session, open LoyaltyLion and got to
Manage->Loyalty Page->Launch theme editor.It should open on theme editor on your previewed theme.
Using the Theme Editor
Once you've launched the editor, you'll be taken to your Integrated Loyalty Page, and the editor toolbar will be present at the top of the page.
Previewing a customer
Using the "Preview > Customer" control, you can add a demo customer to the page to see how it looks when a customer is logged in. You're able to add and remove points, claim rewards (which won't redeem any real voucher codes), and change the customer's tier.
Editing brand settings
Clicking the "Brand" control will open up the editor sidebar, and allow you to change various colors and styles that apply to the whole page. The "brand colors" are typically used by other color inputs throughout the editor, as a quick way to change multiple colors in one place, although every color input can be set to use any color.
Editing the Loyalty Page structure and sections
Click the "Page" control in the toolbar to open up the Loyalty Page sidebar. From here, you can toggle and reorder the main sections of your Loyalty Page.
To show/hide a section, click the eye icon on the right of the section
To move sections around, click and hold the drag handle on the left and move the section up and down
The page sidebar also contains settings that apply to all sections, such as headings.
Editing individual Loyalty Page sections
Some sections have their own settings. To access those, click the pencil icon on the right of each section, and you'll see that settings specific to that section.
Editing text
Click the "Text" button in the toolbar to open the text editing sidebar. From here, you can edit all our translation strings, similar to doing so in the LoyaltyLion admin languages page. You can search for text, or use the inspector to select visible text on the page.
Using the text inspector
Click the arrow icon next to the search box to enter inspector mode. Editable text will be highlighted in yellow. Click on any highlighted text to display it in the sidebar, and then make your changes with a live preview.
Not all text can be selected using inspector mode. For example, rule and reward titles are currently not supported, although we're working on adding support for these.
Usage with custom CSS
You can continue to use your own custom CSS alongside the Theme Editor; your own custom CSS will always take precedence.
This means that, if you have custom CSS, some controls in the Theme Editor may have no effect. For example:
if you have used custom CSS to change icons (e.g. for rules or rewards), the icon selection in the Theme Editor won't take effect. If you want to be able to edit icons through the editor, remove those rules from your custom CSS and then add your custom icons back through the editor
if your custom CSS contains changes to the various LoyaltyLion layout elements, such as setting the background color of buttons, grids, etc - then related color settings in the Theme Editor will have no effect