DataFirefly Transactional Email Designer for PrestaShop

Overview

The dfmaileditor module replaces the content of PrestaShop 8 and 9 transactional emails with designs built in a visual editor. It edits no file in /mails or in the theme and installs no override: when an email is sent, it steps in through the actionEmailSendBefore and actionEmailAddAfterContent hooks and supplies its own HTML and text version.

As long as an email has no active design, PrestaShop sends its native email. If a design fails to render, the error is logged and the native email is sent: no email is ever blocked.

Installation

1. In Modules > Module Manager, click Upload a module and send the dfmaileditor.zip file.
2. The module creates its tables, the img/dfmaileditor folder for images and the Design > Email designer page.
3. No email changes at installation: designs are created inactive and you activate them one by one.

The email list

The module home page lists the shop emails by group: orders, payment, order status, customer account, merchant alerts and other templates. Emails of installed modules are detected and shown in the last group.

• On / Off switch: activates the email design. When off, the native email is sent.
• Design or Edit opens the editor. The cross deletes the design and hands back to the native email.
• Under each email: the date of the last change and the number of emails sent with the design over the last 30 days.
• The search field filters the list by email name or template name.

Design all emails from a style

This button creates the designs of the 16 main emails at once: order confirmation, awaiting bank transfer, awaiting check payment, payment accepted, payment error, processing in progress, shipped, in transit, on backorder, order canceled, refund, voucher, account creation, guest converted to customer, password reset and the new order alert of the ps_emailalerts module.

Pick one of the three styles from their preview:

• Clean: navy blue, system font, left aligned.
• Atelier: Palatino titles, outline buttons, square corners.
• Vivid: colored band at the top, filled buttons, rounded corners.

Options: Use my brand color (set in Settings), Replace designs that already exist and Activate them now. Without that last box, designs stay inactive so you can review them. Texts are written in each installed language among French, English, Spanish, German, Italian, Dutch, Polish and Portuguese; other languages get the English text.

The editor

The editor has three columns:

• Left: the block palette and the email structure. Click a palette block to add it below the selected block, or drag it into the structure. Reorder the structure with drag and drop.
• Middle: the preview. Clicking a block selects it. Above it: languages, desktop / mobile switch, order ID field, email subject and the Checks pill.
• Right: the Block tab with the settings of the selected block and the Email tab with the settings of the whole email.

The top bar holds Start from a style, History, Send a test, the Active switch and Save. Shortcuts: Ctrl+S saves, Ctrl+Z undoes, Ctrl+Y redoes, Del deletes the selected block.

Blocks

• Content: title, text (bold, italic, underline, links, lists), button, image, image and text, highlight box, three columns.
• Order: order details (reference, date, payment, carrier), ordered products, order totals, addresses.
• Marketing: recommended products, personal voucher, promo banner.
• Layout: logo header, divider, spacer, social links, custom HTML, footer.

The Ordered products block shows for each line the photo of the ordered combination, name, attributes, customer customizations, optional reference, quantity and unit price with or without tax according to Settings. Recommended products are chosen automatically, among accessories of the ordered products, best sellers, new products or a list of IDs, 2 to 4 products; products already ordered are excluded.

The Custom HTML block takes your own code, per language, for instance a review widget. Scripts, forms, iframes and event attributes are removed on save.

Spacing and visibility

Every block has a background, space above and below, side margins (-1 uses the email margins) and two options:

• Hide on mobile.
• Show only if this variable has a value: for example the Track my parcel button with the followup variable, which stays hidden until the parcel has a tracking link. In the editor, a block hidden by its condition appears faded.

Email settings

The Email tab sets the subject and the preview text shown in the inbox (per language), page and email backgrounds, width from 480 to 720 px, margins, corner radius, title and text fonts and colors: text, secondary text, main (buttons), text on main color, links, lines, box background. An empty subject keeps the PrestaShop subject.

Variables

The { } button next to fields opens the list of the email variables with their sample value: {firstname}, {order_name}, {shop_url}, {followup}… PrestaShop replaces them when the email is sent. Links can hold a variable, for example {shop_url} or {followup}.

Languages

The pills above the preview switch the displayed and edited language. An orange dot on a pill flags a missing text in that language; the block concerned carries the language code in the structure. Under an empty field, Copy text from takes the text of another language. On send, a missing text falls back to the shop default language, then to English.

Preview, test and checks

• Desktop / Mobile shows the email at the width of a 390 px screen.
• Preview with: enter an order ID to see the email with the products, totals and addresses of that order. Without an ID, sample data is used.
• Send a test sends the editor content, even unsaved, to the chosen address and in the chosen language. No voucher is created.
• Checks flags: an email above 102 KB (Gmail clips it and hides the end), missing texts per language, an image without alt text, a button without label or link, a missing preview text or header, a personal voucher placed in a merchant email. Clicking an item selects the block concerned.

History

Each save keeps a version, up to 20 per email. Restore loads a version into the editor; save to keep it. The same window offers Export this design and Delete design.

Sharing and copying

• Use this block in all my emails, at the bottom of a block’s settings: replaces the block of the same type in every other designed email. A header or footer is added where missing. Handy to change the footer once.
• Apply these colors and fonts to all my emails, at the top of the Email tab: carries over colors, fonts, width and margins without touching subjects or preview texts.
• Start from a style > Copy the design of another email: takes the blocks and colors of an email already designed and keeps the subject and preview text of the current email.

Personal voucher

This block shows a promo code unique to the customer. Settings: title, text, label above the code, button and its link, discount type (percentage, fixed amount or free shipping), value, validity from 1 to 365 days, minimum order amount and code prefix (for instance THANKS gives THANKS-K7P2M9QX). In the texts, {voucher_value} shows the discount value and {voucher_expiry} the end date.

• The code is created when the email is really sent, as a cart rule reserved for the customer and usable once.
• If the same email is sent again for the same order, for instance from the order page, the code already created is reused.
• Previews and test emails show a sample code and create nothing.
• The voucher is shown only when the recipient is the customer: it never appears in the new order alert sent to the merchant.

The rules created carry the description dfmaileditor: template_name in Catalog > Discounts > Cart Rules.

Promo banners

The Promo banners tab manages reusable banners. Each banner has an internal name, a status, optional start and end dates, a background color for the text area and a list of targeted emails (all or a selection). Per language: image (JPG, PNG or GIF, 1200 px wide recommended, 3 MB max), link, alt text, headline, text and promo code to display.

In an email, the Promo banner block shows either the first live banner targeting that email (automatic mode, in list order) or a specific banner. A scheduled banner appears and disappears on its own according to its dates.

Settings

• Use the designed emails: main switch. When off, every email goes back to the native format and designs are kept.
• Prices with tax in product blocks: unit prices and line totals with or without tax.
• Brand color: used by the ready-made styles when the option is ticked.
• Image size in order lines and recommended products, among the shop product image types.
• Social links: links shown by the Social links block as text pills. An empty field hides the network.
• Link tracking: adds utm_source, utm_medium and utm_campaign (template name) to links pointing to your shop only.

Export and import

Export, in the list, downloads a ZIP with every design of the shop and the images uploaded through the module; the history of an email offers the export of that single design. Without the PHP ZipArchive extension, the export is a JSON file without images.

Import accepts that ZIP or JSON. Images are checked (real JPG, PNG or GIF only) and copied to img/dfmaileditor. Options: replace designs that already exist, keep active the designs that were active in the export. Without these boxes, emails already designed are skipped and new designs arrive inactive. Banners are not part of the export.

Troubleshooting

An email is still sent in the native format

Check that the design is active in the list and that the main switch in Settings is on. If the email is triggered from the back office (order status change), PrestaShop skips a module’s hooks when the logged-in employee’s profile lacks the View permission on that module: grant it in Advanced Parameters > Team > Permissions > Modules. Finally, look at Advanced Parameters > Logs: a rendering error is written there with the [dfmaileditor] prefix.

Images do not show for the customer

Images are loaded from the public shop URL: they do not show from a local or password-protected shop. Some email clients block images until the recipient allows them; the alt text shows instead.

Gmail shows “Message clipped”

The email is above 102 KB. Remove blocks, especially large custom HTML, or show fewer recommended products. The Checks pill gives the exact weight.

The voucher does not appear

In the editor and in tests, a sample code is shown. On a real send, the voucher appears only for a single recipient who is the customer of the order, or an existing customer for account emails.

Two product lists in the email

Another module adds its own product lines to emails. Disable it for designed emails: the Ordered products block already shows the photos.