VTEX Emails
Last updated
Last updated
VTEX Emails is an email framework based on for developing transactional email templates for VTEX E-commerces.
VTEX Emails inherited like:
SASS support
Automatic CSS inlining
Embedded CSS
Webserver with Live Reload
Reset styles
Responsive design
And it has other important features:
Handlebars compiling
Tachyons integration
Partials for code reuse
VTEX transactional JSONs examples for preview
i18n for internationalization
public
compiled files for preview
dist
compiled files for exporting
source
working folder
data
JSON files containing Orders data
helpers
VTEX's Helpers functions
locales
i18n files
sass
styles
templates
e-mails templates
partials
e-mails parts
helpers
you can use only Handlebars and VTEX's Helpers
data
you can create folders with different JSON examples as well. They must have a real VTEX JSON structure
locales
use your own communication
sass
use your own style
templates
name your templates your own way. Each template must have a JSON file with the same name.
partials
use the partials that make sense for you
Download or clone VTEX Emails
Install npm dependencies: run npm install
Requires node 16.x
Run npm run gulp dev
Choose the language folder and open the template that you want to preview
Run npm run gulp dist
Go to dist
folder, copy the template content and paste it in VTEX Message Center
Run npm run gulp preview
Go to public
folder, copy the template content and test it using services like MailChimp
Stop npm service
Create a new folder in source/data
Change orderJsonToRead
variable in gulpfile.js
to the new folder name
Start npm service
Live reload is not working very well. Sometimes you need to refresh the page manually
Recompiling doesn't work for JSON changes. You'll need to stop npm service and start it again
Improve Outlook compatibility
Improve VTEX inStore scenarios
If you find a bug or need new feature please open a new issue and we will discuss about it.
Thank you! :)
Go to