Custom HTML Templates for Transaction Emails

Learn about how to create custom HTML email templates that can be applied to transaction emails.

By default, transaction emails have a standard Commerce7 email template. While you can edit a couple of styles under Settings > General > Email, the options are limited. If you want a more custom design involving changes to the header or footer of the email, you can use custom email templates. Please note that the code for Commerce7's standard email template cannot be edited directly.

In this article:

• Creating a custom email template
• Template email variables
• Styling your template
• Product Images in Transaction Emails
• Testing/Previewing Transaction Emails

Creating a custom email template

Under Settings > Emails you can view a list of transaction emails sent to customers from Commerce7. These all use Commerce7's standard template. If you create any custom email templates, on each you'll see a new dropdown in the sidebar to select which you'd like it to use. By default, "Commerce7 Theme Builder" is selected.

1. To add your own custom email template code, go to Developer  > Email Templates and click Add Email Template
2. Enter in a Title. (This is just for internal naming purposes.)
3. Under Email Template, enter the entire HTML/CSS for your email template.
4. Inside your template code, add {{emailBody}} where you want the content to be displayed. (For every transaction email there is unique content, this variable will be replaced by the text content based on the email being sent.)
5. Click Save and your template is done!
6. To apply it to be used. Go back to Settings > Emails > Transaction Emails and under the "Email Template" dropdown, select your customer email template.
7. Do this for all of the email(s) that you would like to use it. Learn more about transaction emails here.

Template email variables

The following variables are available to pull in information dynamically from Settings > General.

• {{settings.url}}
• {{settings.logo}}
• {{settings.primaryPhone}}
• {{settings.primaryEmail}}
• {{settings.companyName}}

The following is replaced with the email content under Settings > Transactional Emails.

• {{emailBody}}

You can view all of the available variables used for each specific transaction email here. The only variables listed on this page can be put in your email template. The additional variables should only used within the email content (Settings > Transactional Emails). 

Styling your email template

Things to note:

• For content within Commerce7's variables, some of them output plain text like {{settings.companyName}} or {{customer.firstName}}, But others such as {{orderSummary}} also include HTML. This HTML content cannot be edited. To update the fonts and button colors used for these, you'll want to use the Email Theme Builder under settings under Settings > Email > Email Theme.
• Additional fonts cannot be added to the theme builder so select one that matches your custom template the most. :)
• Whatever background color you're using in your custom template should be selected in the Email Theme Builder.

Helpful links

• CSS: When inputting your HTML under Developers > Email Templates, make sure that all of your CSS is inline. If you currently have your CSS added via <style> tags, here's a free resource to inline your CSS for you automatically.
• Fonts: Learn more about using custom fonts in emails here.

Product Images in Transaction Emails

Transaction Email Product images are set to have a maximum width of 540 pixels (regardless of image dimensions uploaded) - and this width is based on the average dimensions for bottle shots. 

• Why do my Transaction Email product images look small?  Because the images are set to a max width based on average bottle shot dimensions, square images do not display as well (since they don't have the same height that bottle shots typically do). Whether you are using a bottle shot or a square image, be sure that you are cropping as closely as possible so that the image is as large as it can be.

Learn more about optimal image sizes for Commerce7 - and how to edit them here.

Want to test/preview your transaction emails? Click here to learn how.