Font Family for Notifications

allanlud
New Member
31 0 0

Hi all,

Hopefully a fairly simple question. I'm just wondering where I can change the font family for the notification emails. I have looked through admin settings but don't see it anywhere there.

Any file I should be looking for in the backend, style.scss.liquid maybe?

Thanks,
Alan.

0 Likes

Hi Alan,

To style the notification emails, you would have to edit the HTML/Liquid code in the email editor itself, by heading over to:

Settings -> Notifications then click on the template you want to modify then press the HTML Email tab and then edit the code. So you're going to have to get your hands dirty with some coding :/

This is further complicated because unfortunately styling emails is a bit different to styling web pages, as the programs people use to read email (Gmail, Outlook etc), all display things a bit differently.

Here's a good starting point guide which will get you on the right track: http://templates.mailchimp.com/getting-started/html-email-basics/

Cheers,
Bjorn

Bjorn Forsberg | FORSBERG+two | Award-winning Shopify Apps since 2011
0 Likes
allanlud
New Member
31 0 0

Thanks for the reply Bjorn.

Also thanks for the link.

In the HTML coding tab for the notifications I can only see <p> tags so I thought there would have been somewhere else to edit the notification. As is it looks like I will have to edit each <p> tag and include a font family within it or is there another way around this?

I just wanted to change the family from Times New Roman to something neater like Arial.

Thanks,
Alan.

 

0 Likes

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 &gt; 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

Ps. I suggest keeping a copy of the original code before you run it through the inliner tool, as it will be a lot easier editing in the future without all those styles all through it..

Bjorn Forsberg | FORSBERG+two | Award-winning Shopify Apps since 2011
allanlud
New Member
31 0 0

Great, thanks again for your help!

0 Likes
Jacquo
New Member
1 0 2

Much easier nowadays. Just add...

* {font-family: Arial} into the style part, like this for example:

...

<style>
* {font-family: Arial}
.button__cell { background: {{ shop.email_accent_color }}; }
a, a:hover, a:active, a:visited { color: {{ shop.email_accent_color }}; }
</style>
</head>

This will apply and overwrite any other font with the one you put in font family. Will have to do it for each email or sms template, though, one by one...

Best

J

jainjewelry
Tourist
3 0 0

So would you add

 

<style>
{font-family: Helvetica}
.button__cell { background: {{ shop.email_accent_color }}; }
a, a:hover, a:active, a:visited { color: {{ shop.email_accent_color }}; }

-then text wording 

</style>
</head>

 

??

0 Likes