The new block editor
Design your notification emails with drag-and-drop blocks
Overview
The new block editor is a full drag-and-drop editor for your loyalty notification emails — replacing the color/logo/button controls of the classic editor with a block-based canvas, a template gallery, and built-in translation.
Instead of filling in a fixed set of fields, you build each email from blocks — Text, Image, Button, Coupon, Product, and more — arranged freely in sections, rows, and columns. You see exactly what you're building as you build it.
The new block editor is rolling out gradually. If your shop doesn't have it yet, your notifications still use the classic editor — nothing changes for you until it's enabled.
If you're upgrading from the classic editor
The first time you open a notification after the new editor is enabled on your shop, your existing email is rebuilt into blocks automatically. You'll see a banner:
Upgraded to the new block editor — We rebuilt this email's layout from your previous version, so it may look a little different. Please review the content and layout, then send yourself a test before turning it on.
Review the layout and send yourself a test before turning the notification back on — automatic conversion aims to match your original design, but layouts built from very custom HTML may need small adjustments.
Opening the editor
Go to Settings > Notifications, then click Edit on any notification. If your shop has the new editor, it opens directly on the block editor.
The new editor doesn't cover every notification yet. POS point redemption confirmations, and any extra points-expiry reminder you add beyond the default 30-day and 7-day ones, still open in the classic editor even after your shop gets the new editor.
The editor layout
The editor opens full-screen with three areas:
- Left panel — two tabs: Settings (trigger info, subject line, sender, custom CSS) and Layers (a tree view of every block in your email, for quick navigation and reordering).
- Canvas (center) — your email, rendered live. Click any block to select and edit it.
- Right panel — Blocks (drag or click to add a new block) and Properties (edit the selected block).
Top toolbar
| Control | What it does |
|---|---|
| Undo / Redo | Step backward or forward through your recent changes. |
| Start from a template | Opens Browse templates — a gallery of built-in designs, searchable by name or voice. Selecting one replaces everything currently in the editor (nothing is saved until you click Save). |
| Language | Switch which language you're editing. See Translation below. |
| Desktop / Mobile | Toggle the canvas preview between viewport sizes. |
| Preview as | Preview using sample data, or pick a real customer to see their actual data rendered in the email. |
| HTML | View the rendered HTML for this email — read-only. Copy it to use elsewhere; you can't paste HTML back in to edit the design this way (see HTML block if you need custom HTML inside your layout). |
| Preview & test | Send yourself a test email with your current edits before saving. |
The HTML view is read-only in the new editor. If you relied on pasting a full custom HTML template in the classic editor, add an HTML block to your layout instead — it lets you drop in custom HTML for one section without giving up the rest of the visual editor (blocks, translation, and merge-tag checks still work for the rest of the email).
Blocks
Build your email by adding blocks from the right panel. Three groups:
Layout
- Section — a full-width horizontal band
- Row — splits a section into columns
- Column — holds blocks inside a row
Content
- Text, Heading — rich text
- Callout — a highlighted message box
- Image, Header Image — pictures, including your shop logo
- Button — a call-to-action link
- Divider, Spacer — visual spacing
- Footer, Social — footer text and social links
- HTML — a block for custom HTML, for cases the visual blocks don't cover
Dynamic (Joy)
- Coupon — shows the reward coupon tied to this email
- Product — shows a product (e.g. for Buy X Get Y or recommendations)
- Loyalty Card — shows a customer's points/tier progress
Click any block on the canvas to select it — its settings open in the Properties panel on the right.
You can drag blocks to reorder them, or use the Layers tab in the left panel to navigate and reorder without hunting on the canvas. Hide or delete any block — this covers what the classic editor could only do for fixed sections like header, footer, or CTA, but now for any block.
What every block shares
Whatever block you select, its Properties panel offers the same set of shared controls (only the ones relevant to that block type show up):
| Control | What it changes |
|---|---|
| Padding | Space around the block — top / right / bottom / left, set individually |
| Border | Width (0–20px), style (solid / dashed / dotted / double), color, and which edges |
| Corner radius | Rounded corners — one value for all corners, or turn on "Individual corners" to set each separately |
| Background | Fill color, or (Section and Row only) a background image with its own position and overlay settings |
| Accent color | One override color used by Button, Product, Coupon, and Loyalty Card blocks |
| Hide on mobile | Every block can be hidden from the mobile version of the email |
| Align / Width | Left / center / right, and fit-content / full-width or a percentage — on Image, Button, and Divider |
What's unique to each block
| Block | What you can edit |
|---|---|
| Section | Full-width toggle, minimum height (for a hero section), background image position and overlay |
| Row | Column layout (1/2/3 columns), gap between columns, how columns stack on mobile |
| Column | Vertical alignment of its contents |
| Text | Edited inline on the canvas — alignment, color, line height, letter spacing, text transform |
| Callout | Content inset spacing (padding inside the card) |
| Image | Source, alt text, width %, alignment, link |
| Button | Label, link, style variant, fit or full width, font, letter spacing, text transform, inner padding |
| Divider | Width %, alignment, spacing above and below |
| Spacer | Height |
| Social | Add / remove / reorder platforms, filled or outline icon style, icon size and spacing, layout direction, mobile stacking |
| HTML | Raw HTML content |
| Product | How products are picked (hand-picked / best sellers / a collection), how many, columns, show price, hide out-of-stock, CTA label |
| Coupon | Header text, coupon code display, Ticket or Plain style, expiry text, footnote |
| Loyalty Card | Progress amount (bound to the customer's real tier progress), label / sub-label / right-side label, show-percent toggle, fill and track colors, height |
Display conditions
Any block can be set to show or hide based on a variable — for example, only show a "next tier" section if the customer isn't already at the top tier. Add one or more rules (match all or match any) from the block's Display condition section; a Conditional badge marks blocks that have one.
Brand colors and images
Colors default to your shop's brand theme — click a color swatch to override it for one block, or reset to inherit the theme again. The image picker lets you upload a new image, choose from your shop's image library, or paste a URL (including a merge tag).
Merge tags (variables)
Insert dynamic content — customer name, points balance, coupon code, and more — using the Insert variable button available in text fields. Variables are grouped (Customer, Points & rewards, Coupons, Tiers, Referrals, Order, Shop, Links, and more) and searchable.
Some variables only apply to certain notification types — the picker flags ones that aren't applicable to the current email so you don't accidentally insert something that will always come out blank.
Translation
The new editor supports writing and auto-translating your emails across languages.
- Set your default email language from the Language switcher in the toolbar — this is both the language you write in and the fallback for recipients without a matching translation.
- Turn on Enable email translation to have Joy machine-translate your default-language content into your other storefront languages automatically.
- After you save, translation runs in the background — you'll see Translating into your other languages…, then Automatic translations are ready.
- Each translated field can be customized (overridden) per language. If you later want to drop your edit and go back to the automatic translation, use Use auto-translation — it only appears where you've made an override.
- Some settings are shared across every language (e.g. layout, colors) rather than per-language — these are marked Shared across all languages — editing here changes every language.
- A language tab shows Not translated yet until its content has been authored or translated — until then, sending falls back to your default-language content.
What translates per language, and what's shared
Only specific fields on each block translate independently per language — layout, spacing, and most styling is shared across every language, so editing it updates the email everywhere at once.
| Block | Translates per language |
|---|---|
| Text | The full text content |
| Heading | The full text content |
| Button | The label |
| Callout | Title, subtitle, and caption |
| HTML | The full HTML |
| Image | Image URL and alt text |
| Section / Row | Background image |
| Coupon | Header text |
| Loyalty Card | Label, sub-label, right-side label |
| Product | The CTA button label |
| Email settings | Subject line, preheader |
Divider, Spacer, and Column blocks have no translatable text. On the Coupon block, the coupon code itself is always shared (it comes from your Joy program, not something you write per language).
Templates
Click Start from a template to browse Joy's built-in template gallery — searchable by name or by "voice" (tone/style). Selecting a template replaces everything currently in the editor; your change isn't saved until you click Save, so you can preview freely before committing.
Preview & test
Use Preview as to check how the email looks with sample data, or pick a real customer to preview their actual data. Toggle Desktop / Mobile to check both layouts. When you're ready, use Preview & test to send a sample to your own inbox before turning the notification on.
FAQs
Will my existing notification emails change? Only once the new editor is enabled for your shop. Your current email is automatically converted into blocks the first time you open it — review it and send a test before re-enabling.
Can I still use custom HTML? Yes, via the HTML block — add it anywhere in your layout for content the visual blocks don't cover. The full-email HTML view in the toolbar is read-only (for copying), not an editable custom-HTML mode like the classic editor.
Do I need to translate my emails manually? No — turn on Enable email translation and Joy machine-translates your default-language content automatically. You can still override any translated field by hand.
What happens if I use a merge tag that doesn't apply to this email? The variable picker flags tags that aren't applicable to the current notification's event, so you can avoid inserting one that will render blank.
Does every notification use the new editor once my shop has it? Most do. A few — POS point redemption confirmations, and extra points-expiry reminders beyond the default 30-day and 7-day ones — still use the classic editor for now.