Change the styling of a Commerce email message
The renderings for Commerce email messages are built using standard MVC renderings and .cshtml views. For this reason, there is a separate Emails folder containing the following email views, which you can customize. You can find these files in the <website>/Views/Commerce/Email
folder.
-
EmailCartLines.cshtml
-
EmailCartTotal.cshtml
-
EmailLogo.cshtml
-
EmailOrderHeader.cshtml
-
EmailOrderLines.cshtml
-
EmailOrderTotal.cshtml
-
EmailRecommendedProducts.cshtml
-
EmailSiteLink.cshtml
-
EmailText.cshtml
To style the email message properly, you must embed the .css within each view as shown in the following example.
@using Sitecore.Mvc
@using Sitecore.Commerce.XA.Feature.Emails
@using Sitecore.Commerce.XA.Feature.Emails.Models
@model EmailTextModel
@{
var content = Model.ContentRenderer;
}
<style type="text/css">
.email-text-container {
padding: 10px 20px;
font-family: "Open Sans",sans-serif !important;
font-size: 14px;
color: #6B717B;
}
</style>
<div class="email-text-container">
@content
</div>
Do not use a separate styles .css file. Instead, embed the styling in the views.
The marketing automation campaign executes on the Marketing Automation role. Rendering of the email page occurs on the Content Management (CM) server.
You can modify the content of the email message by navigating in the Content Editor to the items in the Commerce Emails folder.
In addition, there are renderings specific to the Email Experience Manager (EXM) email in the sitecore/Layout/Renderings/Feature/Commerce Experience Accelerator/Commerce Emails folder.