Skip to main content
Español Français

Get help for

WebSelf Editor Simplified

Advanced customization of email templates - For experienced webmasters

  • Updated
 

You can send customer order notifications, marketing emails, or admin notifications. Email templates are a mix of the HTML and Freemarker code. Each template has message keys, variables and markup that are responsible for different parts of the email. You have the ability to customize any template by altering its code. This includes tasks such as adding or removing text, incorporating images, adjusting text size or color, and more.

If you want to add a logo to emails or change company info, it’s enough to change settings in your store admin without editing the code.

Only for experienced webmasters.

Table of content

Changing the subject of the customer notifications email

The subject line is the title that customers see when they receive an email. Changing the subject of an email can help personalize your notifications and make them more engaging for recipients.

To change the subject of the email:

  1. From your store admin, go to Settings → Notifications.
  2. In the Customer order notifications section, open the email template you want to edit.
  3. In the Subject field, remove the code and enter your text that will be displayed in the email. In our example, the new title is “Here’s your new order”:

    Advanced_customization_of_email_templates___1_.gif

That’s it. Now the email subject will be the one you specified:

Advanced_customization_of_email_templates___8_.png

Changing customer greetings in emails

By default, all customer emails start with the “Hello John Darling” greeting, where “John Darling” is an example of a name that is replaced with an actual customer name in each email. The greeting continues with the brief information regarding the email subject. For example, in the Order confirmation email, the second line is “We have received your order! Thank you for your purchase”.

You can change both the greeting itself and the following lines by changing the rosetta.message keys of the email.

Let’s say you want to change the Order confirmation greeting to: “Hey John Darling! Thank you for your trust! We received your order. We will contact you to confirm the delivery time.”

To change the greeting in an email notification:

  1. From your store admin, go to Settings → Notifications.
  2. Click Edit next to an email template you want to edit. In our example, it’s the Order Confirmation email template.
  3. Find line with message key that contains the “Hello” part: <@rosetta.message key="OrderConfirmation.customer_greeting" params={ "customerName": customer.name } /> :

    Advanced_customization_of_email_templates___4_.png

  4. Replace all the text in this line with your message. In our example, it’s Hey ${customer.name},
  5. Find line that contains the order confirmation part: <@rosetta.message key="OrderConfirmation.Confirmation.paid_order" params={ "storeName": store.name?html, "dateCreated": order.dateCreated } />
  6. Replace all the text in this line with your message. In our example, it’s Thank you for your trust! We received your order <@orderLink/>. We will contact you to confirm the delivery time.
  7. Save the changes.

Now your customers will see the customized greetings in their Order confirmation emails:

Advanced_customization_of_email_templates___10_.png

Adding text to the customer order notifications

You have the option to add custom text to any email notification. For instance, if you want to inform your customers about a contest running on Facebook, adding a short paragraph to the Order confirmation email will draw attention to your contest.

A text paragraph can be added to any part of the email. In our example, it will be the “Thank you” section at the end of the email.

Note:

Gray markups will help you to navigate through the template.

 

To add a new content to the email template:

  1. From your store admin, go to Settings → Notifications.
  2. Click Edit next to the customer email template you want to update.
  3. Find the section where you want to add text. In our example, it’s the “Thank you” section that is located between the <!-- Store contact info and help note : start --> and <!-- Store contact info and help note : start --> markups near the bottom of the template.
  4. Add the following piece of code just above the <!-- Store contact info and help note : start --> line: 
    
 <td align="left" valign="top" style="padding-top: 40px; padding-bottom: 0;">
        <p style="font-family: ${fontFamily}; font-size: 16px; line-height: 24px; color: ${colorText}; margin: 0; padding: 0;">
          ADD YOUR TEXT MESSAGE HERE
        </p>
      </td>
    </tr>
  5. Replace the Add your text message here with your own text. It will look like this:

    Advanced_customization_of_email_templates___9_.png

  6. Click Save.

Done. Your custom message will appear at the bottom of the email, after the Thank you message. Click Preview template to see the updated email template:

Advanced_customization_of_email_templates___5_.png

Adding images to email notifications

Images can be particularly effective when you aim to capture customers' attention towards a specific event, promotion, product, or any other element you wish to emphasize. You have the capability to add a picture in .jpeg or .img format to any email template, enhancing its visual appeal and impact.

To add an image to an email template:

  1. Upload your image to any image hosting. For example, ImgBB, Free Image Host, or else.
  2. Open the image in your browser and copy the image address. It should end with .png, .jpeg, or .img.
  3. From your store admin, go to Settings → Notifications.
  4. Open the email template you want to edit.
  5. Click Preview template to decide on which part of the email you want your image to appear. In our example, the image goes after the “Thank you for shopping with us” part.
  6. In the template, find the part of an email where you want to add an image. Use markups and message keys to navigate the code. In our example, the “Thank you part” of the email is located between the <!-- Store contact info and help note : start --> and <!-- Store contact info and help note : end --> lines of code.
  7. Add the following piece of code where you want to show the image: <img src="URL">, where URL is the link to an image you copied on step 2:

    Advanced_customization_of_email_templates___2_.png

  8. Click Save.

Done. Now your image will appear in the email template:

Advanced_customization_of_email_templates___6_.png

Changing color of the text in the email notification

It is possible to brand an email with your business-specific colors. In the email template, the ${colorText} markup defines colors of different text blocks. So all you need to do is set the color markup parameter to the HTML code for any specific color.

Let’s say you want to change the greetings color to green. The HTML code for green is #45B212.

Note:
You can find the code for any color on the HTML Color Codes site.

 

To change the text color in the emails:

  1. From your store admin, go to Settings → Notifications.
  2. Click Edit next to the email template you want to update.
  3. Find the ${colorText} element near the text section you want to update. To speed up the process, press Ctrl + F (Command + F on Mac) to find the markup. The text color markup will be above the message key it relates to. In our example, it’s the greetings part:

    Advanced_customization_of_email_templates___3_.png

  4. Replace the ${colorText} with the HTML color code. In our example, it’s #45B212 for green color:

    Advanced_customization_of_email_templates___1_.png

  5. Click Save.

Now the greeting in the email template will be green:

Advanced_customization_of_email_templates___7_.png

Adding clickable tracking number to a custom rate shipping

You can add a tracking number to an order. Your customers will get an email notification about the shipped order with a clickable tracking number. Once they click the Track your package title from the email, they will be redirected to the carriers’ website.

However, a tracking number is clickable only if you use carrier-calculated rates and ship with UPS, USPS, FedEx, Royal Mail, Australia Post, or Canada Post. If you ship with flat rates, custom table rates, or use any other shipping service, the tracking number won’t redirect buyers to the carriers’ website. Yet, it’s possible to manually edit the Ship Order email template to make a tracking number clickable so your clients would be redirected to a carriers’ website to track their order.

To add a link to a tracking page on a carrier's website:

  1. From your store admin, go to Settings → Notifications.
  2. In the Customer order notifications section, open the Order Shipped email template.
  3. Find the piece of code in the template body that starts with the “Order tracking number start” and ends with the “Order tracking number end”. Usually, it’s 73-102 lines of code:

    Advanced_customization_of_email_templates___11_.png

  4. Replace the above code with the following, where LINK_TO_CARRIERS_WEBSITE is the actual link to the site where a customer can track their order: 
    
<!-- Order tracking number : start -->
 <#if order.trackingNumber?has_content>
      <tr>
          <td align="center" valign="top" style="font-family: Arial,sans-serif;font-size: 14px;line-height: 24px;padding-top: 35px;">
             <#if order.shippingMethod.carrierName?has_content>
                <b><@rosetta.message key="OrderShipped.OrderTracking.number_with_shipping_method" params={ "carrierName": order.shippingMethod.carrierName } /></b>
                <#else>
                <b><@rosetta.message key="OrderShipped.OrderTracking.number" /></b>
             </#if>
           </td>
       </tr>
       <tr>
           <td align="center" valign="top" style="font-family: Arial,sans-serif;font-size: 24px;line-height: 30px;padding-top: 1px; color: #333333;">
                                        ${order.trackingNumber}
           </td>
       </tr>
 <#if order.trackingUrl?has_content>
       <tr>
           <td align="center" valign="top" style="font-family: Arial,sans-serif;font-size: 14px;line-height: 24px;padding-top: 16px;color: #333333;">
                                        <a href="LINK_TO_CARRIERS_WEBSITE" style="text-decoration: none;"><b><@rosetta.message key="OrderShipped.OrderTracking.link_text" /></b></a>
            </td>
       </tr>
 </#if>
       <tr>
           <td style="font-size:1px; line-height: 23px;"> </td>
       </tr>
<!-- Order tracking number : end -->
  5. Click Save.

Now, your customers will receive an email containing a link to your carrier’s website. When they click on the link, they will be redirected to the website that you specified in the email template. On this website, they can input the tracking number provided in the Order Shipped email to track their package.

Adding the repeat orders block

With repeat orders, your customers can reorder items by clicking the “Buy Again” button in the Order Confirmation email they got for the original order. In case you had customized your Order Confirmation template before repeat orders became available in your online store, you can add this block manually.

To add the repeat orders block:

  1. From your store admin, go to Settings → Notifications.
  2. In the Customer order notifications section, open the Order confirmation email template.
  3. Find the <!-- block-related-products: end --> line — or any other place where you want the block to appear — and add the following piece of code: 
    
    <!-- block-repeat-order: start -->
                <#if repeatOrder??>
                    <tr>
                        <td align="left" valign="top" style="padding-top: 40px;">
                            <table cellpadding="0" cellspacing="0" border="0" style="width: 100%; min-width: 100%;">
                                <tr>
                                    <td align="left" valign="top" style="<@styleSubtitle />">
                                        <@rosetta.message key="OrderConfirmation.RepeatOrder.title" />
                                    </td>
                                </tr>
                                <tr>
                                    <td align="left" valign="top" style="padding-top: 10px; <@styleText />">
                                        <@rosetta.message key="OrderConfirmation.RepeatOrder.description" />
                                    </td>
                                </tr>
                                <tr>
                                    <td align="left" valign="top" style="padding-top: 20px;">
                                        <#assign goToStoreButtonText><@rosetta.message key="OrderConfirmation.RepeatOrder.button" /></#assign>
                                        <@secondaryButton repeatOrder.url goToStoreButtonText 290 colorBlue "full-width-mobile" />
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </#if>
                <!-- block-repeat-order: end -->
  4. Click Save.

Now your customers will see the repeat orders block in their Order Confirmation emails:

Repeat_order_button.png

 
 

Related articles

Powered by Zendesk