Mage sends emails to your customers when they earn points, unlock a reward, reach a new VIP tier and more. You can make these emails look like they came from your store, with no design or coding skills needed.
You set your branding once and it applies to every loyalty email automatically.
Where to Find Your Email Design Settings
From your Shopify admin, open the Mage Loyalty app.
In the left menu, click Email Templates.
In the sidebar, under Settings, click Email Design.
The settings are on the left and a live preview is on the right. The preview updates as you make changes, so you can see exactly how your emails will look.
Click Save when you are happy with your changes.
Add Your Logo
Your logo appears at the top of every email. If you do not upload one, your store name is shown as text instead.
In the Logo & Banner card, find the Logo section.
Click Upload a logo image and choose your file, or drag it onto the box.
Wait for the upload to finish. The preview updates with your logo.
Your logo is displayed up to 40 pixels tall. Upload an image around twice that height so it stays sharp on phones and high resolution screens. A PNG with a transparent background works best.
Add a Banner Image
The banner is a full width image that sits underneath your logo. It is optional, and a good place for a lifestyle photo or a simple brand graphic.
In the Logo & Banner card, find the Banner section.
Click Upload a banner image and choose your file.
Check the preview to see how it looks above your email content.
Use an image at least 1200 pixels wide by 480 pixels tall. Avoid putting small text inside the image, as it can be hard to read on a phone.
To remove the banner later, delete the image and click Save.
Choose Your Colours
The Design & Colors card holds three colour settings. Click any colour swatch to pick a new colour or paste a hex code from your brand guidelines.
Setting | What it changes |
Button color | The background colour of the button in your emails |
Button text | The colour of the writing on the button |
Body text | The colour of the main writing in your emails |
Keep a strong contrast between your button colour and button text, and between your body text and the white background. Pale grey text on white is hard to read, especially on a phone in bright light.
Preview Any of Your Emails
The Live Preview shows a sample email by default. You can also preview any of your real emails to see your branding in place.
At the top right of the Live Preview card, click Preview a template.
Choose an email from the list. They are grouped by type, such as Points and Rewards or Referrals.
The preview switches to that email, using its real wording and sample customer details.
Only emails you have switched on appear in this list.
Send Yourself a Test Email
A preview is a good guide, but nothing beats seeing the email in your own inbox.
Go to Email Templates and click Edit on any email.
Click Send test email above the preview.
Enter your email address and click Send.
The test uses your saved settings and sample customer details, so save your design changes first. Open the test on your phone as well as your computer.
Test emails are not available on Shopify development stores.
Use a Different Banner on One Email
Every email uses the banner from your Email Design settings. You can override this for a single email, which is useful for seasonal campaigns or a referral specific graphic.
Go to Email Templates and click Edit on the email you want to change.
Open the Advanced Settings card.
Choose one of the three options below.
Click Save.
Option | What it does |
Use the default banner | Uses the banner from your Email Design settings. This is the standard setting |
Use a custom banner for this email | Upload a different image, used only on this email |
No banner on this email | Hides the banner on this email only |
Changing the banner on one email never affects the others.
Common Mistakes to Avoid
Forgetting to click Save. The live preview updates as you type, but your changes are not applied to real emails until you save.
Uploading a very large banner. A file over about 1MB slows the email down on mobile data. Resize and compress the image before uploading.
Judging the design on a computer only. Most customers read email on a phone. Send yourself a test and check it there too.
Troubleshooting
My logo looks blurry
Upload a larger version. The logo displays up to 40 pixels tall, so an image around 80 pixels tall keeps it sharp on modern screens.
My changes are not in the test email
Test emails use your saved settings. Click Save on the Email Design page, then send the test again.
The banner is missing from one email
Open that email from Email Templates and check the Advanced Settings card. It may be set to "No banner on this email" or to a custom image.
I want to go back to the standard design
Click Reset to default at the top right of the Email Design page, then click Save.
Want More Control?
If you need your own brand fonts, different text sizes, or a different look for one particular email, you can add Custom CSS. It is available on every plan and sits on the same Email Design page.
See Advanced Email Customisation for font recipes you can copy and paste.