Customize Your Hero Banner
The Hero banner is the large call to action section at the top of your loyalty landing page. It welcomes visitors, tells them what your program is about, and gives them buttons to register or log in. You can also set up a separate version that greets customers who are already signed in.
To edit it, open your Mage Loyalty admin, go to the Loyalty Page editor, and select the Hero section.
The default (logged-out) banner
These fields control what visitors see when they are not signed in. This is the version most first-time visitors will see, so it is where you invite people to join your program.
Title and Subtitle
Title. The main headline of the banner. If left blank, it shows Loyalty Program.
Subtitle. The supporting line beneath the title. If left blank, it shows Earn Points & Rewards.
Register button
The primary button, aimed at brand new customers who want to sign up.
Field | What it does |
Register Button Text | The label shown on the button. Defaults to Register. |
Register Button URL | Where the button links to. Defaults to |
Login button
The secondary button, for returning customers who already have an account.
Field | What it does |
Login Button Text | The label shown on the button. Defaults to Login. |
Login Button URL | Where the button links to. Defaults to |
Logged-in state
This section controls what signed-in customers see when the banner is on the page. By default, the banner is hidden for people who are already logged in, but you can turn it into a personalized welcome instead.
Hide when logged in
Hide when logged in. This checkbox is on by default. When it is checked, the banner is hidden entirely for signed-in customers, so only logged-out visitors see it.
Uncheck it to show a custom banner to logged-in customers. The extra fields below appear only when this box is unchecked.
Logged-in Title and Subtitle
When the banner is shown to signed-in customers, these fields replace the default title and subtitle. Leave a field blank to fall back to the default (logged-out) wording.
Title. The headline shown to signed-in customers.
Subtitle. The supporting line shown to signed-in customers.
Personalization placeholders
In the logged-in Title and Subtitle, you can drop in placeholders that fill with each customer's own details. Type them exactly as shown, including the curly braces.
Placeholder | Fills with | Example |
| The customer's first name | Amy |
| The customer's current points balance | 500 |
| The customer's current VIP tier name | Gold |
For example, a title of Welcome back, {firstName}! greets each customer by name, and a subtitle of You have {points} points shows their live balance. These placeholders only fill in for signed-in customers. Guests do not have a name, balance, or tier, so for them the placeholder simply resolves to nothing.
Logged-in buttons
For signed-in customers you can choose which buttons to show, since they are already members and likely want to take action rather than register.
Show primary button. Turn this on to display a primary button. When on, you can set its Primary Button Text (defaults to Earn Points) and Primary Button URL.
Show secondary button. Turn this on to display a secondary button. When on, you can set its Secondary Button Text (defaults to Redeem Rewards) and Secondary Button URL.
Each button appears only when its toggle is on, so you can show one, both, or neither.
Saving and going live
Make your changes. As soon as you edit any field, a save bar appears at the top of the screen with Save and Discard buttons. There is also a Save button at the bottom of the section.
Save. Click Save to store your changes. You will see a confirmation that your hero content was saved. Your text and links then flow through to the banner on your storefront.
Discard. Click Discard in the save bar to undo unsaved changes and return to your last saved version.
Add the block to your page. For the banner to appear, the Hero block must be added to your loyalty page. If you have not added it yet, place it on your loyalty page so your saved content has somewhere to display.
Note that the wording, links, and buttons live here in the app. Visual styling such as the background image, banner size, colors, and layout are set in the block's settings in your Shopify theme editor.