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. 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
Drag and drop email editor

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 right corner as follows:
Blocks to Choose
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.
Sections
This is how the template layout can be segmented with the use of tools in the section tab
Adding Content Blocks in Email Template
2. Elements
This section helps you add new text blocks, buttons, images, dividers, and so on.
Pro-tip
  1. 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. 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.
Elements
Using these you can add text blocks, CTA buttons, images, and social media icons to the email templates.
3. Store Element
In the store elements section, you can find blocks that are related to the store.
Store Elements
Cart items / Order summary: This can be used to display the items that are in the customer's cart.
Address: With this block, the billing and shipping address, billing method, and shipping method of the order would be fetched and displayed.
Coupon: When you use this block in your email, you can able to send a coupon to your customers.
Unsubscribe: All emails should have an unsubscribe link to allow customers to unsubscribe from receiving emails from Retainful.
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.

Editing individual blocks of the email

If you wish to apply styles like changing the color, font size, and dimensions of a particular section, that can be done by ‘clicking’ on that particular segment.
When you click on a particular segment, a blue rectangle appears around the element or block.
And the options to customize the layout appear in the right corner under the 'Styles' section.
Customizing Email Elements
Settings block - This part offers options corresponding to the block that has been chosen.
For example, if you click on a button block, then in the settings tab, you can specify the URL to which the user should be redirected to while clicking on the button.
  • Dimension block -In this section, you can modify the padding and height of the selected block.
Customizing Dimension of Blocks
  • Typography block - Here you can customize the font style, size, weight, letter spacing, color, line height, text decorations, and alignment of the text blocks.
Typography
  • Decorations block - Keep your product in mind while designing your emails. Highlight when necessary using the ideal background color.
This section would allow you to add other CSS styles to the selected element.
Backgorund Customizations
This is how you can customize individual blocks in your email template.

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.
Testing Email
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.
Copy link
On this page
Customizing email templates
Adding store logo in the email template
Adding a new block
Editing individual blocks of the email
Checking responsiveness across devices
Testing email design