Email Notifications

The Email notifications repo (https://github.com/baoagency/Shopify-email-notifications) has now been updated to include the layout and global email settings inside of metafields.

Check out https://anna-green-development-store.myshopify.com/ (ACF > Shop Custom Fields) as a demo.

Example of how this works

Let's use the 'Customer account invite' email template in https://anna-green-development-store.myshopify.com/ (Settings > Notifications > Customer account invite) as an example of how to create new emails going forward:

Click on 'edit code'
You'll see that the email layout is brought in through a metafield like the below, using replaces to copy over global metafields and shop data:

{{- shop.metafields.transactional_emails.layout_html
  | replace: '[[- global_font_body_colour -]]', shop.metafields.transactional_emails.global_font_body_colour
  | replace: '[[- global_font_colour -]]', shop.metafields.transactional_emails.global_font_colour
  | replace: '[[- global_font_size -]]', shop.metafields.transactional_emails.global_font_size
  | replace: '[[- global_heading_colour -]]', shop.metafields.transactional_emails.global_heading_colour
  | replace: '[[- shop_email_accent_color -]]', shop.email_accent_color
  | replace: '[[- global_border_colour -]]', shop.metafields.transactional_emails.global_border_colour
  | replace: '[[- global_section_background -]]', shop.metafields.transactional_emails.global_section_background
  | replace: '[[- shop_url -]]', shop.url
  | replace: '[[- shop_name -]]', shop.name,
  | replace: '[[- shop_email_logo_url -]]', shop.email_logo_url
  | replace: '[[- shop_email_logo_width -]]', shop.email_logo_width
  | replace: '[[- hero_image -]]', hero_image
  | replace: '[[- body -]]', body
  | replace: '[[- social_text_facebook -]]', social_text_facebook
  | replace: '[[- social_text_twitter -]]', social_text_facebook
  | replace: '[[- social_text_instagram -]]', social_text_facebook
  | replace: '[[- social_text_pinterest -]]', social_text_facebook
  | replace: '[[- disclaimer_text -]]', disclaimer_text
-}}

To change the hero_image for this template, you will see the below inside of the customer account invite email:

{% comment %}Hero{% endcomment %}
{%- assign email_hero = 'email_images.customer.hero_image_url' | t -%}
{%- assign email_hero_fallback = shop.metafields.transactional_emails.hero_image.first.src -%}
{%- assign hero_image = email_hero | default: email_hero_fallback -%}

The first place shopify will look for the hero image is the 'email_images.customer.hero_image_url' translation, if there is none then the fallback will be the 'transactional_emails.hero_image' metafield.

Please note the translation can be changed per email, so if you wanted a different one used for order confirmation email you would use 'email_images.order.hero_image_url' for example.

There should also be a body capture within the email template where the body of the email is stored. From here you are able to edit the main body of the content. Going forward this content should be the only thing that changes inside of templates. You are able to use liquid variables inside of here should you need.
In addition there is also a code section within the template to change the social icons alt tags and disclaimer text:

{% comment %}Translations for social icons and disclaimer{% endcomment %}
{%- liquid
  assign social_text_facebook = 'email_translations.social_alt_tags.facebook' | t
  assign social_text_twitter = 'email_translations.social_alt_tags.twitter' | t
  assign social_text_instagram = 'email_translations.social_alt_tags.instagram' | t
  assign social_text_pinterest = 'email_translations.social_alt_tags.pinterest' | t

  assign disclaimer_text = 'email_translations.general.disclaimer_html' | t
-%}

These are also translations which should be added to the theme when building, if they are not they will show as empty.

When all new templates have been built in a project using this new method, it should be easier to change for example the global font size of all emails instead of editing them one by one.

For more information please refer to the readme file on the email notifications repo - https://github.com/baoagency/Shopify-email-notifications/blob/master/README.md

Email Notifications

Example of how this works​

Example of how this works