---
title: "Build an email layout with the visual builder"
description: "Design branded transactional emails for Shopify Flow with the visual block builder, or write raw HTML. Full block reference, branding settings and test variables."
canonical: "https://crm-tool.k8s-gcp-dev.eu.codecreationlabs.cloud/h/flow-transactional-email/build-an-email-layout"
---

# Build an email layout

An **email layout** is the email itself: the subject line, the design, and any attachments. The Shopify Flow action picks a layout and a sender, then sends. Because the layout is separate from the workflow, one design can serve every customer without you touching HTML again.

![The Email Layouts list](https://cdn-dev.eu.codecreationlabs.cloud/crm-tool/uploads/SjJ78gKLnLlocopCui3Cs62dJbGZ7F1n/dbdb94fcca8e7a1b.png)

## Create a layout

Go to **Email Layouts** and click **Create email layout**. You will set:

- **Name** - how you recognise it. Only you see this.
- **Subject** - supports `{{ variables.xxx }}` and `{{ secrets.xxx }}`.
- **Description** - optional, for your own reference.

Then choose an editor:

| Editor | Best for |
| --- | --- |
| **Visual builder** | Designed, branded emails built from drag-and-drop blocks |
| **Rich text / HTML** | Simple transactional notes, or a fully custom HTML email you paste in |

> [!WARNING]
> The editor choice cannot be changed after the layout is created. If you pick the wrong one, create a new layout - it is quicker than fighting the editor.

## The visual builder

The builder is a two-panel screen: settings on the left, a live canvas preview on the right. Add blocks with the **Add section** button or the **+** markers between existing blocks.

![Choosing blocks in the email designer](https://cdn-dev.eu.codecreationlabs.cloud/crm-tool/uploads/SjJ78gKLnLlocopCui3Cs62dJbGZ7F1n/ac56b8f505f6d642.png)

The left panel has four tabs:

| Tab | What it holds |
| --- | --- |
| **General** | Name, Subject, Description |
| **Branding** | Colors, typography and layout spacing for the whole email |
| **Blocks** | Settings for whichever block you selected on the canvas |
| **Test Variables** | Sample values used for previewing, plus the system variables reference |

Each block on the canvas has controls to drag it, duplicate it, delete it, or hide it without deleting.

![A layout built from heading, image and text blocks](https://cdn-dev.eu.codecreationlabs.cloud/crm-tool/uploads/SjJ78gKLnLlocopCui3Cs62dJbGZ7F1n/37dc8bed65e71ddb.png)

### Block reference

**Elements**

| Block | Settings |
| --- | --- |
| **Text** | Rich text, alignment, font size (12/14/16/18), color |
| **Heading** | Heading text, size (Extra Large H1 to Small H4), alignment, color |
| **Image** | Image (upload or link), alt text, width 10-100%, alignment |
| **Button** | Label, URL, style (Primary / Secondary / Outline), alignment, border radius 0-24px |
| **Divider** | Color, style (Solid / Dashed / Dotted), thickness 1-8 |
| **Spacing** | Height 4-80px |
| **Attachment** | File picker and a title. See [Attachments and images](https://crm-tool.k8s-gcp-dev.eu.codecreationlabs.cloud/h/flow-transactional-email/attachments-and-images.md) |
| **Loop** | Repeats a block of Liquid + HTML over an array variable. See [Variables and Liquid](https://crm-tool.k8s-gcp-dev.eu.codecreationlabs.cloud/h/flow-transactional-email/variables-and-liquid.md) |
| **HTML / Code** | Raw HTML with Liquid, including `{% if %}` conditionals |
| **QR Code** | Data (URL or text, supports variables), size 80-300px, alignment |

**Layout**

| Block | Settings |
| --- | --- |
| **Image + Text** | Image position (left/right), image width 20-70%, vertical alignment, gap, background color, plus image / text / button sub-components |
| **Two Columns** | Column split (50/50, 33/67, 67/33, 40/60, 60/40), gap 0-40, vertical alignment, padding, and separate left and right column contents |

> [!NOTE]
> Inside a **Two Columns** block you can only place Text, Heading, Image, Button, Divider and Spacing. Attachments and nested layout blocks are not allowed there.

> [!NOTE]
> The **QR Code** block embeds the image inline in the message. That works on SMTP, Microsoft 365 and Google senders.

### Branding

The **Branding** tab applies to the whole layout:

- **Colors** - primary, secondary, text, body background, content background
- **Typography** - heading font, body font, line height
- **Layout** - max width, container padding, block padding, block spacing

The font dropdown offers system fonts (Arial, Georgia, Verdana, Times New Roman, Helvetica, Trebuchet MS), a set of Google fonts (Inter, Roboto, Open Sans, Lato, Montserrat, Poppins, Nunito, Raleway, Playfair Display, Merriweather, Source Sans 3, Oswald, Work Sans, DM Sans, Space Grotesk), and any custom font you uploaded under **Settings**.

### Header and footer

The header and footer are clickable regions at the top and bottom of the canvas. Each can use a **saved preset** so a change to your branding updates every layout at once, or **Custom (this layout only)** for a one-off. See [Header and footer presets](https://crm-tool.k8s-gcp-dev.eu.codecreationlabs.cloud/h/flow-transactional-email/header-and-footer-presets.md).

## Rich text / HTML mode

In this mode the body is a single editor with a **Rich text** / **HTML** toggle and a separate **Preview** toggle.

- **Rich text** gives you a familiar formatting toolbar.
- **HTML** gives you a raw textarea - paste a fully designed email if you already have one.
- **Insert image** adds a hosted image, either from your media library or from a link.

> [!WARNING]
> Switching from **HTML** back to **Rich text** can simplify tables, `div` layouts and inline styles. The app asks you to confirm first. Switching is blocked while you have unsaved changes.

The preview is read-only and shows Liquid tags as-is. To see real values, send a test email.

## Preview with test variables

The **Test Variables** tab lists every `{{ variables.x }}` the app detected in your subject and body, so you can fill in sample values and see the design render properly. These values are for preview only - the real ones come from the Shopify Flow action.

![Testing the layout with sample variables](https://cdn-dev.eu.codecreationlabs.cloud/crm-tool/uploads/SjJ78gKLnLlocopCui3Cs62dJbGZ7F1n/65508e3755c10b28.png)

To feed an array into a **Loop** block, enter it as a JSON array in this tab.

## Send a test email

Use **Send test email** on the layout editor. It renders the layout for real and sends it through a sender you pick, with the subject prefixed `[TEST]`. This is the only way to confirm your Liquid actually resolves, since the on-page preview does not evaluate it.

## Reuse a design

- **More → Save as template** stores the design so you can start from it again. Saved designs live under **My templates**.
- **More → Duplicate** copies the layout in place.
- **More → Export** downloads it, and **Import** on the list page accepts a `.zip` or `.json` previously exported from the app - handy for moving a design between stores.

## Deleting a layout

If a layout is used by a Shopify Flow step, it carries a **Used in Flow** badge and the delete action is hidden. Update the Flow actions that reference it first. This is deliberate - deleting it out from under a live workflow would break sends silently.

## Related

- [Variables and Liquid](https://crm-tool.k8s-gcp-dev.eu.codecreationlabs.cloud/h/flow-transactional-email/variables-and-liquid.md) - the full variable reference.
- [Attachments and images](https://crm-tool.k8s-gcp-dev.eu.codecreationlabs.cloud/h/flow-transactional-email/attachments-and-images.md) - files, images and size limits.
- [Header and footer presets](https://crm-tool.k8s-gcp-dev.eu.codecreationlabs.cloud/h/flow-transactional-email/header-and-footer-presets.md) - reusable branding.