How to Design and Configure Branded Email Notifications?
17TRACK provides a visual email editor that allows you to quickly create beautifully designed emails aligned with your brand style—all without coding. You can easily complete email template design and configuration by dragging and dropping components, inserting dynamic variables, and promoting products, enhancing buyer experience and brand image.
I. Preparation
Before you start editing emails, please ensure you have the following design materials ready:
- Design the overall email page structure, store logo, and marketing campaign images;
- Download store email-specific images with a width of 600px to your local device (this is the standard display size for emails).
II. Accessing the Email Template Editing Page
Operation Path:
17TRACK Backend > Notifications > Find the template you want to modify in the email template list > Click the ··· (three dots) icon on the right > Select 「Edit Template」.
You can choose to edit the following two types of templates:
- Status Change Emails: Automatically triggered by changes in order logistics status (e.g., "In Transit," "Successfully Delivered," "Exception Delay");
- Custom Rule Emails: Triggered based on conditions and rules you set (e.g., "Not delivered after 7 days," "Customer opened email").
III. Core Operations of the Visual Editor
The editor features a "what you see is what you get" drag-and-drop interface, with a component library on the left and a real-time preview area on the right.
1. Drag Content Blocks to Build Email Layout
The left component library offers a wide range of content blocks that you can directly drag and drop into the central canvas area:
- Components include: Columns, Product Recommendations, Button, Divider, Heading, Paragraph, Image, Video, Social, Menu, HTML, Table.
2. Select Content Blocks to Adjust Styles and Spacing on the Right
Click on any content block in the canvas; the right panel will display style editing options for that block, allowing you to freely adjust as needed:
- Text: Set color, alignment, line height, letter spacing, etc.;
- Links: Set link color, underline style, etc.;
- General: Adjust container padding (top/right/bottom/left);
- Responsive Design: You can choose to hide the content block on desktop versions for precise content adaptation across devices;
- Undo & Redo: The bottom of the panel supports Undo (
Ctrl+Z) and Redo (Ctrl+Y) for more flexible editing; - Delete & Duplicate: After selecting a content block, you can click the delete or duplicate icon to operate on the current block.
3. Insert Merge Tags for Personalized Content
By inserting merge tags, you can dynamically display each customer's exclusive information in the email, for example:
- Customer name, email, order number;
- Tracking number, carrier name, estimated delivery date;
- Store name, store email, etc.
4. Multilingual Email Content Configuration (Optional)
If your customers are global, you can configure multiple language versions for the same email template:
- Switch Languages: The top-left corner of the editor provides a language dropdown menu, allowing you to switch the current editing language environment (e.g., English, Chinese, Japanese, French, etc.).
- Add Languages: Click 「Manage Languages」 to add more supported languages and independently edit email content for each language.
- Sending Logic: The system will automatically send the corresponding language version of the email based on the customer's order language. If the order language information is empty or does not match any language you have configured, the default language (English) will be used.
5. Promote Store Products (Two Modes)
You can embed product recommendation sections in your emails to boost repeat purchases and conversions:
- Automatic Recommendations
Directly drag the "Product Recommendation" component into the email. The system will automatically push relevant products based on the recipient's browsing and purchase history. No need to manually upload images and links, and the recommendation logic is continuously optimized by Shopify's intelligent algorithm.
- Manual Custom Promotion
Upload product images, fill in product names, prices, and purchase links yourself. Suitable for promoting specific events, new products, or brand stories.
6. Edit Email Footer and Social Media Links
The email footer typically contains brand social media icons and an unsubscribe notice. We provide a ready-to-use HTML code block; you just need to:
- Replace the example social media links in the code (e.g.,
https://twitter.com/YOUR_TWITTER) with your own brand's social media addresses; - Adjust icon styles, sizes, or arrangements as needed.
📎 Footer Social Media HTML Code (Ready to Copy and Use):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="x-apple-disable-message-reformatting">
<!--[if !mso]><!--><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--<![endif]-->
<title></title>
<style type="text/css">
@media only screen and (min-width: 620px) {
.u-row { width: 600px !important; }
.u-row .u-col { vertical-align: top; }
.u-row .u-col-100 { width: 600px !important; }
}
@media (max-width: 620px) {
.u-row-container { max-width: 100% !important; padding-left: 0px !important; padding-right: 0px !important; }
.u-row .u-col { min-width: 320px !important; max-width: 100% !important; display: block !important; }
.u-row { width: 100% !important; }
.u-col { width: 100% !important; }
.u-col > div { margin: 0 auto; }
}
a[x-apple-data-detectors='true'] { color: inherit !important; text-decoration: none !important; }
@media (max-width: 480px) { .hide-mobile { max-height: 0px; overflow: hidden; display: none !important; } }
@media (max-width: 480px) { #u_content_menu_1 .v-padding { padding: 5px 10px !important; } #u_content_text_deprecated_2 .v-container-padding-padding { padding: 10px 10px 40px !important; } }
</style>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" type="text/css">
</head>
<body class="clean-body u_body" style="margin: 0;padding: 0;-webkit-text-size-adjust: 100%;background-color: #ecf0f1;color: #000000">
<table style="border-collapse: collapse;table-layout: fixed;border-spacing: 0;mso-table-lspace: 0pt;mso-table-rspace: 0pt;vertical-align: top;min-width: 320px;Margin: 0 auto;background-color: #ecf0f1;width:100%" cellpadding="0" cellspacing="0">
<tbody><tr style="vertical-align: top"><td style="word-break: break-word;border-collapse: collapse !important;vertical-align: top">
<div class="u-row-container" style="padding: 0px;background-color: transparent">
<div class="u-row" style="Margin: 0 auto;min-width: 320px;max-width: 600px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: transparent;">
<div style="border-collapse: collapse;display: table;width: 100%;height: 100%;background-color: transparent;">
<div class="u-col u-col-100" style="max-width: 320px;min-width: 600px;display: table-cell;vertical-align: top;">
<div style="background-color: #ffffff;height: 100%;width: 100% !important;border-radius: 0px;">
<div style="box-sizing: border-box; height: 100%; padding: 0px;">
<table style="font-family:'Open Sans',sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody><tr><td style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:'Open Sans',sans-serif;" align="left">
<div align="center">
<div style="line-height: 160%; text-align: center; word-wrap: break-word;">
<p style="font-size: 24px; line-height: 160%;margin-bottom: 20px; font-weight: 600;">Follow us on</p>
</div>
<div style="display: table; max-width:100%;">
<table align="left" border="0" cellspacing="0" cellpadding="0" width="32" height="32" style="width: 32px !important;height: 32px !important;display: inline-block;margin-right: 35px">
<tbody><tr><td align="left" valign="middle">
<a href="https://www.facebook.com/YOUR_FACEBOOK" target="_blank">
<img src="https://cdn.tools.unlayer.com/social/icons/rounded/facebook.png" alt="Facebook" width="32" style="outline: none;border: none;height: auto;max-width: 32px !important;">
</a>
</td></tr>
</tbody></table>
<table align="left" border="0" cellspacing="0" cellpadding="0" width="32" height="32" style="width: 32px !important;height: 32px !important;display: inline-block;margin-right: 35px">
<tbody><tr><td align="left" valign="middle">
<a href="https://twitter.com/YOUR_TWITTER" target="_blank">
<img src="https://cdn.tools.unlayer.com/social/icons/rounded/twitter.png" alt="Twitter" width="32" style="outline: none;border: none;height: auto;max-width: 32px !important;">
</a>
</td></tr>
</tbody></table>
<table align="left" border="0" cellspacing="0" cellpadding="0" width="32" height="32" style="width: 32px !important;height: 32px !important;display: inline-block;margin-right: 35px">
<tbody><tr><td align="left" valign="middle">
<a href="https://www.linkedin.com/company/YOUR_LINKEDIN" target="_blank">
<img src="https://cdn.tools.unlayer.com/social/icons/rounded/linkedin.png" alt="LinkedIn" width="32" style="outline: none;border: none;height: auto;max-width: 32px !important;">
</a>
</td></tr>
</tbody></table>
<table align="left" border="0" cellspacing="0" cellpadding="0" width="32" height="32" style="width: 32px !important;height: 32px !important;display: inline-block;margin-right: 0px">
<tbody><tr><td align="left" valign="middle">
<a href="https://www.instagram.com/YOUR_INSTAGRAM" target="_blank">
<img src="https://cdn.tools.unlayer.com/social/icons/rounded/instagram.png" alt="Instagram" width="32" style="outline: none;border: none;height: auto;max-width: 32px !important;">
</a>
</td></tr>
</tbody></table>
</div>
</div>
</td></tr>
</tbody></table>
<table style="font-family:'Open Sans',sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody><tr><td style="overflow-wrap:break-word;word-break:break-word;padding:30px 10px 20px;font-family:'Open Sans',sans-serif;" align="left">
<div style="line-height: 160%; text-align: center; word-wrap: break-word;">
<p style="font-size: 12px; line-height: 160%;">This email has been generated automatically and is sent from a notification-only address. Kindly refrain from replying to this message. To stop receiving all emails, you may unsubscribe.</p>
</div>
</td></tr>
</tbody></table>
</div>
</div>
</div>
</div>
</div>
</div>
</td></tr></tbody></table>
</body>
</html>
IV. Preview and Test
1. Multi-Device Real-Time Preview
The editor features a built-in Desktop and Mobile preview toggle, allowing you to check the email's display effect on different screen sizes at any time, promptly identifying and adjusting issues like layout misalignment or overly small fonts.
2. Send a Test Email
Click the 「Send Test Email」 button in the top-right corner of the editor, enter your test email address, and the system will immediately send a real email using your current design.
V. Save and Activate
After editing, click the 「Save」 button. All notification emails associated with this template will take effect immediately. Emails triggered subsequently will use the branded version you have just designed.
By following the steps above, you can quickly create professional, highly personalized branded email notifications with a consistent style. This not only enhances the logistics tracking experience for your buyers but also strengthens brand recognition and customer loyalty. If you have any questions, please feel free to contact the 17TRACK customer support team.
Updated on: 15/04/2026
Thank you!