- Maizzle | create custom email templates using Tailwind and regular HTML
- Browsersync | listing a directory of emails in browser
- Liquid | for Shopify compatability
yarn install
build development server
yarn dev
<!-- update config.js to match the production file you're working on -->
Build emails for production:
yarn build:<config_name>
<!--
eg. yarn build:shopify
update scripts when a new project is added
-->
Currently when creating templates for Shopify we have to separate the Liquid and Dev code.
<if condition="page.environment == 'shopify'">
<raw>
<table>
// liquid code
</table>
</raw>
</if>
<else>
<table>
// dev code
</table>
</else>
This can likely be automated in the future.
- house multiple projects emails, use seperate config file & dynamic/seperated components
- refactor tailwind reusable components, set utilities
- create tailwind configs for each project
- convert HTML to Liquid progromatically
- validate Liquid code and allow local rendering using
liquidjs
- add email sending to a free validation service. could use
nodemailer
ormailgun
- for liquid support in vsCode add "emmet.includeLanguages": { "liquid": "html" } to your settings
- most Maizzle elements, eg.
<component></component>
do not allow self-closing - rebuild if you change
test.json
or config files - folders in
src/templates
breaks asset imports (and likely other stuff) @{{ name | fallback: 'friend' }}
for passing escaped variables to components.- only able to get escaped variables working (
@{{ name | fallback: 'friend' }}
) within the<raw>
element of components
If you've never coded emails before, read this
- review liquid code: https://help.shopify.com/en/manual/orders/notifications/email-variables?shpxid=a2ce9ccf-CCAF-4D7A-81E9-9CDF8330F431
- check your templates
If you're unsure about HTML or CSS validity you can check here
We need to evaluate and add the best to workflow