2-Step Guide to Magento 2 Override Email Template

• How To Determine the Template ID to Override?

• How to Override order_new.html Email Template in Custom Module in Magento 2

• Tools Used To Override Email Templates

• FAQs

• Summary

How To Determine the Template ID to Override?

How to Override order_new.html Email Template in Custom Module in Magento 2

Step 1: Create app/code/Vendor/Module/etc/email_templates.xml with the following code:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Email:etc/email_templates.xsd">
    <template id="sales_email_order_template" label="New Order" file="custom_order_new.html" type="html" module="Vendor_Module" area="frontend"/>
</config>

Step 2: Please create the file custom_order_new.html under the path Vendor/Module/view/frontend/email/ and add the following code:

<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<!--@subject {{trans "Your %store_name order confirmation" store_name=$store.frontend_name}} @-->
<!--@vars {
"var formattedBillingAddress|raw":"Billing Address",
"var order_data.email_customer_note|escape|nl2br":"Email Order Note",
"var order.increment_id":"Order Id",
"layout handle=\"sales_email_order_items\" order=$order area=\"frontend\"":"Order Items Grid",
"var payment_html|raw":"Payment Details",
"var formattedShippingAddress|raw":"Shipping Address",
"var order.shipping_description":"Shipping Description",
"var shipping_msg":"Shipping message",
"var created_at_formatted":"Order Created At (datetime)",
"var store.frontend_name":"Store Frontend Name",
"var store_phone":"Store Phone",
"var store_email":"Store Email",
"var store_hours":"Store Hours",
"var this.getUrl($store,'customer/account/',[_nosid:1])":"Customer Account URL",
"var order_data.is_not_virtual":"Order Type",
"var order":"Order",
"var order_id": "Order DB Id",
"var order_data.customer_name":"Customer Name"
} @-->
{{template config_path="design/email/header_template"}}
<table>
    <tr class="email-intro">
        <td>
            <p class="greeting">{{trans "%customer_name," customer_name=$order_data.customer_name}}</p>
            <p>
                {{trans "Thank you for your order from %store_name." store_name=$store.frontend_name}}
                {{trans "Once your package ships we will send you a tracking number."}}
                {{trans 'You can check the status of your order by <a href="%account_url">logging into your account</a>.' account_url=$this.getUrl($store,'customer/account/',[_nosid:1]) |raw}}
            </p>
            <p>
                {{trans 'If you have questions about your order, you can email us at <a href="mailto:%store_email">%store_email</a>' store_email=$store_email |raw}}{{depend store_phone}} {{trans 'or call us at <a href="tel:%store_phone">%store_phone</a>' store_phone=$store_phone |raw}}{{/depend}}.
                {{depend store_hours}}
                    {{trans 'Our hours are <span class="no-link">%store_hours</span>.' store_hours=$store_hours |raw}}
                {{/depend}}
            </p>
        </td>
    </tr>
    <tr class="email-summary">
        <td>
            <h1>{{trans 'Your Order <span class="no-link">#%increment_id</span>' increment_id=$order.increment_id |raw}}</h1>
            <p>{{trans 'Placed on <span class="no-link">%created_at</span>' created_at=$created_at_formatted |raw}}</p>
        </td>
    </tr>
    <tr class="email-information">
        <td>
            {{depend order_data.email_customer_note}}
            <table class="message-info">
                <tr>
                    <td>
                        {{var order_data.email_customer_note|escape|nl2br}}
                    </td>
                </tr>
            </table>
            {{/depend}}
            <table class="order-details">
                <tr>
                    <td class="address-details">
                        <h3>{{trans "Billing Info"}}</h3>
                        <p>{{var formattedBillingAddress|raw}}</p>
                    </td>
                    {{depend order_data.is_not_virtual}}
                    <td class="address-details">
                        <h3>{{trans "Shipping Info"}}</h3>
                        <p>{{var formattedShippingAddress|raw}}</p>
                    </td>
                    {{/depend}}
                </tr>
                <tr>
                    <td class="method-info">
                        <h3>{{trans "Payment Method"}}</h3>
                        {{var payment_html|raw}}
                    </td>
                    {{depend order_data.is_not_virtual}}
                    <td class="method-info">
                        <h3>{{trans "Shipping Method"}}</h3>
                        <p>{{var order.shipping_description}}</p>
                        {{if shipping_msg}}
                        <p>{{var shipping_msg}}</p>
                        {{/if}}
                    </td>
                    {{/depend}}
                </tr>
            </table>
            {{layout handle="sales_email_order_items" order_id=$order_id area="frontend"}}
        </td>
    </tr>
</table>
{{template config_path="design/email/footer_template"}}

Tools Used To Override Email Templates

1. Custom Modules

Custom modules offer granular control over email templates. By creating a module, developers can override specific templates. This process does not affect the core code. For example, to customize the new order email, one would create a file named order_new.html. This file goes into the module's email template directory. This approach allows for targeted modifications. It also maintains the integrity of the default system.

• Custom modules are the primary tool for overriding default Magento 2 email templates.

• They allow the creation of new templates, such as order_new.html and other custom templates.

• Custom modules provide flexibility for extensive customization of email communications.

2. PHP

PHP enables complex logic within templates. It allows for conditional content based on order value or customer type. For instance, a developer can use PHP to display different promotional offers. It is done in an order confirmation email. It is based on the customer's purchase history or loyalty status. This level of personalization can significantly enhance customer engagement.

• PHP is used for adding custom variables and logic to templates.

• It enables dynamic content insertion, such as store name and order details.

• PHP facilitates template customization in custom modules. It allows for more personalized and data-driven email content.

3. HTML and CSS

While HTML and CSS are fundamental, their application in email templates requires specific considerations. Email clients have varying levels of CSS support, making inline styles often necessary. Responsive design techniques ensure emails display correctly on all devices. These techniques include using media queries and fluid layouts for both desktop and mobile devices. This adaptability is necessary for maintaining a consistent brand experience across all platforms.

• HTML and CSS are essential for formatting email content. They ensure template styles are compatible across various email clients.

• These languages create responsive designs. They display correctly on different devices, enhancing the user experience.

4. Magento Admin Panel

The Admin Panel's customization options, while basic, can be powerful when used effectively. For example, the logo upload feature allows for quick branding changes. These changes apply across all email templates simultaneously. The template subject editing tool can be used to A/B test different subject lines to improve open rates. Store information management ensures that all templates automatically reflect current contact details. It also ensures they reflect current policies.

• The Magento Admin Panel offers built-in tools for basic template customization.

• It features logo upload functionality, template subject editing, and store information management.

• These tools allow for quick adjustments without the need for coding.

5. File System Overrides

File system overrides provide a way to change templates without creating a full module. Developers can place a new version of a template file in the appropriate theme directory. It allows them to override the default template. This method is particularly useful for quick changes or theme-specific customizations. However, it requires careful management to ensure overrides are recovered during system updates.

• File system overrides allow the placement of new template files in specific directories.

• This method enables the overriding of default email templates.

• Proper module configuration is required to install these changes effectively.

6. Transactional Email Settings

These settings offer more than basic customization. By allowing different templates for various transactional emails, businesses can tailor their communication strategy. For instance, a welcome email might use a different tone. It may also have a different content structure than an order shipment notification. It ensures that dynamic content renders correctly. It also verifies that all links and formatting appear as intended across different email clients.

• Transactional email settings provide options to customize email sender information.

• They allow the selection of different templates for various transactional emails.

• These settings also enable the testing of email templates before deployment. It ensures proper functionality.

7. Template Variables

Template variables are the key to creating personalized, data-driven emails. Beyond basic information, these variables can be used to insert complex data structures. For example, {{var order.getAllItems()}} could be used to loop through and display all items in an order. Understanding the full range of available custom variables is necessary. It helps in creating highly relevant and informative transactional emails.

• Template variables are used to insert dynamic content into email templates.

• Examples include {{var store_name}}, {{var order.increment_id}}, and {{var customer.name}}.

• These variables allow for personalized and context-specific information in emails.

8. Email Template Editor

The Email Template Editor is more powerful than it might initially appear. It allows for real-time editing and previewing of templates. It can significantly speed up the design process. Advanced users can leverage this tool to insert custom HTML and CSS. They can create complex layouts without leaving the admin interface. The preview functionality is especially valuable. It helps test how dynamic content will appear in the final email.

• The email template editor is a built-in tool in the Magento admin. It is used for modifying email templates in Magento 2.

• It allows direct editing of template content and styles.

• The editor provides preview functionality to test template appearance before finalizing changes.

FAQs

1. What is the importance of customizing email templates in Magento 2?

Customizing email templates in Magento 2 lets you create personalized messages. These messages reflect your brand and enhance the user experience for your customers.

2. How can I override the default email templates in Magento 2?

You can override the default email templates in Magento 2 by creating custom templates. These templates can be tailored to suit your business needs. Users can upload your logo using HTML tags.

3. Can I add a logo to my email templates in Magento 2?

Yes, you can add a logo to your email templates in Magento 2. Include the logo image field and upload your logo through the customization process.

4. Why would I need to override the email templates in Magento 2?

You may need to override the email templates in Magento 2. It ensures that the templates align with your branding guidelines. It provides a cohesive look across all customer communication.

5. What are the steps to customize email templates in Magento 2?

The steps to customize email templates in Magento 2 are straightforward. First, access the template information. Next, modify the content to suit your needs. Finally, save the changes to apply the customizations.

6. Can I customize the new order email template in Magento 2?

Yes, you can customize the new order email template in Magento 2. It is done by overriding the default template. You can use your custom design and content for this purpose.

7. What should I keep in mind while customizing email templates to suit my business?

While customizing email templates for your business, it is important to maintain a consistent brand identity. Use relevant content and optimize the templates for various email clients.

Summary

Magento 2 Override Email Template involves customizing default email templates used by Magento 2. It helps better align communications with their brand identity and meet specific needs. Here’s a quick recap of the tools you can use to personalize your Magento 2 emails:

• Custom Modules: Create specific templates that do not affect the core code. It maintains system integrity.

• PHP: Incorporate complex logic within templates. It allows for dynamic content that adapts based on customer behavior.

• HTML and CSS: Design responsive and visually appealing emails. Ensure they work seamlessly across different email clients.

• Magento Admin Panel: Use for basic tweaks like updating logos or testing subject lines. It is perfect for quick, on-the-fly adjustments.

Explore managed Magento hosting solutions to improve performance and tailor email customizations with email templates.