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

  • 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>

Important

Do not use a separate styles .css file. Instead, embed the styling in the views.

Note

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.

EmailElementsContentTree.png

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.

EXMRenderings.png