uicrooks / shopify-mail-notifications

Shopify Mail Notifications

Blazing-fast templating environment for Shopify mail notifications with Liquid, ✉ MJML + 🌿 Twig. Create responsive emails quickly with less code.

Table of contents

• Features
• System requirements
• Getting started
• Production
• Directories
• Documentation
• Limitations

Features

• MJML
• Twig
• Liquid
• Yaml
• Webpack
• Webpack-dev-server
• Ready to use shopify mail notification templates

System requirements

• Node.js
• npm or yarn

Getting started

Install dependencies and run webpack-dev-server:

npm

$ npm install

$ npm run dev

yarn

$ yarn import # migrate package-lock.json to yarn.lock
$ rm package-lock.json # or delete manually
$ yarn install --force

$ yarn dev

Optional

If the server port is already in use, adjust devServerPort in package.json

Production

Generate minified .liquid files in dist/ directory:

npm

$ npm run build

yarn

$ yarn build

Directories

Documentation

It's important to understand in which order webpack transforms the code. First, webpack compiles the .twig templates, then MJML tags are compiled to html. If the build task is running liquid isn't compiled and is written directly to the dist/ directory as .liquid files. If the dev task is running: data from src/data/shopify/ is passed to the liquid code, it's compiled to regular html and served via webpack-dev-server.

Development flow: Twig → MJML → Shopify data → Liquid → .html files → Webpack-dev-server

Production flow: Twig → MJML → .liquid files

Additional notes

• Data from src/data/ is available in all .twig templates.
• Data from src/data/shopify/ is available during liquid compilation in development.
• If you want to write liquid tags instead of twig tags, you have to escape them with {% verbatim %}{% endverbatim %} about verbatim.
• You might get a Parsing error, especially when using the < character in liquid tags, use <!-- htmlmin:ignore -->{% if foo < 5 %}<!-- htmlmin:ignore --> for a fix.
• Some Shopify specific filters might not exist in the liquid compiler. To fix this for development, you can add additional filters to the filters section inside .config/webpack.common.js.

Additional docs

• MJML docs
• Twig docs
• Liquid docs

Limitations

• If you change data in files inside src/data/shopify/, you have to restart webpack.
• It's not possible to set shop.email_accent_color to change it later in Shopify.
• POS Exchange Receipt template doesn't work.