Hi Alan,
Happy to help when I can. Yes, in theory you need to adjust each and every
<p>
tag to put the style on them.. however there is a better way in practice:
At the top of the code add in this:
<style>
p {font-family: Helvetica, Arial, sans-serif;}
</style>
... the rest of your email code is below this
Then copy paste everything into this handy tool:
http://zurb.com/ink/inliner.php
Press the "Convert Email" button, and voila, it does it for you :) Taking the Shipping Confirmation as an example, you'll end up with this:
<!-- Inliner Build Version 4380b7741bb759d6cb997545f3add21ad48f010b -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">;
<html>
<head></head>
<body>
<p style="font-family: Helvetica, Arial, sans-serif;">
{{ 'logo.png' | asset_url | img_tag }}
{% if billing_address.name %}
</p>
<p style="font-family: Helvetica, Arial, sans-serif;">Dear {{ billing_address.name }},</p>
<p style="font-family: Helvetica, Arial, sans-serif;"></p>
{% endif %}
<p style="font-family: Helvetica, Arial, sans-serif;">{% if fulfillment.item_count == item_count %}All{% elsif fulfillment_status == 'fulfilled' %}The last{% else %}Some{% endif %} of the items from order {{ name }} have now been shipped:</p>
<p style="font-family: Helvetica, Arial, sans-serif;">{% for line in fulfillment.fulfillment_line_items %}<img src="%7B%7B%20line.line_item.product.featured_image%20%7C%20product_img_url:%20'small'%20%7D%7D">{{ line.quantity }}x {{ line.line_item.title }}<br>
{% endfor %}</p>
<p style="font-family: Helvetica, Arial, sans-serif;">{% if requires_shipping %}They are being shipped {% if fulfillment.tracking_company %}via {{ fulfillment.tracking_company }} {% endif %}to the following address: </p>
<p style="font-family: Helvetica, Arial, sans-serif;">{{ shipping_address.name }}<br>
{{ shipping_address.street }}<br>
{{ shipping_address.city }}<br>
{{ shipping_address.province }}
{{ shipping_address.zip }}<br>
{{ shipping_address.country }}</p>
{% if fulfillment.tracking_numbers.size > 0 %}
{% if fulfillment.tracking_numbers.size == 1 %}
<p style="font-family: Helvetica, Arial, sans-serif;">The tracking number for these items is {{ fulfillment.tracking_numbers.first }}. <a href="%7B%7B%20fulfillment.tracking_urls.first%20%7D%7D">Click here to see the status of your shipment.</a></p>
{% else %}
<p style="font-family: Helvetica, Arial, sans-serif;">The tracking details for these items are as follows:</p>
<p style="font-family: Helvetica, Arial, sans-serif;">{% for tracking_number in fulfillment.tracking_numbers %} {{ tracking_number }}<br>{% endfor %}</p>
<p style="font-family: Helvetica, Arial, sans-serif;">Click the links below for shipping status on these items:</p>
<p style="font-family: Helvetica, Arial, sans-serif;">{% for tracking_url in fulfillment.tracking_urls %} <a href="%7B%7B%20tracking_url%20%7D%7D">{{ tracking_url }}</a><br>{% endfor %}</p>
{% endif %}
<p style="font-family: Helvetica, Arial, sans-serif;">Please allow some time for the status of the shipment to correctly display at the above address.</p>
{% endif %}{% endif %}{% if fulfillment_status != 'fulfilled' %}
<p style="font-family: Helvetica, Arial, sans-serif;">You will receive a confirmation email when more items from your order have been shipped.</p>
{% endif %}
<p style="font-family: Helvetica, Arial, sans-serif;">Thank you for ordering from {{ shop_name }}!</p>
</body>
</html>
Then just copy/paste that back into the HTML Email section of your Shopify template.
Hope it helps!
Bjorn Forsberg | FORSBERG+two | Award-winning Shopify Apps since 2011
