Customizing Emails with the Email Editor

See it in action in our video tutorial:

How it works

The editor is made up of a hierarchy of elements, each with its customization options. The elements include:

1. Stripes - The top-level element in the hierarchy. There are four types of stripes: header, content, footer, and info area. Each stripe can include multiple Structures.

2. Structures - A Structure can include up to eight Containers, organized horizontally within the Structure.

3. Containers - A Container includes Blocks of content, organized diagonally within the Structure.

4. Blocks - A Block contains content, such as text, images, social media links, and products from your store.

The editor menu is divided into two sections:

• Appearance - Here you can manage settings and formatting across Stripes and Structures. When you update the settings, they will apply to newly added Structures and Stripes. The settings can be overridden in each of the lower-level elements, in the Content section.

• Content - From the Content section, you can add Structures and Blocks to the email, and customize each of the elements in the email.

Watch the video tutorial.

Editing and customizing the email

You can design an email from scratch, or start by editing a template. You can then save your updated design in the specific campaign, or save your edits as a new template.

Learn more about templates

To edit your email or template:

1. To edit and design email content: Open a draft campaign, and click Edit content under Email Content or while hovering over the preview. To edit a template: Go to Email Templates, and choose a new or existing template.

2. Open the Appearance tab to define and apply settings.
   

   • General Settings - Set up the main structure of the email, including the email’s width and padding, as well as fonts and colors that will apply to the whole message.

   • Stripes - Customize Stripe attributes, including font size and color, and more. When you update the settings, they will apply to Stripes added thereafter.

   • Headings - Customize heading attributes, including font type and size for the different heading levels.

   • Button - Customize button attributes, including color, font, and padding.
     Please note:
     For buttons in the mobile layout, we recommend using the same alignment settings for all buttons, and setting padding to zero.
     

   • Mobile Formatting - We recommend testing your emails in mobile, and making necessary adjustments so that your emails look good both on desktop and on mobile screens. You can modify a number of attributes just for mobile.

3. To add a Stripe, select an existing Stripe and click the + icon to add a Stripe with the number of Structures that you need inside.

4. To add Structures to the Stripe, open the Content tab, and expand the Structures section. Select a Structure with the required number of containers, and drag it into the email where needed.
   Hover over the Structure to move, copy, or remove it.
   

5. With the Structure selected, you can modify its attributes, such as background color and padding. You can also add more containers to your structure, and resize them as needed.

6. Expand the Blocks section. Drag and drop the Block (Image, Text, etc.) into a Container. Hover over the Block to move, copy, or remove it.

7. Click on a Block to edit its content. Depending on the Block type, you will see different attributes that you can customize. See more in Block types.

8. After you add and customize Blocks:

   • For a campaign, click Save or Save & close editor. You can also click Templates > Save as template to save the email as a new template. Learn more about templates

   • For a template, click Save template.

Block types

Blocks allow you to add content to your email. Depending on the type of Block, you can customize the content design and behavior.Some of the more commonly used Blocks are described below.

• Image - After you drag a new Image Block, click it to add images.
  

  Tip:

  To make sure your image appears correctly, follow these recommendations:

  • Supported formats: JPEG, GIF, PNG

  • Maximum size image: 3 MB

  • Maximum resolution: 4,000 × 4,000 px

  

  After adding an image, define its attributes such as alignment, size, etc. To edit the image, click the edit icon to open an editor that includes options, such as filters, drawing tools, and text overlay.

• Text - After you type in your text, you can use the Block attributes (on the left) to customize the text color, alignment, etc. In addition, another text toolbar appears.

Using the available tools, you can locally format the text, add emojis and links, and insert Merge tags. Merge tags are great for adding personalized and dynamic content, such as the user’s first name or address, the store address, etc. Learn more about Merge tags

• Products - Use the Product Block to add products from your Shopify store. Click on the Block to select and add products.

• Dynamic Products - Add products used in flows. For example, if you use the abandoned cart as a trigger, the abandoned products will appear.

• Canva - Create images using Canva. After you drag the Canva block to your email, you must log in or create an account to start designing in Canva.
  Select a design type, such as Email Header or Photo Collage. Now you can create or edit a design. When done with your image, click Publish in the Canva editor to add it to your email.
  In the block attributes, you can adjust image properties, such as size, background color, padding, etc.