Customizing Emails in NopCommerce

One the more forgotten features… until you run that final test of a real order through you system, is formatting the email messages generated by nopCommerce. You want to make sure that the emails have some relation to your actual site theme and logo if you have one. You can see all the email messages that nopCommerce uses by going to …

Content Management -> Templates -> Message Templates

As you can tell, there are a lot of different types of messages. If you are getting started then I would recommend starting with these email template, that the majority of your customers will see.

  • NewCustomer.Notification
  • NewsLetterSubscription.ActivationMessage
  • OrderCompleted.CustomerNotification
  • OrderShipped.CustomerNotification
  • OrderPlaced.CustomerNotification

Now this is one of those situations where ignorance is bliss. If you are the designer skinning these emails there are a couple of key things to keep in mind. Formatting stylized emails is more difficult than skinning CSS Websites. The reason being is you not only have to worry about all the different browsers reading your CSS, but also email clients like Outlook, Eudora, Thunderbird, as well as a whole slue of mobile email clients which all will have their differences. With that being said, simple is better, unless you are are willing to do some serious testing.

Here are some solid guidelines when creating these emails.

  • Do not link style sheet using include or @import, all the code needs to be included in the literal email.
  • Do not create style definitions in the head tag, they will be stripped and your CSS will be removed.
  • Use tables for formatting. It will save you a big headache trying to layout divs across all the different browsers and mail clients.
  • Avoid using background images, email clients are all over board on if they are going to show it or not.
  • When using CSS in your emails, make you CSS inline to your markup. Its the easiest way to make sure your CSS comes through.
  • Stay away from floating elements. They will end up moving all over the place in web based browsers since it will float in with the existing elements of the page.