Hi all,
I want to change the font in our customer notification email (e.g. order confirmation) to Times New Roman to match our brand style.
I’ve managed to change the background colour and CTA buttons through the CSS, but when I specify the font in the CSS, nothing changes.
Am I missing something?
@constantinidesp - check if this css is applied to that view order button, order button may have different font set for it
Hi, I believe so, this is the full CSS:
Change font to Times New Roman for the WHOLE email
{% capture email_title %}
{% if has_pending_payment %}
Thank you for your order!
{% else %}
Thank you for your purchase!
{% endif %}
{% endcapture %}
{% capture email_body %}
{% if has_pending_payment %}
{% if buyer_action_required %}
You’ll get a confirmation email after completing your payment.
{% else %}
Your payment is being processed. You'll get an email when your order is confirmed.
{% endif %}
{% else %}
{% if requires_shipping %}
{% case delivery_method %}
{% when 'pick-up' %}
You’ll receive an email when your order is ready for pickup.
{% when 'local' %}
Hi {{ customer.first_name }}, we're getting your order ready for delivery.
{% else %}
We're getting your order ready to be shipped. We will notify you when it has been sent.
{% endcase %}
{% if delivery_instructions != blank %}
**Delivery information:** {{ delivery_instructions }}
{% endif %}
{% if consolidated_estimated_delivery_time %}
{% if has_multiple_delivery_methods %}
### Estimated delivery
{{ consolidated_estimated_delivery_time }}
{% else %}
Estimated delivery **{{ consolidated_estimated_delivery_time }}**
{% endif %}
{% endif %}
{% endif %}
{% endif %}
{% assign gift_card_line_items = line_items | where: "gift_card" %}
{% assign found_gift_card_with_recipient_email = false %}
{% for line_item in gift_card_line_items %}
{% if line_item.properties["__shopify_send_gift_card_to_recipient"] and line_item.properties["Recipient email"] %}
{% assign found_gift_card_with_recipient_email = true %}
{% break %}
{% endif %}
{% endfor %}
{% if found_gift_card_with_recipient_email %}
Your gift card recipient will receive an email with their gift card code.
{% elsif gift_card_line_items.first %}
You’ll receive separate emails for any gift cards.
{% endif %}
{% endcapture %}
<table>
<table>
<table>
{%- if po_number %}
{%- endif %}
<table>
<tr>
<td>
{%- if shop.email_logo_url %}
{%- else %}
#
{{ shop.name }}
{%- endif %}
</td>
<td>
</td>
</tr>
<tr>
<td>
Order {{ order_name }}
</td>
</tr>
<tr>
<td>
PO number #{{ po_number }}
</td>
</tr>
</table>
</table>
</table>
<table>
<table>
## {{ email_title }}
{{ email_body }}
{% assign transaction_count = transactions | size %}
{% if transaction_count > 0 %}
{% for transaction in transactions %}
{% if transaction.show_buyer_pending_payment_instructions? %}
{{transaction.buyer_pending_payment_notice}}
{% for instruction in transaction.buyer_pending_payment_instructions %}
{% endfor %}
{% for instruction in transaction.buyer_pending_payment_instructions %}
{% endfor %}
<table>
<tr>
<td>
{{ instruction.header }}
</td>
<td>
Amount
</td>
</tr>
<tr>
<td>
{{ instruction.value }}
</td>
<td>
{{transaction.amount | money}}
</td>
</tr>
</table>
{% endif %}
{% endfor%}
{% endif %}
{% if order_status_url %}
<table>
<tr>
<td>
</td>
</tr>
<table>
<tr>
<td>
View your order
</td>
</tr>
</table>
{% if shop.url %}
<table>
<tr>
<td>
or Visit our store
</td>
</tr>
</table>
{% endif %}
</table>
{% else %}
{% if shop.url %}
<table>
<table>
<tr>
<td>
Visit our store
</td>
</tr>
</table>
</table>
{% endif %}
{% endif %}
</table>
</table>
<table>
<table>
<tr>
<td>
### Order summary
</td>
</tr>
</table>
<table>
{% for line in subtotal_line_items %}
{% endfor %}
<table>
{% assign expand_bundles = false %}
{% if expand_bundles and line.bundle_parent? %}
{% else %}
{% endif %}
{% if expand_bundles and line.bundle_parent? %}
<table>
<td>
{% if line.image %}
{% else %}
{% endif %}
</td>
<td>
{% if line.image %}
{% else %}
{% endif %}
</td>
{% if line.product.title %}
{% assign line_title = line.product.title %}
{% else %}
{% assign line_title = line.title %}
{% endif %}
{% if line.quantity < line.quantity %}
{% capture line_display %}
{{ line.quantity }} of {{ line.quantity }}
{% endcapture %}
{% else %}
{% assign line_display = line.quantity %}
{% endif %}
{{ line_title }} × {{ line_display }}
{% if line.variant.title != 'Default Title' and line.bundle_parent? == false %}
{{ line.variant.title }}
{% elsif line.variant.title != 'Default Title' and line.bundle_parent? and expand_bundles == false %}
{{ line.variant.title }}
{% endif %}
{% if expand_bundles %}
{% for component in line.bundle_components %}
<table>
<table>
<tr>
<td>
{% if component.image %}
{% else %}
{% endif %}
</td>
<td>
{% if component.product.title %}
{% assign component_title = component.product.title %}
{% else %}
{% assign component_title = component.title %}
{% endif %}
{% assign component_display = component.quantity %}
{{ component_title }} × {{ component_display }}
{% if component.variant.title != 'Default Title'%}
{{ component.variant.title }}
{% endif %}
</td>
</tr>
</table>
</table>
{% endfor %}
{% else %}
{% for group in line.groups %}
Part of: {{ group.display_title }}
{% endfor %}
{% endif %}
{% if line.gift_card and line.properties["__shopify_send_gift_card_to_recipient"] %}
{% for property in line.properties %}
{% assign property_first_char = property.first | slice: 0 %}
{% if property.last != blank and property_first_char != '_' %}
<dt>{{ property.first }}:</dt>
<dd>
{% if property.last contains '/uploads/' %}
{{ property.last | split: '/' | last }}
{% else %}
{{ property.last }}
{% endif %}
</dd>
{% endif %}
{% endfor %}
{% endif %}
{% if line.selling_plan_allocation %}
{{ line.selling_plan_allocation.selling_plan.name }}
{% endif %}
{% if line.refunded_quantity > 0 %}
Refunded
{% endif %}
{% if line.discount_allocations %}
{% for discount_allocation in line.discount_allocations %}
{% if discount_allocation.discount_application.target_selection != 'all' %}
{{ discount_allocation.discount_application.title | upcase }}
(-{{ discount_allocation.amount | money }})
{% endif %}
{% endfor %}
{% endif %}
{% else %}
{% endif %}
{% if line.original_line_price != line.final_line_price %}
<del>{{ line.original_line_price | money }}</del>
{% endif %}
{% if line.final_line_price > 0 %}
{{ line.final_line_price | money }}
{% else %}
Free
{% endif %}
</table>
</table>
<table>
<td>
</td>
{% assign order_discount_count = 0 %}
{% assign total_order_discount_amount = 0 %}
{% assign has_shipping_discount = false %}
{% for discount_application in discount_applications %}
{% if discount_application.target_selection == 'all' and discount_application.target_type == 'line_item' %}
{% assign order_discount_count = order_discount_count | plus: 1 %}
{% assign total_order_discount_amount = total_order_discount_amount | plus: discount_application.total_allocated_amount %}
{% endif %}
{% if discount_application.target_type == 'shipping_line' %}
{% assign has_shipping_discount = true %}
{% assign shipping_discount = discount_application.title %}
{% assign shipping_amount = discount_application.total_allocated_amount %}
{% endif %}
{% endfor %}
{% if order_discount_count > 0 %}
{% if order_discount_count == 1 %}
{% endif %}
{% if order_discount_count > 1 %}
{% endif %}
{% for discount_application in discount_applications %}
{% if discount_application.target_selection == 'all' and discount_application.target_type != 'shipping_line' %}
{% endif %}
{% endfor %}
{% endif %}
{% if delivery_method == 'pick-up' %}
{% else %}
{% if has_shipping_discount %}
{% else %}
{% endif %}
{% endif %}
{% if total_duties %}
{% endif %}
{% if total_tip and total_tip > 0 %}
{% endif %}
<table>
<tr>
<td>
Subtotal
</td>
<td>
**{{ subtotal_price | plus: total_order_discount_amount | money }}**
</td>
</tr>
<tr>
<td>
Order discount
</td>
<td>
**-{{ total_order_discount_amount | money }}**
</td>
</tr>
<tr>
<td>
Order discounts
</td>
<td>
**-{{ total_order_discount_amount | money }}**
</td>
</tr>
<tr>
<td>
{{ discount_application.title }} (-{{ discount_application.total_allocated_amount | money }})
</td>
</tr>
<tr>
<td>
Pickup
</td>
<td>
**{{ shipping_price | money }}**
</td>
</tr>
<tr>
<td>
Shipping
</td>
<td>
**Free**
</td>
</tr>
<tr>
<td>
{{ shipping_discount }} (-{{ shipping_amount | money }})
</td>
</tr>
<tr>
<td>
Shipping
</td>
<td>
**{{ shipping_price | money }}**
</td>
</tr>
<tr>
<td>
Duties
</td>
<td>
**{{ total_duties | money }}**
</td>
</tr>
<tr>
<td>
Taxes
</td>
<td>
**{{ tax_price | money }}**
</td>
</tr>
<tr>
<td>
Tip
</td>
<td>
**{{ total_tip | money }}**
</td>
</tr>
</table>
{% assign transaction_size = 0 %}
{% assign transaction_amount = 0 %}
{% for transaction in transactions %}
{% if transaction.status == "success" %}
{% if transaction.kind == "sale" or transaction.kind == "capture" %}
{% assign transaction_size = transaction_size | plus: 1 %}
{% assign transaction_amount = transaction_amount | plus: transaction.amount %}
{% elsif transaction.kind == "refund" or transaction.kind == "change" %}
{% assign transaction_size = transaction_size | plus: 1 %}
{% assign transaction_amount = transaction_amount | minus: transaction.amount %}
{% endif %}
{% endif %}
{% endfor %}
{% if payment_terms and payment_terms.automatic_capture_at_fulfillment == false or b2b?%}
{% assign due_at_date = payment_terms.next_payment.due_at | date: "%b %d, %Y" %}
{% else %}
{% if transaction_amount != total_price and payment_terms == nil%}
{% endif %}
{% endif %}
<table>
<tr>
<td>
Total paid today
</td>
<td>
**{{ transaction_amount | money_with_currency }}**
</td>
</tr>
<tr>
<td>
Total due {{ due_at_date }}
</td>
<td>
**{{ payment_terms.next_payment.amount_due | money_with_currency }}**
</td>
</tr>
<tr>
<td>
Total
</td>
<td>
**{{ total_price | money_with_currency }}**
</td>
</tr>
<tr>
<td>
Total paid today
</td>
<td>
**{{ transaction_amount | money_with_currency }}**
</td>
</tr>
</table>
{% if total_discounts > 0 %}
You saved {{ total_discounts | money }}
{% endif %}
{% unless payment_terms %}
{% if transaction_size > 1 or transaction_amount < total_price %}
{% for transaction in transactions %}
{% if transaction.status == "success" and transaction.kind == "capture" or transaction.kind == "sale" %}
{% if transaction.payment_details.gift_card_last_four_digits %}
{% capture transaction_name %}Gift card (ending with {{ transaction.payment_details.gift_card_last_four_digits }}){% endcapture %}
{% elsif transaction.payment_details.credit_card_company %}
{% capture transaction_name %}{{ transaction.payment_details.credit_card_company }} (ending in {{ transaction.payment_details.credit_card_last_four_digits }}){% endcapture %}
{% else %}
{% capture transaction_name %}{{ transaction.gateway_display_name }}{% endcapture %}
{% endif %}
{% endif %}
{% if transaction.kind == 'refund' %}
{% if transaction.payment_details.gift_card_last_four_digits %}
{% assign refund_method_title = transaction.payment_details.type %}
{% elsif transaction.payment_details.credit_card_company %}
{% assign refund_method_title = transaction.payment_details.credit_card_company %}
{% else %}
{% assign refund_method_title = transaction.gateway_display_name %}
{% endif %}
{% endif %}
{% endfor %}
<table>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td>
{{transaction_name}}
</td>
<td>
**{{ transaction.amount | money }}**
</td>
</tr>
Refund
<small>{{ refund_method_title | replace: '_', ' ' | capitalize }}</small>
**- {{ transaction.amount | money }}**
</table>
{% endif %}
{% endunless %}
</table>
</table>
</table>
<table>
<table>
<tr>
<td>
### Customer information
</td>
</tr>
</table>
<table>
{% if requires_shipping and shipping_address %}
{% endif %}
{% if billing_address %}
{% endif %}
<table>
<tr>
<td>
#### Shipping address
{{ shipping_address | format_address }}
</td>
<td>
#### Billing address
{{ billing_address | format_address }}
</td>
</tr>
</table>
{% if company_location %}
{% endif %}
{% if transaction_size > 0 or payment_terms and payment_terms.automatic_capture_at_fulfillment == false or b2b? %}
{% endif %}
{% if requires_shipping and shipping_address %}
{% if shipping_method %}
{% endif %}
{% endif %}
<table>
<tr>
<td>
#### Location
{{ company_location.name }}
</td>
<td>
#### Payment
{% if payment_terms %}
{% assign due_date = payment_terms.next_payment.due_at | default: nil %}
{% if payment_terms.type == 'receipt' or payment_terms.type == 'fulfillment' and payment_terms.next_payment.due_at == nil %}
{{ payment_terms.translated_name }}
{% else %}
{{ payment_terms.translated_name }}: Due {{ due_date | date: format: 'date' }}
{% endif %}
{% endif %}
{% if transaction_size > 0 %}
{% for transaction in transactions %}
{% if transaction.status == "success" or transaction.status == "pending" %}
{% if transaction.kind == "capture" or transaction.kind == "sale" %}
{% if transaction.payment_details.gift_card_last_four_digits %}
ending with {{ transaction.payment_details.gift_card_last_four_digits }}
{% elsif transaction.payment_details.credit_card_company %}
ending with {{ transaction.payment_details.credit_card_last_four_digits }}
{% elsif transaction.gateway_display_name == "Gift card" %}
ending with {{ transaction.payment_details.gift_card.last_four_characters | upcase }}
Gift card balance - **{{ transaction.payment_details.gift_card.balance | money }}**
{% elsif transaction.gateway_display_name != "Shop Cash" %}
{{ transaction.gateway_display_name }}
{% endif %}
{% elsif transaction.kind == "authorization" and transaction.gateway_display_name == "Shop Cash" %}
Shop Cash - **{{ transaction.amount | money }}**
{% endif %}
{% endif %}
{% endfor %}
{% endif %}
</td>
</tr>
<tr>
<td>
#### Shipping method
{% if delivery_promise_branded_shipping_line %}
{{ delivery_promise_branded_shipping_line }}
{% else %}
{{ shipping_method.title }}
{% endif %}
</td>
</tr>
</table>
</table>
</table>
<table>
<table>
<tr>
<td>
If you have any questions, reply to this email or contact us at [{{ shop.email }}](mailto:{{ shop.email }})
</td>
</tr>
</table>
</table>
</table>