Notification Email Template

[srmb]

I am using the Base Ready Theme and I want to edit the Customer Order Notification Email so it looks more like my checkout pages. I see that the main template is actually "hard-coded" html in that it isn't pulling from a style sheet and all the styles are directly coded in the template. But then I also see on the template code page a field for Order Contents and one for Customer Information. Both these fields are populated with code, but it doesn't seem like the code in these two fields is actually being used when the email is being sent since this code needs to reference a style sheet.

Basically I wanted to just copy the Invoice template code over so the email notification has the same look and feel, but when I tried, the email was sent unstyled. So my question I guess is, is there a way to link the template code for email notification to a style sheet? Or do I have to recreate all the styles for the email template?

Thanks,
Shannon

[oliverands]

Shannon,

In order for emails to display correctly, you are best off if you inline the css in the body of the message. The Miva code you want in the email template is just the data fields specific to order information--not page styling. When the sales receipt is run, Miva will populate those fields with data specific to the order which will be wrapped in the html of the rest of the email template.

The code for your email template is going to look very different than the code for your Miva pages. It's possible to get an email to look a lot like your site, but to do that you're going to have to code it up yourself. It's something I've done, and it's possible to do even if you're only moderately good at html and Mivascript.

Here's the rough process I used:

1. Make a safe backup somewhere of the sales receipt email code.
2. Copy into the sales receipt code the code from your INVC page. You'll now have the original email template and the INVC page template in the same window.
3. Walk slowly through the email code and copy in anything you want from your INVC code so that you end up with a single, integrated message. You'll notice differences ( div code with styles from the INVC page) and similarities (the Miva code for bill_name, bill_address, etc.).
4. In the head of the integrated email code, create a <style> section if there isn't one already. Copy-paste the content of the css file for your Miva store into the style section.
5. Run the results through the MailChimp css inliner tool (http://templates.mailchimp.com/resources/inline-css/). Save the results into your sales receipt email template.
6. Send yourself a copy of the email from Miva. It will probably be a mess, but some things will look more like what you want them to look like.
7. Fix errors, resend, repeat.

This is probably going to take a good deal of time to get exactly the way you like it. But the good news is once you have it down, you can use the email code as the basis for all the other emails you send out from your Miva store. Making those emails will be much quicker once you have a template you're happy with for the first one.

Good luck!

[srmb]

Thanks, I've actually spent the weekend doing most of what you suggested - adding inline css, resending to myself, editing errors, and repeating. Such a tedious process but I'm getting close. The only thing that I haven't figured out is how to display the site logo. The path is graphics/00000001/logo.png but I can't figure out how to get it to load into the email when sent. Do I have to write out the full link? www.storename.com/mm5/graphics/0000001/logo.png?

Thanks!

[Bruce - PhosphorMedia]

The path is graphics/00000001/logo.png but I can't figure out how to get it to load into the email when sent. Do I have to write out the full link? www.storename.com/mm5/graphics/0000001/logo.png?

Thanks!

The path has to be absolute.

BTW: I personally wouldn't try to get too fancy with formatting emails. 1) Highly stylized emails can be problematic on different email clients even when done correctly. 2) Some folks still only read plain text emails (security reasons). 3) The extra style code can trigger spam/security warnings.

[oliverands]

Yes, like Bruce says, all links have to be full, not shortened links. I would also recommend testing your email (when you think you are done) with a service like Email on Acid or with Mailchimp's in box inspector to make sure your email will display correctly in different types of email clients and inboxes. Outlook is notoriously bad for displaying formatted email correctly.

[srmb]

Okay I'll check into that. Don't use Outlook, but looks fine in Mail and Thunderbird. Thanks!

[oliverands]

I would strongly recommend checking Outlook. We ran a survey of our customers a year ago, and 10% of respondents reported they use Outlook to read their email. I never thought Outlook was that important, but that told me that 1 out of 10 of our newsletter and store-generated emails looked horrible when our customers read them. I decided that was too many and it needed to be fixed.

Formatted email to Outlook is a HUGE issue. The short version is this: Outlook uses the Microsoft Word html engine to render email rather than a browser engine. So formatted email renders HORRIBLY in Outlook. There are ways to get around this, to a certain extent, with special code in html emails to render only in Outlook. It's a deep, deep rabbit hole you can fall down when working on making pretty emails. (I'm speaking from experience here.) Do a Google search on html email in Outlook, and you'll find more information than you need.

[srmb]

Thanks, I will look into that.