Helping with Cross Email Standards

[Rgkopchak]

As anyone who deals with putting together HTML emails knows, trying to get an email to look good in gmail, yahoo, outlook (all 52 versions), and now mobile is a very daunting task.

The way that ShopSite handles the generation of emails makes this task much more difficult. Shopsite is especially unfriendly to Gmail (which is quickly growing in use), since gmail does not allow styles in the head.

Please allow us a way to directly edit the styles different elements that will be generated by an email.

If this functionality exists already, if someone would point me in the right direction I would appreciate it.

Thank you for your time.

[loren_d_c]

If you have ShopSite Manager or Pro, you can edit the content of the HTML email receipts in a custom shopping cart template. The DEFINE ThankYou_Email section of a shopping cart template is what determines the content of the HTML shopper receipts.

For an example, make a copy of the sc_default cart template in Merchandising -> Custom Templates -> Shopping Cart, or see the bottom of this Custom Template Cookbook page:

http://www.shopsite.com/templates/cookbook/quick-easy-templates-cart.shtml

-Loren

[Rgkopchak]

Unless I am completely working this wrong, that is not correct. That will only allow me to style CERTAIN parts of the email, not the details.

I have this code in my .sst file:

Code: Select all

<tr>
     <td style="font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:16px;" align="right">[-- SC_Cart quantity name SKU price total --]</td>
</tr>

That will generate this code in an email:

Code: Select all

<tr>
  <td align="right" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:20px;">
    <table class="cart">
      <tr>
      <th class="cart_quantity">Quantity</th>
      <th class="cart_name">Name</th>
      <th class="cart_sku">Item Number</th>
      <th class="cart_price">Each</th>
      <th class="cart_total">Total</th>
      </tr>
      <tr>
      <td class="cart_quantity">1</td>
      <td class="cart_name">Item name</td>
      <td class="cart_sku">Item Number</td>
      <td class="cart_price">Item Price</td>
      <td class="cart_total">Total Prince</td>
      </tr>
    </table>
  </td>
</tr>


Again, unless I am completely wrong here, there is no way to style those elements past the <td> (as I have done) in Gmail, since you cannot place styles in the heading.

The font family, size, etc will carry over, but I cannot style font-weight, alignments, and most important spacing (margin and/or padding).

Getting to the point that it looks *okay* in Yahoo Mail, Gmail, and Outlook has been a very, very long process.

Can you please confirm this is correct, and if it an issue ShopSite is aware of and taking seriously.

Thank you for taking the time to answer.

PS - Also, there needs to be a way to auto-generate an email. Again, since ShopSite 'builds-out' so much code, the only way to test an email is to place an order. I've had to place over 100 dummy orders trying to get this right. If there was a function in the back office to send a test email with dummy information, it would save a lot of hassle on my end.

[loren_d_c]

Have you tried putting the styles for these particular elements in the body of the email document instead of the head?

-Loren

[Rgkopchak]

Campaign Monitor, who I use to send my marketing emails, has put together an amazing list of email clients and what you can, and cannot do, in them with CSS.

http://www.campaignmonitor.com/css/

As you can see, Gmail will not allow <style> in the head or body of an email.

Of course Gmail isn't the end-all-be-all of email clients (Outlook still holds the crown) but they are becoming more and more important, and I imagine that trend will continue.

[loren_d_c]

There is no way to directly access the table tags of the product table in the shopping cart template, so you'll have to try something else. Have you tried putting it inside of a <div> and putting some style stuff inline in the <div> tag?

http://www.ajaxapp.com/2009/02/19/gmail-strips-css-of-html-email-you-must-use-inline-css-for-gmail/

You may not be able to specifically call out individual classes that have been assigned to specific table cells in the table, however perhaps this will at least allow for general layout styling (font color, font size, font face, cell padding, etc?).

-Loren

[Rgkopchak]

The example I was using (putting the font info in the TD before the SS generated TABLE) does the same thing, but still will not help with the layout (especially spacing) in generated table.

Please consider allowing more access to these 'hidden' functions in ShopSite.