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.

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 right corner as follows:

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.

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

2. Elements

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.

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.

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.

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.

  • Typography block - Here you can customize the font style, size, weight, letter spacing, color, line height, text decorations, and alignment of the text blocks.

  • 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.

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.

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.

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