Email templates play a crucial role in any online business. They are the first point of contact with customers and can greatly impact their perception of your brand. In the case of Hyva Theme, a popular Magento 2 theme, customizing email templates allows you to create a unique and personalized experience for your customers.
In this blog post, we will explore the steps involved in customizing email templates in Hyva Theme.
At present, Hyvä does not handle the styling of emails.
However, you can customize the styles using the hyva-themes/magento2-email-module. This module is automatically installed as a dependency when you install the hyva-themes/magento2-default-theme package.
The hyva-themes/magento2-email-module re-enables the luma CSS functionality specifically for emails within themes based on Hyvä. It’s important to note that this functionality differs from the luma-checkout or theme-fallback modules, which employ a Luma theme rather than Hyvä.
Method 1: Add custom Email Styling with less CSS
To apply customizations, follow these steps:
- Copy the file vendor/hyva-themes/magento2-email-module/src/view/frontend/web/css/email.less to the web/css/ directory of your active Hyvä theme.
- Additionally, copy the two files _email-extend.less and _email-variables.less from vendor/hyva-themes/magento2-email-module/src/view/frontend/web/css/source to the web/css/source/ directory of your Hyvä theme.
Your directory structure might look something like this:
app/design/frontend/Your_Vendor/Your_Theme/
|-- web/
| |-- css/
| | |-- email.less
| | |-- source/
| | |-- _email-extend.less
| | |-- _email-variables.lessBy copying these files into your Hyvä theme, you’ll be able to apply and customize styles for emails in your Magento 2 store.
3. Last step is to run the below command on this path: app/design/frontend/Your_Vendor/Your_Theme/
php bin/magento setup:upgrade && php bin/magento c:fRemember to clear your Magento cache after making these changes to ensure the new styles are applied.
Add custom Email Styling for sales emails
To apply styling for sales emails, follow these steps:
- Copy the files _email.less and _module.less from the following path:
vendor/magento/theme-frontend-luma/Magento_Sales/web/css/source/2. to your Hyvä theme directory:
app/design/frontend/Your_Vendor/Your_Theme/web/css/source/Your directory structure should look like this:
app/design/frontend/Your_Vendor/Your_Theme/
|-- Magento_Sales/
| |-- web/
| | |-- css/
| | | |-- source/
| | | | |-- _email.less
| | | | |-- _module.lessAfter making CSS changes, please run the following command and check the preview.
php bin/magento setup:upgrade && php bin/magento c:f Customizing the Email Header
To customize the email header, add a Magento_Email/email/header.html template to your Hyvä theme.
For reference, here is the default header.html file from the Magento_Email module:
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<!--@subject {{trans "Header"}} @-->
<!--@vars {
"var logo_url":"Email Logo Image URL",
"var logo_alt":"Email Logo Alt Text",
"var logo_height":"Email Logo Image Height",
"var logo_width":"Email Logo Image Width",
"var template_styles|raw":"Template CSS"
} @-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
{{var template_styles|raw}}
{{css file="css/email.css"}}
</style>
</head>
<body>
{{inlinecss file="css/email-inline.css"}}
<!-- Begin wrapper table -->
<table class="wrapper" width="100%">
<tr>
<td class="wrapper-inner" align="center">
<table class="main" align="center">
<tr>
<td class="header">
<a class="logo" href="{{store url=""}}">
<img
{{if logo_width}}
width="{{var logo_width}}"
{{else}}
width="180"
{{/if}}
{{if logo_height}}
height="{{var logo_height}}"
{{/if}}
src="{{var logo_url}}"
alt="{{var logo_alt}}"
border="0"
/>
</a>
</td>
</tr>
<tr>
<td class="main-content">
<!-- Begin Content -->A logo image for emails can be placed into your theme at Magento_Email/web/logo_email.png.
For reference, the default email logo can be found at vendor/magento/module-email/view/frontend/web/logo_email.png.
Customizing the Email Footer
To customize the email header, add a Magento_Email/email/footer.html template to your Hyvä theme.
For reference, here is the default footer.html file from the Magento_Email module:
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<!--@subject {{trans "Footer"}} @-->
<!--@vars {
"var store.frontend_name":"Store Name"
} @-->
<!-- End Content -->
</td>
</tr>
<tr>
<td class="footer">
<p class="closing">{{trans "Thank you, %store_name" store_name=$store.frontend_name}}!</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End wrapper table -->
</body>OR
To add a custom footer, add a Magento_Email/email/footer.html template to your theme.
For reference, here is the default footer.html file from the Magento_Email module:
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<!--@subject {{trans "Footer"}} @-->
<!--@vars {
"var store.frontend_name":"Store Name",
"var url_about_us":"About Us URL",
"var url_customer_service":"Customer Service URL",
"var store_phone":"Store Phone",
"var store_hours":"Store Hours",
"var store.formatted_address|raw":"Store Address"
} @-->
<!-- End Content -->
</td>
</tr>
<tr>
<td class="footer">
<table>
<tr>
<td>
{{depend url_about_us}}
<p>
{{trans '<a href=%url_about_us>About Us</a>' url_about_us=$url_about_us |raw}}
</p>
{{/depend}}
{{depend url_customer_service}}
<p>
{{trans '<a href=url_customer_service>Customer Service</a>' url_customer_service=$url_customer_service |raw}}
</p>
{{/depend}}
</td>
<td>
{{depend store_phone}}
<p class="phone">
{{trans '<a href="tel:%store_phone">%store_phone</a>' store_phone=$store_phone |raw}}
</p>
{{/depend}}
{{depend store_hours}}
<p class="hours">
{{trans 'Hours of Operation:<br /><span class="no-link">%store_hours</span>.' store_hours=$store_hours |raw}}
</p>
{{/depend}}
</td>
<td>
<p class="address">
{{var store.formatted_address|raw}}
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End wrapper table -->
</body>New to Hyvä?? Learn about the Hyvä Theme from scratch!
Method 2: Add custom Email Styling with Tailwind.
1. Create a Folder for Tailwind CSS Files
In your theme directory (app/design/frontend/Your_Vendor/Your_Theme), create a new folder named web/tailwind/emails:
app/design/frontend/Your_Vendor/Your_Theme/
|-- web/
| |-- tailwind/
| | |-- emails2. Create a Custom PostCSS Configuration
Inside the “emails” folder, create a custom PostCSS configuration file named postcss.config.js:
app/design/frontend/Your_Vendor/Your_Theme/
|-- web/
| |-- tailwind/
| | |-- emails/
| | | |-- postcss.config.jsOpen the postcss.config.js file and add the following content:
module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss/nesting'),
require('tailwindcss')({ config: './emails/tailwind.email.config.js' }),
]
};3. Create Tailwind CSS Configuration:
Inside the “emails” folder, create a file named tailwind.email.config.js:
app/design/frontend/Your_Vendor/Your_Theme/
|-- web/
| |-- tailwind/
| | |-- emails/
| | | |-- postcss.config.js
| | | |-- tailwind.email.config.jsOpen the tailwind.email.config.js file and add the following content:
const defaultConfig = require('../tailwind.config.js');
module.exports = {
...defaultConfig,
corePlugins: {
backdropOpacity: false,
backgroundOpacity: false,
borderOpacity: false,
divideOpacity: false,
ringOpacity: false,
textOpacity: false
}
};4. Install postcss-cli Plugin
Run the following command to install the postcss-cli plugin as a development dependency on this app/design/frontend/Your_Vendor/Your_Theme/web/tailwind/emails path:
npm install --save-dev postcss-cli5. Edit app/design/frontend/Your_Vendor/Your_Theme/web/tailwind/package.json:
Open your theme’s package.json file and add the following script under the “scripts” section:
"scripts": {
"build-email": "npx postcss --config ./emails theme/email.css -o ../css/source/_theme.less",
}6. Create email.css
Inside your web/tailwind/emails directory, create a file named email.css. This file will contain your Tailwind CSS styles for emails.
app/design/frontend/Your_Vendor/Your_Theme/
|-- web/
| |-- tailwind/
| | | |-- theme/
| | | | |-- email.cssOpen the theme/email.css file and add the following content:
.footer {
@apply bg-gray-300 p-5 border-2 border-solid border-gray-500;
}7. Run the Build Script
Execute the build script using the following command on this path: app/design/frontend/Your_Vendor/Your_Theme/web/tailwind/emails
npm run build-emailThis command will trigger the PostCSS build process, applying Tailwind CSS styles to email.css and outputting the result to ../css/source/_theme.less.
8. Clear your Magento cache
Last step in Run the below command on this path app/design/frontend/Your_Vendor/Your_Theme/
php bin/magento setup:upgrade && php bin/magento c:fRemember to clear your Magento cache after making these changes to ensure the new styles are applied.
Conclusion
Customizing email templates in Hyva Theme allows you to create a unique and personalized experience for your customers. By following the steps outlined in this blog post, you can easily customize email templates, modify their content and layout, and apply them to your store.
Remember to thoroughly test your customized email templates before making them live and keep them updated as your business evolves.
Read more resources on Hyva themes:
- Check out the InstaBuild for Hyvä Themes: Ready-made Hyva theme templates for faster storefront development!
- Hyva Themes Development – For Online Merchants
- Hyvä Theme Benefits that your store needs
- 10 Best Hyva Compatibility Extension Providers For Magento 2 Stores
- Hyvä VS PWA: Where to Invest?
- How a Slow Magento Website Can Cost You Advertising Dollars
- Mobile Commerce: How Hyva Themes Boost Mobile Conversions
Post a Comment
Got a question? Have a feedback? Please feel free to leave your ideas, opinions, and questions in the comments section of our post! ❤️