Skip to content

Styling Emails

Currently, Hyvä does not style emails.

Custom styles can be applied through the module hyva-themes/magento2-email-module. It is automatically installed as a dependency of the hyva-themes/magento2-default-theme package.

The hyva-themes/magento2-email-module reactivates the luma CSS functionality for emails in hyva-based themes.

Note this is different from the luma-checkout or the theme-fallback modules, that actually use a Luma theme instead of Hyvä.

Preparing custom Email Styling

To apply customizations, copy vendor/hyva-themes/magento2-email-module/src/view/frontend/web/css/email.less to your active Hyvä theme, into the directory web/css/.

Also 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 your Hyvä theme directory web/css/source/.

For sales emails to apply styling, also copy these files to your themes Magento_Sales/web/css/source/ directory:

  • vendor/magento/theme-frontend-luma/Magento_Sales/web/css/source/_email.less
  • vendor/magento/theme-frontend-luma/Magento_Sales/web/css/source/_module.less

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:

<!--@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.

To add a custom footer, add a Magento_Email/email/footer.html template to your theme.

For reference, here is the footer.html file from the Luma theme:

<!--@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>