Support Center

Learn how to edit your email's body

This guide will show you how to use the new visual email editor which will allow users to edit their emails without any coding experience.

Email Editor Interface

This is what you will see when opening the email editor. On the top left of the editor you will see the toolbar and on the top right you will see the hierarchy of the component that is selected. In its default state, the editor selects the highest element: the body.

Email Editor Interface

The main features enabled on the toolbar in this default state are the following (from left to right):

Email Editor Toolbar

These options will vary according to the element that you may select. For example, if you select a button, the options available will adapt to the features you can change in a button such as: Background color, text color, borders, settings and dynamic variables (options from left to right).

Notice how the hierarchy is updated using breadcrumbs in the top right corner. You can select any element from the hierarchy by clicking them in the breadcrumbs and edit them as you wish.

Email Editor - Edit Element

To add new elements you click the plus button on the left of the toolbar. This button will appear when you have selected any element in the editor (apart from the Body) and will show you this list of the available blocks you can add. The block you choose will be inserted below the element you had previously selected.

Email Editor - Add block

When you select an element three options will also appear next to it (from top to bottom):

  • Delete element
  • Duplicate element
  • Edit Source Code of the element

Email Editor - Select element

To add links first select a text element. In the toolbar you will see the icon selected in the image:

Email Editor - Add Link

After clicking the icon, fill the fields with the url you want to link with the selected text:

Email Editor - Edit Link

Add Images

To add images, first add any block that contains an image:

Email Editor - Add Image

Select the element and then click on the image icon on the toolbar. Here you can add an image either by entering an url or by uploading from your computer:

Email Editor - Edit Image

Blocked Content

In some templates you will have blocks that are uneditable, such as this one:

Email Editor - Blocked Content

The image in the editor is merely a placeholder for its actual content (which can be seen in the preview).

This block can still be selected, however you can only edit its source code. This can either be done by selecting the source code option in the element itself, or by editing the whole template source code using the option in the toolbar.

Email Editor - Edit Source

Dynamic Variables

You can also add dynamic variables to your email. These are variables that will have different values in different stores and even different templates. You can add them by clicking on the selected symbol:

Email Editor - Dynamic Variable

Here you will have a list of the many dynamic variables you can add:

Email Editor - Variables List

Once you add them they will have a very specific syntax. In order for them to work correctly you cannot change this syntax, or they will not assume the desired value when previewing the email.


The text that is present in the templates and any text you add (that is saved) can also be translated.

Email Editor - Untranslated Text

In order to do so, you have to go to Languages in the left menu:

Email Editor - Language Side Menu

Here you choose the Language which you want to translate you template:

Email Editor - Languages Menu

Then, to find more easily the text you wish to translate, select Emails and then Untranslated:

Email Editor - Untranslated Strings

If you go back to your template and change the language on the url (in this case from en to pt), the translation will be available:

Email Editor - Translated Text

Start your journey with us!

Free trial for 14 days. No credit card required.