Skip to content

Instantly share code, notes, and snippets.

@zoerooney

zoerooney/header-for-most-emails.html

Last active August 1, 2018 13:49
Show Gist options
  • Save zoerooney/0c5305328864314a58a5 to your computer and use it in GitHub Desktop.
Save zoerooney/0c5305328864314a58a5 to your computer and use it in GitHub Desktop.
Download ZIP
Shopify notification emails, bettered. I usually use the first one as the header for all the emails other than the ones with specific template code below. Be sure to put the correct logo dimensions in place in each snippet before using it!
Raw
header-for-most-emails.html
<div style="width: 100%; margin: 0 auto; text-align: center; background: #ffffff;">
<a href="{{ shop.url }}"><img src="{{ 'logo.png' | asset_url }}" alt="{{ shop_name }}" width="WIDTH" height="HEIGHT" style="margin: 0 auto;" /></a>
<br/><br/>
</div>
Raw
notification-to-shop-owner.html
{% assign bgcolor = '#eee' %}
{% assign logoheight = 'auto' %}
{% assign logowidth = '300' %}
<table style="background: #ffffff; width: 90%; max-width: 700px; margin:0 auto;">
<tr>
<td colspan="6" style="text-align: center;">
<a href="{{ shop.url }}"><img src="{{ 'logo.png' | asset_url }}" alt="{{ shop_name }}" width="{{ logowidth }}" height="{{ logoheight }}" style="margin:0 auto;"/></a>
</td>
</tr>
<tr style="padding: 5px 0;">
<td colspan="4" style="vertical-align: top; padding: 12px 0;">
Hello {{ shop_name }},<br/><br/>
{% if customer.name %}{{ customer.name }}{% else %}Someone{% endif %} placed a new order with you today!
</td>
<td colspan="2" style="vertical-align: top: padding: 12px 0;">
<strong>Order:</strong> {{ order_name }}<br />
<strong>Date:</strong> {{ date | date: "%b %d %I:%M%p" }}<br />
<a href="{{ shop.url }}/admin/orders/{{ id }}">View order {{order_name}}</a>
</td>
</tr>
{% if has_high_risks? %}Security check:
<tr>
<td colspan="6" style="background: {{ bgcolor }};color: white; padding: 12px 0;">
This order has a risk of being fraudulent. Review the order in your store's admin and contact the customer to verify their information.
{% if fulfillment_aborted %}
<br/><br /><strong>This order was not automatically fulfilled because it was flagged as suspicious.</strong>
{% endif %}
</td>
</tr>
{% endif %}
<tr>
<th colspan="6" style="background:{{bgcolor}}; padding: 5px 0;">
Order Details:
</th>
</tr>
<tr>
<th colspan="3" style="padding: 12px 0;">
<strong>Items</strong>
</th>
<th style="padding: 12px 0;">
<strong>Qty</strong>
</th>
<th style="padding: 12px 0;">
<strong>Price</strong>
</th>
<th style="padding: 12px 0;">
<strong>Total</strong>
</th>
</tr>
{% for line in line_items %}
<tr>
<td style="vertical-align:top;padding: 12px 0;">
<img src="{{ line | img_url: 'small' }}" alt="{{ line.title }}" />
</td>
<td colspan="2" style="vertical-align:top;padding: 12px 0;">
{{ line.title }}
{% for p in line.properties %}
{% unless p.last == blank %}
<br />
{{ p.first }}:
{% if p.last contains '/uploads/' %}
{{ p.last | split: '/' | last }}
{% else %}
{{ p.last }}
{% endif %}
{% endunless %}
{% endfor %}
</td>
<td style="vertical-align:top;padding: 12px 0;">
{{ line.quantity }}
</td>
<td style="vertical-align:top;padding: 12px 0;">
{{ line.price | money }}
</td>
<td style="vertical-align:top;padding: 12px 0;">
{{ line.line_price | money }}
</td>
</tr>
{% endfor %}
{% if discounts %}
<tr style="">
<td colspan="5" style="text-align: right;padding: 12px 0;">
Discounts:
</td>
<td style="padding: 12px 0;">
{{ discounts_savings | money }}
</td>
</tr>
{% endif %}
<tr style=" border-bottom: 1px solid #898989;">
<td colspan="5" style="text-align: right;padding: 12px 0;">
Subtotal:
</td>
<td style="padding: 12px 0;">
{{ subtotal_price | money }}
</td>
</tr>
{% for tax_line in tax_lines %}
<tr>
<td colspan="5" style="text-align: right;padding: 12px 0;">
{{ tax_line.title }}
</td>
<td style="padding: 12px 0;">
{{ tax_line.price | money }}
</td>
</tr>
{% endfor %}
{% if requires_shipping %}
<tr style="">
<td colspan="5" style="text-align: right;padding: 12px 0;">
Shipping:
</td>
<td style="padding: 12px 0;">
{{ shipping_price | money }}
</td>
</tr>
{% endif %}
<tr style="">
<td colspan="5" style="text-align: right;padding: 12px 0;">
<strong>Total:</strong>
</td>
<td style="padding: 12px 0;">
<strong>{{ total_price | money }}</strong>
</td>
</tr>
<tr>
<td colspan="5" style="text-align: right;padding: 12px 0;">
<strong>Payment Method:</strong>
</td>
<td style="padding: 12px 0;">
<strong>{{ gateway }}</strong>
</td>
</tr>
{% if requires_shipping and shipping_address %}
<tr>
<th colspan="6" style="background:{{bgcolor}};padding: 12px 0;">
Shipping Details:
</th>
</tr>
<tr>
<td colspan="3" style="vertical-align:top;padding: 12px 0;">
<strong>Shipping Address:</strong><br />
{{ shipping_address.name }}<br />
{{ shipping_address.street }}<br />
{{ shipping_address.city }}<br />
{{ shipping_address.province }}
{{ shipping_address.zip }}<br />
{{ shipping_address.country }}
{% if shipping_address.phone %}<br />{{ shipping_address.phone }}{% endif %}
</td>
<td colspan="3" style="vertical-align:top;padding: 12px 0;">
<strong>Delivery Method:</strong><br />
{% for shipping_method in shipping_methods %}
{{ shipping_method.title }}<br/>
{% endfor %}
</td>
</tr>
{% endif %}
</table>
Raw
order-confirmation.html
{% assign bgcolor = '#eee' %}
{% assign logoheight = 'auto' %}
{% assign logowidth = '300' %}
<table style="background: #ffffff; width: 90%; max-width: 700px; margin:0 auto;">
<tr>
<td colspan="6" style="text-align: center;padding: 12px 0;">
<a href="{{ shop.url }}"><img src="{{ 'logo.png' | asset_url }}" alt="{{ shop_name }}" width="{{ logowidth }}" height="{{ logoheight }}" style="margin:0 auto;"/></a>
</td>
</tr>
<tr style="padding: 5px 0;">
<td colspan="4" style="vertical-align: top;padding: 12px 0;">
Thank you for placing your order with {{ shop_name }}!
</td>
<td colspan="2" style="vertical-align: top:padding: 12px 0;">
<strong>Order:</strong> {{ order_name }}<br />
<strong>Date:</strong> {{ date | date: "%m/%d/%Y" }}
</td>
</tr>
<tr>
<th colspan="6" style="background:{{bgcolor}};padding: 5px 0;">
Recipient Details:
</th>
</tr>
<tr>
{% if billing_address %}
<td colspan="3" style="padding: 12px 0;">
<strong>Billing Address:</strong><br />
{{ billing_address.name }}<br />
{{ billing_address.street }}<br />
{{ billing_address.city }}<br />
{{ billing_address.province }}
{{ billing_address.zip }}<br />
{{ billing_address.country }}
</td>
{% else %}
<td colspan="3" style="padding: 12px 0;">
&nbsp;
</td>
{% endif %}
{% if requires_shipping and shipping_address %}
<td colspan="3" style="padding: 12px 0;">
<strong>Shipping Address:</strong><br />
{{ shipping_address.name }}<br />
{{ shipping_address.street }}<br />
{{ shipping_address.city }}<br />
{{ shipping_address.province }}
{{ shipping_address.zip }}<br />
{{ shipping_address.country }}
</td>
{% else %}
<td colspan="3" style="padding: 12px 0;">
&nbsp;
</td>
{% endif %}
</tr>
<tr>
<th colspan="6" style="background: {{bgcolor}};padding: 5px 0;">
Order Details:
</th>
</tr>
<tr>
<th colspan="3" style="padding: 12px 0;">
<strong>Items</strong>
</th>
<th style="padding: 12px 0;">
<strong>Qty</strong>
</th>
<th style="padding: 12px 0;">
<strong>Price</strong>
</th>
<th style="padding: 12px 0;">
<strong>Total</strong>
</th>
</tr>
{% for line in line_items %}
<tr style="">
<td style="vertical-align:top;padding: 12px 0;">
<img src="{{ line | img_url: 'small' }}" alt="{{ line.title }}" />
</td>
<td colspan="2" style="vertical-align:top;padding: 12px 0;">
{{ line.title }}
{% for p in line.properties %}
{% unless p.last == blank %}
<br />
{{ p.first }}:
{% if p.last contains '/uploads/' %}
{{ p.last | split: '/' | last }}
{% else %}
{{ p.last }}
{% endif %}
{% endunless %}
{% endfor %}
</td>
<td style="vertical-align:top;padding: 12px 0;">
{{ line.quantity }}
</td>
<td style="vertical-align:top;padding: 12px 0;">
{{ line.price | money }}
</td>
<td style="vertical-align:top;padding: 12px 0;">
{{ line.line_price | money }}
</td>
</tr>
{% endfor %}
{% if discounts %}
<tr style="">
<td colspan="5" style="text-align: right;padding: 12px 0;">
Discounts:
</td>
<td style="padding: 12px 0;">
{{ discounts_savings | money }}
</td>
</tr>
{% endif %}
<tr style=" border-bottom: 1px solid #898989;">
<td colspan="5" style="text-align: right;padding: 12px 0;">
Subtotal:
</td>
<td style="padding: 12px 0;padding: 12px 0;">
{{ subtotal_price | money }}
</td>
</tr>
{% for tax_line in tax_lines %}
<tr>
<td colspan="5" style="text-align: right;padding: 12px 0;">
{{ tax_line.title }}
</td>
<td style="padding: 12px 0;">
{{ tax_line.price | money }}
</td>
</tr>
{% endfor %}
{% if requires_shipping %}
<tr style="">
<td colspan="5" style="text-align: right;padding: 12px 0;">
Shipping:
</td>
<td style="padding: 12px 0;">
{{ shipping_price | money }}
</td>
</tr>
{% endif %}
<tr style="">
<td colspan="5" style="text-align: right;padding: 12px 0;">
<strong>Total:</strong>
</td>
<td style="padding: 12px 0;">
<strong>{{ total_price | money }}</strong>
</td>
</tr>
<tr>
<td colspan="6" style="padding-top: 30px;">
If you have any questions about your order, please <a href="{{ shop.url }}/pages/contact-us">contact us</a>. Thanks again for shopping with {{ shop_name }}!
</td>
</tr>
</table>
Raw
shipping-confirmation.html
{% assign bgcolor = '#eee' %}
{% assign logoheight = 'auto' %}
{% assign logowidth = '300' %}
<table style="background: #ffffff; width: 90%; max-width: 700px; margin:0 auto;">
<tr>
<td colspan="4" style="text-align: center;padding: 12px 0;">
<a href="{{ shop.url }}"><img src="{{ 'logo.png' | asset_url }}" alt="{{ shop_name }}" width="{{ logowidth }}" height="{{ logoheight }}" style="margin:0 auto;"/></a>
<br/><br/>
<p style="text-align:left;">
{% if billing_address.name %}
Dear {{ billing_address.name }},<br/><br/>
{% endif %}
{% 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!
<br/><br/>
</p>
</td>
</tr>
<tr>
<th colspan="4" style="background: {{bgcolor}};padding:5px 0;">
Item Details:
</th>
</tr>
<tr>
<th colspan="3" style="padding: 12px 0;">
Items
</th>
<th style="padding: 12px 0;">
Qty
</th>
</tr>
{% for line in fulfillment.fulfillment_line_items %}
<tr>
<td style="vertical-align:top;padding: 12px 0;">
<img src="{{ line | img_url: 'small' }}" alt="{{ line.title }}" />
</td>
<td colspan="2" style="vertical-align:top;padding: 12px 0;">
{{ line.line_item.title }}
{% for p in line.line_item.properties %}
{% unless p.last == blank %}
<br />
{{ p.first }}:
{% if p.last contains '/uploads/' %}
{{ p.last | split: '/' | last }}
{% else %}
{{ p.last }}
{% endif %}
{% endunless %}
{% endfor %}
</td>
<td style="vertical-align:top;padding: 12px 0;text-align:center;">
{{ line.quantity }}
</td>
</tr>
{% endfor %}
{% if requires_shipping %}
<tr>
<th colspan="4" style="background: {{bgcolor}};padding: 5px 0;">
Shipping Details:
</th>
</tr>
<tr>
<td colspan="4" style="padding: 12px 0;">
Your items are being shipped {% if fulfillment.tracking_company %}via {{ fulfillment.tracking_company }} {% endif %}to the following address:<br /><br />
{{ shipping_address.name }}<br />
{{ shipping_address.street }}<br />
{{ shipping_address.city }}<br />
{{ shipping_address.province }}
{{ shipping_address.zip }}<br />
{{ shipping_address.country }}
<br/>
</td>
</tr>
{% if fulfillment.tracking_numbers.size > 0 %}
<tr>
<th colspan="4" style="background:{{bgcolor}};padding: 5px 0;">
Tracking Information:
</th>
</tr>
{% if fulfillment.tracking_numbers.size == 1 %}
<tr>
<td colspan="4" style="padding: 12px 0;">
The tracking number for your shipment is {{ fulfillment.tracking_numbers.first }}.<br />
<a href="{{ fulfillment.tracking_urls.first }}">Click here to track your order.</a>
</td>
</tr>
{% else %}
<tr>
<td colspan="4" style="padding: 12px 0;">
<strong>Tracking Numbers:</strong><br/><br/>
{% for tracking_number in fulfillment.tracking_numbers %}
{{ tracking_number }}<br />
{% endfor %}
</td>
</tr>
<tr>
<td colspan="4" style="padding: 12px 0;">
<strong>Tracking Links:</strong><br/><br/>
Click the links below for shipping status on these items (please allow some time for the status of the shipment to correctly display):<br/>
{% for tracking_url in fulfillment.tracking_urls %}
<a href="{{ tracking_url }}">{{ tracking_url }}</a><br/>
{% endfor %}
</td>
</tr>
{% endif %}
{% endif %}
{% endif %}
<tr>
<td colspan="4" style="padding-top: 30px;">
{% if fulfillment_status != 'fulfilled' %}You will receive a confirmation email when more items from your order have been shipped.{% endif %}<br /><br />
Thank you for ordering from {{ shop_name }}!
</td>
</tr>
</table>
Raw
shipping-update.html
{% assign bgcolor = '#eee' %}
{% assign logoheight = 'auto' %}
{% assign logowidth = '300' %}
<table style="background: #ffffff; width: 90%; max-width: 700px; margin:0 auto;">
<tr>
<td colspan="4" style="text-align: center;padding: 12px 0;">
<a href="{{ shop.url }}"><img src="{{ 'logo.png' | asset_url }}" alt="{{ shop_name }}" width="{{ logowidth }}" height="{{ logoheight }}" style="margin:0 auto;"/></a>
<br/><br/>
<p style="text-align:left;">
{% if billing_address.name %}
Dear {{ billing_address.name }},<br/><br/>
{% endif %}
Some items from order {{ name }} have been updated with new shipping information.
<br/><br/>
</p>
</td>
</tr>
<tr>
<th colspan="4" style="background: {{bgcolor}};padding: 5px 0;">
Item Details:
</th>
</tr>
<tr>
<th colspan="3" style="padding: 12px 0;">
Items
</th>
<th style="padding: 12px 0;">
Qty
</th>
</tr>
{% for line in fulfillment.fulfillment_line_items %}
<tr>
<td style="vertical-align:top;padding: 12px 0;">
<img src="{{ line | img_url: 'small' }}" alt="{{ line.title }}" />
</td>
<td colspan="2" style="vertical-align:top;padding: 12px 0;">
{{ line.line_item.title }}
{% for p in line.line_item.properties %}
{% unless p.last == blank %}
<br />
{{ p.first }}:
{% if p.last contains '/uploads/' %}
{{ p.last | split: '/' | last }}
{% else %}
{{ p.last }}
{% endif %}
{% endunless %}
{% endfor %}
</td>
<td style="vertical-align:top;padding: 12px 0;text-align:center;">
{{ line.quantity }}
</td>
</tr>
{% endfor %}
<tr>
<td colspan="4" style="padding-top: 30px;">
These items are being shipped{% if fulfillment.tracking_company %} via {{ fulfillment.tracking_company }}{% endif %} with tracking number {{ fulfillment.tracking_number }}.
<br/><br/>
<a href="{{ fulfillment.tracking_url }}">Click here to see the status of this shipment</a>.<br/><br/>
Please allow some time for the status of the shipment to correctly display at the above address.<br/><br/>
Thanks for shopping with {{ shop_name }}!
</td>
</tr>
</table>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment