Product frame in Drag&Drop Email Designer

This email designer enables you to create responsive and professional email templates in an easy and fast way. Apart from personalizing the contents of the email with the data that comes from the contact card, you can include recently viewed products by a user or the products from the abandoned cart to increase your sales.

Benefits:

  • possibility to create dynamic emails
  • possibility to create emails with the products from abandoned carts

IMPORTANT: To add recently viewed products or products from the abandoned cart you need to add XML files to the system which contain the data about the products.

Sending such an email differs from sending ordinary emails. In the designer you have the possibility to create and save the templates of the message. Whereas you can send it by means of automation rules using actions: Send email with last viewed products and Send email after abandoned cart.

Go to EMAIL MARKETING => DRAG&DROP EMAIL DESIGNER => USE THE NEW EDITOR => GO TO EDIT


Main steps:

  1. Choose the layout and adjust general settings.
  2. Choose product fields.
  3. Adjust button settings.

Layout and general settings

Once you start your work in editing mode, choose Product frame (column) or Product frame (row) from the Widget tab according to your preferences about how you would like the products to be displayed in the frame. Choose the widget and drop it into the chosen space in the email.

[1] Layout – choose one of three available layouts in which the product will display in the frame.

[2] Maximum number of products in one element – use a slider to select the maximum number of products that will be displayed in the frame.

IMPORTANT: In the case of the email with the products from abandoned cart, if the number of products in the cart will exceed the maximum number of product in the element, then the message will be filled up to the maximum number of products in the element, e.g. if the cart contains 4 products and the maximum number of products in one element amounts to 3, it means that the email will include 3 products. If it comes to the email with recently viewed products, if the user viewed 2 products and the maximum amount of products amounts to 4, it means that the message will contain two additional products apart from those two that were viewed. Those extra two products will be chosen on the basis of category

[3] Number of products in one row – use a slider to adjust the maximum amount of products that will display in one row. If this number amounts to only one product, and if the maximum number of products in one element will be greater, the products will be moved below.

[4] Background color – choose a color from a color palette. To do so, you need to untick transparent checkbox first.


Product fields

You can choose information that you want to display about the product in this tab. By default, it is name, description, category, and price. If the XML file includes non-standard information about the product (e.g. discounted price or detail) you can add them by clicking on the chosen information. In the effect, this piece of information will appear in the text field.

In the text field you can freely edit the font, change its color and type, its size, you can change alignment, add bullets, etc. Additionally, you can include any amount of editable text which you can add before or after the units of information about the product. Example: You can add “Special for you” in front of the price. Then this text will appear next to the particular unit of information.

Discounted price – if an XML file includes information about the discounted price of the product and you add the element to the field, then the system will automatically detect the concurrence of regular and discounted price. In this case, the system will cross the regular price automatically.


Button

In this tab, you can customize the appearance of the button.

[1] Button text – type in the text you want to display on the button that redirects the user to the website of the product. You can freely edit the font, change its type and size, make it bold, set italics, underline it.

[2] – choose the font color on the button.

[3] – choose the background color of the button

[4] Width – adjust the width of the button measured in pixels or adjust it by means of arrows.

[5] Height – adjust the height of the button measured in pixels or adjust it by means of arrows.

[6] Align – adjust the adjustment of the button, center the button or set it either on right or left side.

[7] Border radius – choose the degree of the corner rounding of the button.

IMPORTANT: Because the link that redirects the user to the website of the product is automatically added to the button, you don’t need to add it by yourself in the tab.


Once you’re done, click Back to widgets to continue creating the email or click Save and send if the email is ready.

Below you can find an example of the sent email with the products: