Under the “Templates ” menu item, you’ll find the HTML templates created in Heyloyalty.
In this guide, you’ll learn how to customize the logo in an existing HTML template. If you need to create a template first, you can read our guide to standard HTML templates.
Images for this guide will be added later.
Adjust the logo in your template
Before you can change the logo in your template, you must upload the new logo to the media library in Heyloyalty. Upload the logo, and then copy the image’s URL. You’ll need the URL when you edit the HTML code in the template.
Go to Templates in Heyloyalty. Find the template you want to customize. Click the three dots next to the template and select Edit Template.
We recommend that you copy the entire contents of the template and paste them into a text or note-taking program, where you can more easily search the HTML code. Search for the word ” logo.” Find the following comment in the code: <!-- start logo -->. Below this comment, you’ll find the `img ` tag that contains the logo. Here, locate the ` src ` attribute, which contains the URL for the current logo. In the example below, replace the URL after ` src="` with the URL for your new logo. (Highlighted in bold)
<!-- start logo -->
<table width="720" cellpadding="0" cellspacing="0" border="0" class="fullWidth" bgcolor="#FFFFFF">
<tr>
<td height="25" style="font-size:25px; line-height:25px; height:25px;"> </td>
<!-- Spacer -->
</tr>
<tr>
<td width="720" class="wrapper" align="center">
<a href="https://heyloyalty.com/" target="_blank">
<img src="https://images.heyloyalty.dk/uploads/media_image/18011/image/Heyloaylty_logo_orange.png" width="180" style="margin:0; padding:0; border:none; display:block;" border="0" alt="heyloyalty" />Once you’ve replaced the URL for the logo, we recommend that you create a new template with the customized HTML code. That way, you’ll avoid overwriting your existing template.
Once you’ve saved the new template, you can check the change in the preview to make sure the new logo appears correctly.
Customizing Social Media Icons in a Template
You can also customize the social media icons in your HTML template. You can both replace the icons themselves and change the links that recipients are redirected to when they click on them.
Start by uploading the icons you want to use to the media library in Heyloyalty. Copy the URL for each icon so you have them ready when you need to customize the HTML code.
Go to Templates in Heyloyalty. Find the template you want to customize. Click the three dots next to the template and select Edit Template.
We recommend that you copy the entire contents of the template and paste them into a text or note-taking program, where you can more easily search the HTML code. Search for the name of the social media platform you want to customize, such as Facebook or Twitter. Near, for example, <!– Facebook link: You’ll find both the link to the social media site and the URL for the icon that appears in the template. In the example below, you need to replace the URL after ` src="` with the URL for the icon, and after `href=”`, you need to add the URL the recipient should be directed to when they click. Both URLs are highlighted in bold.
<!-- Facebook link: Change "href" to the url of your Facebook page -->
<a href="https://www.facebook.com/" target="_blank">
<!-- Facebook image: Change "src" if you want a different image -->
<img src="https://img.heyloyalty.com/heyloyalty1/system%2Ffacebook" width="50" style="margin:0 auto; padding:0; border:none; display:block;" border="0" alt="facebook" />
</a>
</td>
<td width="300" class="mobile50" style="font-family:arial; font-size:12px; line-height:18px;" align="center">
<!-- Twitter link: Change "href" to the url of your Twitter page -->
<a href="https://twitter.com/" target="_blank">
<!-- Twitter image: Change "src" if you want a different image -->
<img src="https://img.heyloyalty.com/heyloyalty1/system%2Fx" width="50" style="margin:0 auto; padding:0; border:none; display:block;" border="0" alt="twitter" />
Once you’ve replaced the URL for the icon, we recommend that you create a new template with the customized HTML code. That way, you’ll avoid overwriting your existing template.
Once you’ve saved the new template, you can check the change in the preview and make sure the new icon appears correctly.
Change the USPs in the template
If your HTML template contains 1 to 3 USPs, you can edit the text directly in the template’s HTML code. To do this, go to Templates in Heyloyalty. Go to Templates in Heyloyalty and find the template you want to customize. Click the three dots next to the template and select ” Edit Template.”
We recommend that you copy the entire HTML code from the template and paste it into a text editor or note-taking program. This will make it easier for you to search for the text you want to change. Search for a few words from the USP you want to change. That way, you can find the relevant text in the HTML code. For example, if your USP says “Free shipping on orders over 499,” you can search for that text in the program.
Once you’ve found the text, replace it with the new text you want to display. In the example below, the three USPs that need to be changed in the template are highlighted in bold:
<!-- Start USPs -->
<table width="760" cellpadding="0" cellspacing="0" border="0" class="fullWidth" bgcolor="#ffffff">
<tr>
<td align="center">
<!-- Start Container -->
<table width="660" cellpadding="0" cellspacing="0" border="0" class="fullWidth">
<tr>
<th width="220" class="mobileFull" style="font-family: Georgia, 'Times New Roman', Times, serif, Arial, sans-serif; color:#000000;font-size:14px;text-decoration:none; font-weight:normal;" align="center">
✔ Gratis fragt over 499,-
</th>
<th width="220" class="mobileFull paddingTop10" style="font-family: Georgia, 'Times New Roman', Times, serif, Arial, sans-serif; color:#000000;font-size:14px;text-decoration:none; font-weight:normal;" align="center">
✔ Dag til dag levering
</th>
<th width="220" class="mobileFull paddingTop10" style="font-family: Georgia, 'Times New Roman', Times, serif, Arial, sans-serif; color:#000000;font-size:14px;text-decoration:none; font-weight:normal;" align="center">
✔ Afhent i butik inden for 2 timer
</th>
</tr>
</table>Once you’ve updated the text on the USPs, we recommend that you create a new template with the customized HTML code. That way, you’ll avoid overwriting your existing template.
Once you’ve saved the new template, you can check the change in the preview and make sure the new icon appears correctly.
Customize the address in the template’s footer
If you need to change the address in the footer of your HTML template, you can edit it directly in the template’s HTML code. Go to Templates in Heyloyalty and find the template you want to customize. Click the three dots next to the template and select Edit Template.
We recommend that you copy the entire HTML code from the template and paste it into a text editor or note-taking program. This will make it easier for you to search for the current address and find the relevant location in the HTML code.
Search for all or part of the address that appears in the footer. For example, if it says Nyvej 89, you can search for that text in the program. Once you’ve found the address, replace it with the new address you want to display in the footer. In the example below, the address to be changed is highlighted in bold:
<br style="display: none;" class="mobileOn" /> <a href="https://heyloyalty.com" style="font-family: Georgia, 'Times New Roman', Times, serif, Arial, sans-serif; color:#000000; font-size:14px; font-weight:normal; line-height:18px; text-decoration:none;">Nyvej 89</a>In the example above, Nyvej 89 should be replaced with the new address.
Once you’ve changed the address, we recommend that you create a new template with the customized HTML code. That way, you’ll avoid overwriting your existing template.
Once you’ve saved the new template, you can check the change in the preview and make sure the new address appears correctly in the footer.
Make your HTML template your own
With just a few tweaks, you can customize your HTML template to better suit your business and brand identity. Once your logo, social media links, USPs, and contact information are in place, you’ll have a template that’s ready to serve as the foundation for your future mailings.
Always remember to check your changes in the preview before you start using the template. We also recommend that you test the template on both desktop and mobile devices to ensure that it displays correctly on different devices. When you test your template, you can be sure that the content displays the way you want it to.