Email Theme Builder

Use the theme builder to update the design for emails sent to customers from Commerce7.

In this article:

• What is the theme builder?
• Editing your email theme (VIDEO)
• Testing your theme
• FAQs
  
  

What is the theme builder?

The email theme builder allows you to edit the style for your emails to make them more cohesive with your brand. You can adjust the background color, edit the button colors to match your website, select the fonts, and more!

Your email theme will be used for all transaction emails and campaign emails sent to customers from Commerce7. Transaction emails are sent to customers when they take an action such as placing an order or creating an account. Campaigns is an email marketing tool that you can leverage to send newsletter or product announcement to your customers.

Editing your email theme

Watch the tutorial or follow the steps to learn more about editing your email theme through the theme builder.

1. In Admin, go to Settings > Emails and click Edit Email Theme at the top right.
2. On the left, you'll see a preview of your email theme. The content here is just to show you what the design will look like so it can't be edited.
   
   
3. On the right, you'll see sections for Header, General, Content, and Footer where you can edit your email settings. As you make changes to the settings, you'll see the preview update automatically to you can see what they'll look like.
   
   
   
   1. Header
      1. Logo: The logo automatically uses the file uploaded under Setting > General. Keep in mind if you want to change it, that this is also the logo used for your website Checkout page. 
      2. Logo Alignment: Update the alignment for your logo to Left, Center, or Right.
   2. General
      1. Background: The background color of the email itself. (Currently, the background behind the content cannot be changed from white.)
      2. Alternate Background: This is used for Campaign emails only. When creating a campaign email it can be toggled on and off for different sections of content that you want to stand out.
      3. Border: Choose if you want a border to display around the email content. 
      4. Border Color: If you chose to have a border, you have the option to adjust the color.
   3. Content
      1. Heading Font: Font used for headings (such as Heading 1, Heading 2, etc.).
      2. Heading Styles: Click the "B" button if you want your headings to be bold and "I" if you want your headings to be displayed in italics. (Please note that some smaller headings in transactional emails are automatically bolded to stand out for customers.)
      3. Content Font: Font used for main content.
      4. Button Color: Background color for buttons.
      5. Link Color: Text color for links. Make sure you select a color that stands out and is dark enough to read.
   1. Footer
      1. Company Information: Select if you'd like to display your address and/or phone in the footer. This information is pulled from Settings > General and cannot be edited per email.
      2. Social Links: Click to add a social link for Facebook, Instagram, or Twitter.
4. Once you're happy with your changes click Save Theme. 

Tip: Using hex colors with the color picker

If you have a hex color for your brand that you'd like to use, click to open the color picker, then click on the RGB until the HEX option appears. Now you can type in your specific color.

Testing your theme

While you're in the theme builder, you can already see a preview of how your emails will look, but if you want to see your theme in action, the best way would be to perform an action (like a customer would) on your website.

For example, if you go to your website and click Login then Create Account, fill out the information with your email address and then you'll receive the "Account Confirmation" email. If you place a test order, you'll receive the "Order Confirmation" email, etc.

FAQs

1. Can I add custom CSS?
   No, there isn't a way to add custom CSS. While we may add more settings in the future, if you'd like a completely custom header or footer, you can always get a developer to create a custom email template for you. Once a custom template is created, it can be selected and applied to any email under Settings > Emails > Transaction Emails.
2. Can I add more font options?
   Currently these are the only font options available. Email clients are tricky when it comes to fonts. For example, if we allowed custom fonts, Apple Mail would display it, but Gmail and Outlook wouldn't. The fonts that we have are supported for more email clients to ensure a consistent experience. If you still want a custom font to display, even if it's only for some email clients, you can get a designer to create a custom email template for you with your font. 
3. How does the Theme Builder work if I'm using custom email templates on my transaction emails?
   If a custom template is selected on an email, it will continue to be used, but you'll still want to adjust your email theme since some of the styles for the content like the button color and  fonts will be used for any Commerce7 content that is output through variables like {{orderSummary}}. Make sure you edit the settings under the "Content" heading in the theme builder.