Email Template Editor (Drag-and-Drop)

You design your email by adding blocks (heading, text, image, button...) with the drag-and-drop method. Similar to Word, but for email.

Where to find: Edit on a template (or it opens automatically when you create a new template) Who it's for: Anyone who builds the email design In short: You design your email by adding blocks (heading, text, image, button...) with the drag-and-drop method. Similar to Word, but for email.

The editor consists of three panels

Think of the screen as three vertical panels:

┌──────────────┬───────────────────────────┬──────────────────┐
│  LEFT: Blocks │   CENTER: Canvas (email)  │  RIGHT: Settings │
│  (block types │   (the area you design)   │  (settings of    │
│   you can add)│                           │   selected block)│
└──────────────┴───────────────────────────┴──────────────────┘

Left panel (Blocks): The types of pieces you can add to the email.
Center panel (Canvas): The actual look of your email; you place blocks here.
Right panel (Settings): The settings of the block you selected on the canvas (color, text, alignment...).

At the very top of the screen:

Back (←): Returns to the template list.
Template Name, Subject Line, and Preview Text fields (the email's header information; you can type directly here).
- Preview text: the short description shown next to the subject in the inbox.
Undo (↶, Ctrl+Z) / Redo (↷, Ctrl+Shift+Z): Undoes/reapplies the last change.
Preview (eye): Shows how the email will look (below).
Test Email: Sends a trial email to yourself (below).
Reset to Default: Returns the template to its initial state.
Save: Saves the changes. (Disabled if there are no changes; shows "Saving..." while saving.)

Don't forget to save! Your design only becomes permanent after you click Save.

Left panel — Adding blocks

The blocks you can add in the left panel are split into categories:

Category	Blocks
Content	Heading, Text, Image, Button, Divider, Spacer, HTML
Layout	Columns
E-Commerce	Product, Order Summary
Social	Social Links, Footer

What each block does and its settings: Email Block Settings (All Blocks + General Settings).

Center panel — Canvas (adding and editing blocks)

The canvas is the actual 600px-wide view of the email (real emails are this width).

Adding a block

Hold a block and drag it onto the canvas from the left panel, then drop it:

If you drop it on an empty spot on the canvas, it's added at the end.
If you drop it on an existing block, it's added before it.
If you drop it inside a column, it's added to that column.

When the canvas is empty: "Drag and drop blocks from the left panel" is shown.

Selecting and editing a block

Click a block → it's selected (its surroundings are highlighted) and its settings open in the right panel.

Reordering, copying, deleting blocks

When you hover over a block, small buttons appear on its edges:

Handle (drag): Hold the block and move it up/down to change its order.
Copy: Adds a copy of the block right below it.
Delete (trash can): Removes the block. (If you deleted it by accident, bring it back with Undo.)

At the very top (logo) and very bottom (footer) of the canvas there are faintly shown areas. These are managed from General Settings (see the block settings document), not edited directly on the canvas.

Right panel — Settings (two tabs)

Block Settings: The settings of the selected block. (If no block is selected: "Select a block to edit".)
General Settings: Settings applied to the whole email (logo, accent color, font, company information).

Details: Email Block Settings (All Blocks + General Settings).

Preview

With the Preview button on the top bar, you see the actual look of the email:

You can switch between Desktop / Mobile view.
You can refresh the preview with Refresh.

Before sending, be sure to also check the mobile view; most emails are opened on a phone.

Sending a test email

Before sending to real customers, try it on yourself:

Click the Test Email button.
Enter an email address in the window that opens.
Click Send. A "Test email sent." notification appears.

The window has this warning: "The test email will be sent with the most recently saved template data." — that is, Save first, then send the test; otherwise your latest changes won't be reflected in the test.

Step by step: designing your first template

New Template → enter a name → the editor opens.
From the top bar, write the Subject Line.
Drag the Image block from the left panel and add your logo/banner.
Add Heading and Text blocks and write your message.
Add a Button and put a link like "Start Shopping".
From General Settings, set the logo, color, and company information.
Check desktop/mobile with Preview.
Send a trial to yourself with Test Email.
Save.

Frequently asked questions

I did something wrong. Go back with Undo (Ctrl+Z); if needed, reset the template with Reset to Default.

Will my changes be lost? They aren't permanent unless you click Save. Save before you leave.

Can I automatically print the customer's name in the email? Yes — you add variables to texts (e.g. {{customer.firstName}}). Details: Email Block Settings (All Blocks + General Settings).