{"id":5278,"date":"2026-08-19T09:13:19","date_gmt":"2026-08-19T07:13:19","guid":{"rendered":"https:\/\/guides.heyloyalty.com\/help\/customize-the-html-template\/"},"modified":"2026-08-19T09:18:10","modified_gmt":"2026-08-19T07:18:10","slug":"customize-the-html-template","status":"publish","type":"ht_kb","link":"https:\/\/guides.heyloyalty.com\/en\/help\/customize-the-html-template\/","title":{"rendered":"Customize the HTML template"},"content":{"rendered":"<div class=\"wp-block-post-date__modified-date wp-block-post-date\"><time datetime=\"2026-08-19T09:18:10+02:00\">19. August 2026<\/time><\/div>\n<p class=\"wp-block-paragraph\">Under the <strong>&#8220;Templates<\/strong> &#8221; menu item, you&#8217;ll find the HTML templates created in Heyloyalty.<\/p>\n\n<p class=\"wp-block-paragraph\">In this guide, you&#8217;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 <a href=\"https:\/\/guides.heyloyalty.com\/en\/help\/email-templates\/\">standard HTML templates<\/a>. <\/p>\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-info wp-block-paragraph\"><strong>Note:<\/strong> If you want to make more complex changes to the HTML template, we recommend that you seek help from a developer. You should only make major changes yourself if you have experience with HTML code. <\/p>\n\n<p class=\"wp-block-paragraph\">Images for this guide will be added later.  <\/p>\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n<h2 class=\"wp-block-heading\">Adjust the logo in your template<\/h2>\n\n<p class=\"wp-block-paragraph\">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\u2019s URL. You\u2019ll need the URL when you edit the HTML code in the template.  <\/p>\n\n<p class=\"wp-block-paragraph\">Go to <strong>Templates<\/strong> in Heyloyalty. Find the template you want to customize. Click the three dots next to the template and select <strong>Edit Template<\/strong>.  <\/p>\n\n<p class=\"wp-block-paragraph\">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 &#8221; <strong>logo<\/strong>.&#8221; Find the following comment in the code: <code>&lt;!-- start logo --&gt;<\/code>. Below this comment, you\u2019ll find the <strong>`img<\/strong> ` tag that contains the logo. Here, locate the ` <code>src<\/code> ` attribute, which contains the URL for the current logo. In the example below, replace the URL after ` <code>src=\"<\/code>` with the URL for your new logo. (Highlighted in bold)      <\/p>\n\n<pre class=\"wp-block-code\"><code>&lt;!-- start logo --&gt;            \n&lt;table width=\"720\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" class=\"fullWidth\" bgcolor=\"#FFFFFF\"&gt;\n                &lt;tr&gt;\n                      &lt;td height=\"25\" style=\"font-size:25px; line-height:25px; height:25px;\"&gt; &lt;\/td&gt;\n                    &lt;!-- Spacer --&gt;\n                &lt;\/tr&gt;\n                &lt;tr&gt;\n                    &lt;td width=\"720\" class=\"wrapper\" align=\"center\"&gt;\n                        &lt;a href=\"https:\/\/heyloyalty.com\/\" target=\"_blank\"&gt;\n                            &lt;img src=\"<strong>https:\/\/images.heyloyalty.dk\/uploads\/media_image\/18011\/image\/Heyloaylty_logo_orange.png<\/strong>\" width=\"180\" style=\"margin:0; padding:0; border:none; display:block;\" border=\"0\" alt=\"heyloyalty\" \/&gt;<\/code><\/pre>\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-info wp-block-paragraph\"><strong>Note:<\/strong> Be sure to replace only the URL between the quotation marks. Avoid changing the rest of the <strong>img<\/strong> tag unless you have experience with HTML. <\/p>\n\n<p class=\"wp-block-paragraph\">Once you&#8217;ve replaced the URL for the logo, we recommend that you <a href=\"https:\/\/guides.heyloyalty.com\/en\/help\/email-templates\/\">create a new template<\/a> with the customized HTML code. That way, you&#8217;ll avoid overwriting your existing template. <\/p>\n\n<p class=\"wp-block-paragraph\">Once you&#8217;ve saved the new template, you can check the change in the preview to make sure the new logo appears correctly.<\/p>\n\n<h2 class=\"wp-block-heading\">Customizing Social Media Icons in a Template<\/h2>\n\n<p class=\"wp-block-paragraph\">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. <\/p>\n\n<p class=\"wp-block-paragraph\">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. <\/p>\n\n<p class=\"wp-block-paragraph\">Go to <strong>Templates<\/strong> in Heyloyalty. Find the template you want to customize. Click the three dots next to the template and select <strong>Edit Template<\/strong>.  <\/p>\n\n<p class=\"wp-block-paragraph\">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 <strong>Facebook<\/strong> or <strong>Twitter<\/strong>. Near, for example,    &lt;!&#8211; Facebook link: You&#8217;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 ` <code>src=\"<\/code>` with the URL for the icon, and after `href=&#8221;`, you need to add the URL the recipient should be directed to when they click. Both URLs are highlighted in <strong>bold<\/strong>.  <\/p>\n\n<pre class=\"wp-block-code\"><code>&lt;!-- Facebook link: Change \"href\" to the url of your Facebook page --&gt;\n                                        &lt;a href=\"<strong>https:\/\/www.facebook.com\/<\/strong>\" target=\"_blank\"&gt;\n                                            &lt;!-- Facebook image: Change \"src\" if you want a different image --&gt;\n                                            &lt;img src=\"<strong>https:\/\/img.heyloyalty.com\/heyloyalty1\/system%2Ffacebook<\/strong>\" width=\"50\" style=\"margin:0 auto; padding:0; border:none; display:block;\" border=\"0\" alt=\"facebook\" \/&gt;\n                                        &lt;\/a&gt;\n                                    &lt;\/td&gt;\n                                    &lt;td width=\"300\" class=\"mobile50\" style=\"font-family:arial; font-size:12px; line-height:18px;\" align=\"center\"&gt;\n                                        &lt;!-- Twitter link: Change \"href\" to the url of your Twitter page --&gt;\n                                        &lt;a href=\"https:\/\/twitter.com\/\" target=\"_blank\"&gt;\n                                            &lt;!-- Twitter image: Change \"src\" if you want a different image --&gt;\n                                            &lt;img src=\"<strong>https:\/\/img.heyloyalty.com\/heyloyalty1\/system%2Fx<\/strong>\" width=\"50\" style=\"margin:0 auto; padding:0; border:none; display:block;\" border=\"0\" alt=\"twitter\" \/&gt;\n<\/code><\/pre>\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-info wp-block-paragraph\"><strong>Note:<\/strong> Replace only the URL between the quotation marks. Do not change the rest of<strong> the src and href tags <\/strong>unless you have experience with HTML. <\/p>\n\n<p class=\"wp-block-paragraph\">Once you&#8217;ve replaced the URL for the icon, we recommend that you <a href=\"https:\/\/guides.heyloyalty.com\/en\/help\/email-templates\/\">create a new template<\/a> with the customized HTML code. That way, you&#8217;ll avoid overwriting your existing template. <\/p>\n\n<p class=\"wp-block-paragraph\">Once you&#8217;ve saved the new template, you can check the change in the preview and make sure the new icon appears correctly.<\/p>\n\n<h2 class=\"wp-block-heading\">Change the USPs in the template<\/h2>\n\n<p class=\"wp-block-paragraph\">If your HTML template contains 1 to 3 USPs, you can edit the text directly in the template\u2019s HTML code. To do this, go to <strong>Templates<\/strong> in Heyloyalty. Go to <strong>Templates<\/strong> in Heyloyalty and find the template you want to customize. Click the three dots next to the template and select &#8221; <strong>Edit Template<\/strong>.&#8221;   <\/p>\n\n<p class=\"wp-block-paragraph\">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 <strong>\u201cFree shipping on orders over 499<\/strong>,\u201d you can search for that text in the program.    <\/p>\n\n<p class=\"wp-block-paragraph\">Once you&#8217;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 <strong>bold<\/strong>: <\/p>\n\n<pre class=\"wp-block-code\"><code>&lt;!-- Start USPs -->\n\t\t\t\t\t\t\t&lt;table width=\"760\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" class=\"fullWidth\" bgcolor=\"#ffffff\">\n\t\t\t\t\t\t\t\t&lt;tr>\n\t\t\t\t\t\t\t\t\t&lt;td align=\"center\">\n\t\t\t\t\t\t\t\t\t\t&lt;!-- Start Container -->\n\t\t\t\t\t\t\t\t\t\t&lt;table width=\"660\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" class=\"fullWidth\">\n\t\t\t\t\t\t\t\t\t\t\t&lt;tr>\n\t\t\t\t\t\t\t\t\t\t\t\t&lt;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\">\n\t\t\t\t\t\t\t\t\t\t\u2714 <strong>Gratis fragt over 499,-<\/strong>\n\t\t\t\t\t\t\t\t\t\t\t\t&lt;\/th>\n\t\t\t\t\t\t\t\t\t\t\t\t&lt;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\">\n\t\t\t\t\t\t\t\t\t\t\t\u2714 <strong>Dag til dag levering<\/strong>\n\t\t\t\t\t\t\t\t\t\t\t\t&lt;\/th>\n\t\t\t\t\t\t\t\t\t\t\t\t&lt;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\">\n\t\t\t\t\t\t\t\t\t\u2714 <strong>Afhent i butik inden for 2 timer<\/strong>\n\t\t\t\t\t\t\t\t\t\t\t\t&lt;\/th>\n\t\t\t\t\t\t\t\t\t\t\t&lt;\/tr>\n\t\t\t\t\t\t\t\t\t\t&lt;\/table><\/code><\/pre>\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-info wp-block-paragraph\"><strong>Note:<\/strong> Replace only the text on the USB drive itself. You should not change the contents of   <strong>&lt; &gt;<\/strong>, unless you have experience with HTML.<\/p>\n\n<p class=\"wp-block-paragraph\">Once you&#8217;ve updated the text on the USPs, we recommend that you <a href=\"https:\/\/guides.heyloyalty.com\/en\/help\/email-templates\/\">create a new template<\/a> with the customized HTML code. That way, you&#8217;ll avoid overwriting your existing template. <\/p>\n\n<p class=\"wp-block-paragraph\">Once you&#8217;ve saved the new template, you can check the change in the preview and make sure the new icon appears correctly.<\/p>\n\n<h2 class=\"wp-block-heading\">Customize the address in the template&#8217;s footer  <\/h2>\n\n<p class=\"wp-block-paragraph\">If you need to change the address in the footer of your HTML template, you can edit it directly in the template&#8217;s HTML code. Go to <strong>Templates<\/strong> in Heyloyalty and find the template you want to customize. Click the three dots next to the template and select <strong>Edit Template<\/strong>.  <\/p>\n\n<p class=\"wp-block-paragraph\">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. <\/p>\n\n<p class=\"wp-block-paragraph\">Search for all or part of the address that appears in the footer. For example, if it says <strong>Nyvej 89<\/strong>, you can search for that text in the program. Once you\u2019ve 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 <strong>bold<\/strong>:   <\/p>\n\n<pre class=\"wp-block-code\"><code>&lt;br style=\"display: none;\" class=\"mobileOn\" \/> &lt;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;\"><strong>Nyvej 89<\/strong>&lt;\/a><\/code><\/pre>\n\n<p class=\"wp-block-paragraph\">In the example above, <strong>Nyvej 89<\/strong> should be replaced with the new address.<\/p>\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-info wp-block-paragraph\"><strong>Note:<\/strong> Replace only the address itself. You should not change the rest of the HTML code or the content in   <strong>&lt; &gt;<\/strong>, unless you have experience with HTML.<\/p>\n\n<p class=\"wp-block-paragraph\">Once you&#8217;ve changed the address, we recommend that you <a href=\"https:\/\/guides.heyloyalty.com\/en\/help\/email-templates\/\">create a new template<\/a> with the customized HTML code. That way, you&#8217;ll avoid overwriting your existing template. <\/p>\n\n<p class=\"wp-block-paragraph\">Once you&#8217;ve saved the new template, you can check the change in the preview and make sure the new address appears correctly in the footer.<\/p>\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n<h2 class=\"wp-block-heading\">Make your HTML template your own<\/h2>\n\n<p class=\"wp-block-paragraph\">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\u2019ll have a template that\u2019s ready to serve as the foundation for your future mailings. <\/p>\n\n<p class=\"wp-block-paragraph\">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.  <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Under the &#8220;Templates &#8221; menu item, you&#8217;ll find the HTML templates created in Heyloyalty. In this guide, you&#8217;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. Note: If you want&#8230;<\/p>\n","protected":false},"author":7,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[69],"ht-kb-tag":[],"class_list":["post-5278","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-templates"],"_links":{"self":[{"href":"https:\/\/guides.heyloyalty.com\/en\/wp-json\/wp\/v2\/ht-kb\/5278","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/guides.heyloyalty.com\/en\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/guides.heyloyalty.com\/en\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/guides.heyloyalty.com\/en\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/guides.heyloyalty.com\/en\/wp-json\/wp\/v2\/comments?post=5278"}],"version-history":[{"count":2,"href":"https:\/\/guides.heyloyalty.com\/en\/wp-json\/wp\/v2\/ht-kb\/5278\/revisions"}],"predecessor-version":[{"id":5280,"href":"https:\/\/guides.heyloyalty.com\/en\/wp-json\/wp\/v2\/ht-kb\/5278\/revisions\/5280"}],"wp:attachment":[{"href":"https:\/\/guides.heyloyalty.com\/en\/wp-json\/wp\/v2\/media?parent=5278"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/guides.heyloyalty.com\/en\/wp-json\/wp\/v2\/ht-kb-category?post=5278"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/guides.heyloyalty.com\/en\/wp-json\/wp\/v2\/ht-kb-tag?post=5278"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}