- Easy Drag and Drop Interface
- Includes 25 Basic Templates with English and German translations,
- Instant preview of templates with your own shop data right in the designer
- Based on Mjml core, to allow for responsive mails, that work on a wide variety of devices
- Extends the available data sets e.g adds product cover images to order confirmation mails
- Every component is adjustable in detail - Wide variety of configuration options with nearly infinite combinations
- What You See Is What You Get - The editor minimizes discrepancy between your design and what customers receive
- Responsive preview - Check your design on different device sizes
- Most templates with more complex bahviour have ready-made presets available, that can be customized by you
- Images are selectable directly from shopware media
- Insert variables into your text and components from a list
- Only variables, that are available for the respective template type are selectable
- Best of both worlds - Mix code and visual elements for advanced use cases
- Variables defined in code can be selected in visual elements
- Automatic plain text and HTML generation
- Code generation on client-side reduces server load
- No external APIs are called
With the Visual Mail Editor you can create advanced responsive mail layouts for transactional mail templates, with no hassle, via a simple drag and drop interface.
Install and activate the plugin via Settings > System > Plugins.
After the installation
After the installation and activation of the plugin, the shopware administration will be automatically extended with 2 new modules:
The Template-Designer is the main tool to create and edit your email templates visually.
The Template-Designer extends the default email template view in the shopware administration.
To open the designer, navigate to shopwares default email template overview (Settings > Shop > Email templates).
Then choose a template from the list, that you want to edit, or create a new email template of the desired type.
You will find a new section with name "Visual Mail Editor" in the edit-view of the template. Inside the section is a button called "Open Designer".
Click the button to open the Template Designer.
If you open the designer for the first time, the Visual Mail Editor default theme for the selected template type will be opened as a starting point.
After the plugin installation you will find a new settings entry in the shop settings (Settings > Shop) called "Visual Mail Editor Theme Installer".
If you want to start directly with the Visual Mail Editor Default Theme, here you are able to install all templates that ship with Visual Mail Editor and automatically assign them as the outgoing mail templates.
To install all templates, first choose the sales channels, that should be assigned to all installed templates and start the installer process with the button "Install & Assign Default Theme".
All templates will be installed in the languages English and German.
The Default Theme is an responsive adaption of the default shopware mail templates, that is extended with Visual Mail Editor features.
The theme holds 25 templates, translated in English and German language. It serves well as an entry point for your individual customizations.
After the theme installation, all installed templates will be available via Settings > Shop > Email templates. The installed templates have the description "Visual Mail Editor Default Theme".
- If you create a new template, you will find a notice in the section "Visual Mail Editor", prompting you to save your template before it can be opened in the Designer.
Fill all required fields of the mail template with your data and save it. You will be redirectet to the templates edit view.
Now, in the section "Visual Mail Editor", the button "Open Designer" appears. Click the button to start editing the template in the Designer.
- If you want to edit a Shopware default template, you will find a notice in the "Visual Mail Editor" section, stating you can't edit the template directly.
The "Open in new template" button gives you the option of continuing with a copy of the template without overwriting the standard template.
If you click on this button, a copy of the template is created and the Designer opens automatically in the duplicated template.
- The standard text fields for HTML and plain text cannot be written to in any of the templates that are not Shopware default templates.
Instead, they only serve as an output field for code that is generated by the designer.
- If you duplicate a Shopware default template from the list view, the system standard value is not removed; this means that you are prompted to open the designer in a new template.
Therefore open the edit view of the standard template directly and use the button "Open in new template" to create a copy.
- There needs to be at least one order in the system, for the preview function to work properly.