The Hero banner is the large section at the top of your loyalty landing page. It welcomes visitors, says what your program is about, and gives them buttons to register or log in. You can also show a personal welcome to customers who are already logged in, and add a small navigation bar that jumps to other sections of the page.
To edit it, go to Loyalty Pages in Mage Loyalty. Under Storefront, find Landing Page and click Customise. Then select Hero in the Sections list on the left.
This section lives on your loyalty landing page. If you have not set that page up yet, follow the loyalty page step in the Quick Start Guide first.
The logged-out banner
These fields control what visitors see when they are not logged in. This is where you invite people to join.
Setting | What it does |
Title | The main headline. If left blank, it shows Loyalty Program. |
Subtitle | The line under the headline. If left blank, it shows Earn Points & Rewards. |
Register Button Text | The label on the main button. If left blank, it shows Register. |
Register Button URL | Where the main button goes. If left blank, it goes to |
Login Button Text | The label on the second button. If left blank, it shows Login. |
Login Button URL | Where the second button goes. If left blank, it goes to |
Bold and italic words
In any Title or Subtitle field you can make a few words bold or italic. Wrap them in {b}...{/b} for bold or {i}...{/i} for italic. For example, Join {b}The Circle{/b} shows The Circle in bold.
Logged-in state
This part controls what logged-in customers see.
Setting | What it does |
Hide when logged in | When ticked, the banner is hidden for logged-in customers. Untick it to show a banner to them too. The fields below only appear when this is unticked. |
Title | The headline for logged-in customers. Leave it blank to use the logged-out title. |
Subtitle | The line under the headline for logged-in customers. Leave it blank to use the logged-out subtitle. |
Show primary button | Shows a main button. Set its Primary Button Text (blank shows Earn Points) and Primary Button URL. |
Show secondary button | Shows a second button. Set its Secondary Button Text (blank shows Redeem Rewards) and Secondary Button URL. |
On new stores, Hide when logged in starts unticked, with the title Welcome back {firstName} and the subtitle You have {points} points already filled in. If the logged-in fields are empty, the same wording shows in grey as a suggestion.
Placeholders
In the logged-in Title and Subtitle you can add placeholders that fill in with each customer's details. Type them exactly as shown, including the curly braces. Hover over one in the editor to see a sample value.
Placeholder | What it shows |
| The customer's first name, for example Amy. |
| The customer's points balance, for example 500. |
| The customer's current VIP tier name, for example Gold. |
If your store uses store credit instead of points, the editor lists {store_credit} instead of {points}. It shows the balance as money, for example You have {store_credit}.
Navigation
The navigation is an optional bar of links under the banner. Customers can use it to jump to other sections of your loyalty page.
Tick Show navigation. The first time you do this, three links are added for you: Ways to Earn, Ways to Redeem and FAQ.
Edit each link's Label and URL.
Choose who sees each link under Show to: All, Logged in or Logged out.
Click Add link to add more (up to 8), or Remove to delete one.
Drag a link by its handle to change the order.
Setting | What it does |
Label | The link text. Keep it short: up to 25 characters. |
URL | Where the link goes. Use a section link like |
Show to | Who sees the link: everyone, only logged-in customers, or only visitors who are not logged in. |
Section links you can use on your loyalty page:
#mage-how-it-works#mage-activity-overview#mage-flexible-redemption#mage-ways-to-earn#mage-ways-to-redeem#mage-rewards#mage-vip-tier-benefits#mage-faq
When you save, any link without both a label and a URL is removed, and so is any URL that does not start with #, /, http:// or https://.
Below the main card is an Advanced Settings card. Click View to open it and add Custom CSS for this section. The editor suggests the hero banner class names as you type, and a counter shows how close you are to the 64 KB limit. Your CSS is saved with the rest of the section.
Theme editor settings
Wording, links and buttons are set in the app. The look of the banner is set on the Mage Hero Banner block in your Shopify theme editor.
Setting | What it does |
Layout | Centered or Two Column. Left Column Background Color sets the text column colour in Two Column. |
Background Image | The banner image. Add a separate Background Image (Mobile) if you want, and set the Mobile Breakpoint (px) where it switches. |
Banner Size | Small (400px), Medium (50vh), Tall (75vh) or Large (100vh). |
Text Alignment | Left or Center, for the title, subtitle and buttons. |
Styling | Font weight and colour for the title and subtitle, and background and text colours for both buttons. |
Disable Customizer Styles | Removes the colours above so the block is styled only by your own CSS. |
Saving and going live
Save your changes. As soon as you edit a field, a save bar appears at the top of the screen. Click Save in the save bar.
Check the confirmation. A message saying Hero content saved successfully appears once the save is done.
Discard if needed. Click Discard in the save bar to go back to your last saved version.
Make sure the block is on the page. Click Customise page in Shopify Theme Editor at the top right of the Landing Page editor. Check that the Mage Hero Banner block is on your loyalty page. If it is not, add it, then click Save in the theme editor.
Common Mistakes to Avoid
Leaving Hide when logged in ticked and expecting logged-in customers to see a banner. While it is ticked, the banner is hidden for anyone logged in. Untick it to show your logged-in wording.
Turning on a logged-in button without a URL. A button with no URL does not go anywhere. Add a URL, for example #mage-ways-to-earn.
Using placeholders in the logged-out fields. Visitors who are not logged in have no name, balance or tier, so the placeholder shows nothing. Use placeholders only in the logged-in Title and Subtitle.