Using drag and drop editor

Learn how to use the drag and drop email editor in Retainful

Customizing your email templates has never been so easy. With Retainful, you can easily drag and drop the desired elements onto the template body of your emails.

This article illustrates how you can customize email templates using Retainful.

Customizing email templates

  1. Navigate to Retainful dashboard → Automations → Edit Flow → Find the Email block and click on 'Edit Email Content' button on the right side.

If you are looking to edit your Referral email notifications, go to Retainful dashboard → Referrals -> Referral Email Notifications and edit the email notification you want to customize.

Editing Email Template

2. You’ll be redirected to the 'Drag and drop' editor, where you can customize the email template.

Adding store logo in the email template

You can just click on the logo block in the email template and upload your logo from the Retainful image library or from your computer.

Check out this guide to learn more about adding your store logo to the email templates.

If the email template doesn't have a logo block, you can add the logo block manually from 'Blocks' section.

Adding a new block

In the email template editor, the tools for customization are available in the far left corner as follows:

Drag and drop email editor

1. Section

In this part, you can find tools that allow you to add segments to your email template, for example, if you wish to divide the template layout into 2 or 3 columns, you could drag and drop blocks from this section.

Select Section

Layout:

This is how the template layout can be segmented with the use of tools in the section tab.

Adding Content Blocks in Email Template

Text:

This is how you can able to add the text block and edit the content, you can also choose any of the options from the text block to style your template.

Adding text block

2. Content

This section helps you add new text blocks, buttons, images, dividers, and so on.

Pro-tip

  1. A clear CTA encourages users to complete the abandoned purchase or make a repeat purchase. If you are looking to add call-to-action buttons to your cart recovery emails or post-purchase emails, you could do so by using the button block.

  2. Some customers might have abandoned their cart because they had questions and didn't know where to get them answered. Why not make use of the abandoned cart recovery emails to do that? Use the Text block to answer FAQs.

Content

Using these you can add text blocks, CTA buttons, images, and social media icons to the email templates.

3. Store Content

In the store elements section, you can find blocks that are related to the store.

Store Content

Order Summary: This can be used to display the items that are in the customer's cart.

Coupon: When you use this block in your email, you can able to send a coupon to your customers.

Logo: This block allows you to add your store logo to the email template. Click here to learn about adding your store logo in email templates in Retainful.

You could also customize and add styles to the individual sections of the email template. Let us learn more about this in the next section.

  • Style Manager:

This allows you to adjust position and style settings to suit their preferences, enhancing the visual appeal of the email template.

Style settings
  • Global Styles:

Global Styles allow you to maintain a consistent look and feel across all your pop-ups.

Global Styles
  1. Text Setting:

You can set global font styles that apply to all text elements. This includes font family, size, weight, line height, letter spacing, and color.

  1. Button Setting:

You can define a global style for all buttons. This includes the button color, hover color, text color, border radius, and padding. You can also set a global hover effect for your buttons.

  1. Divider Setting:

The divider setting allows you to set a global style for all divider lines. This includes the line type (solid, dashed, dotted), thickness, color, and alignment.

Checking responsiveness across devices

Around 61% percent of your store users are checking your emails on mobile devices. This becomes all the more reason to optimize your emails for mobile devices.

You could check if the email templates are responsive by making use of the icons at the left corner of the email template editor.

Device based preview

Testing email design

Once you have completed editing the email template, you can test the email.

With an email customized, return to the top of the email editor and click the ‘Send Test Email’ button to make sure all of the content displays as expected in your inbox.

Sending test mail

NOTE: Test emails are used to provide a visualization of how the email template would look when sent to customers.

The test email uses dummy data. The links or buttons available on the test emails would not work.

Last updated