Drag & Drop Editor

How does it work?

  • After opening your newsletter in you will see that your newsletter consists of several sections which can be edited individually according to your needs. You can insert images, links, text and much more.
  • Please find more information about editing your content in following sections:
    • Content
    • Structure
    • Body


  • While working with content section you can use these features below
  • For using them simply drag one inside a column, it will auto-adjust to the column width
  • You can edit every newsletter’s block separately


  • Drag this icon to a structure’s section and start typing
  • You can also change the font, size and much more directly in a newsletter
  • On the right side you can change also colours, line highs and proposition of text section

editor text

  • In case you want to customize a link mostly if you do no want to underline it, this can be found in the tab where you inserted URL
  • Link’s color can be changed in links settings

editor link


  • Drag image from the left to newsletter’s section where you want to place it
  • Then several options will show you on the right side
  • Here you can insert URL for image, write alternative text, align and more

editor image


  • Drag button icon to a section where you want to place it in newsletter
  • Then you can find on the right several option for editing color, text of button, aligning, spacing, adjusting borders and much more
  • Do not forget to insert a link where you want to navigate your customers with a button

editor button


  • Drag Divider icon directly where you want to place it
  • Again on the right side you can find different settings options such as colour, width, spacing, padding and more

editor devider


  • Drag Social icon from the right side to your newsletter and show let your customers find on social pages as well
  • On the right side you can find different settings options
    • Selection icon collection allows you to choose between different buttons designs
    • By using edit you can add URL link for icon
    • Wit Add new icon you can insert more social media icons depending on your needs and preferences

editor sicocial

Dynamic Content

  • Dynamic content includes tracking pixel which needs to be included in all your newsletters so we can see on which product you customer clicked
  • Drag this icon always un the bottom of a newsletter

editor-dynamic content


  • Adding HTML element to your newsletter enables you to insert your own codes

editor html button

Padding & Bording

  • While editing images or whole sections the editor gives you ability of control on padding and bording. Set either around a content element for all sides at once or individually for each side. This can be found in both – Content and Structure


Delete, move and copy buttons

  • These buttons are available for both – elements and whole newsletter’s sections


Image editing

Use different effect, crop a picture, add sticker or much more with Edit image function.

Edit image


Create discount label by using Sticker first and then Text.



You can also frame it or use many of other different features &nd effects for updating your images.





  • Here you can choose between different types of rows and columns. You can use from one to four columns
  • Select and use structure easily by dragging it to your newsletter’s template
  • For every column you can decide for different content – image or text
  • You can easily move, trash or copy whole sections
  • Every row has its own settings, which gives you flexibility in creation. You can for example choose one colour of entire row and different one for message area
  • Keep in mind that from the chosen structure depends also your products layout


  • While clicking on a specific structure there will appear different setting options on the right side such as background colour, padding and bording.

editor structure

Padding & Bording

  • While editing images or whole sections the editor gives you ability of control on padding and bording. Set either around a content element for all sides at once or individually for each side. This can be found in both – Content and Structure



  • This feature allows you to adjust whole content area width, its background and more
  • Always make sure that products will be shown appropriate after changing width by sending testing mail

editor bodyy

How to add products, price & description

Before you start adding products you need to choose Structure you want to use and Image elements. These elements depend on sort of campaign you are going to run.

It can look like this for example:

structure example

Then you drag image element for all 6 boxes (it can be more or less depending on your structure choice).

images example


Since products shown in staticRecommender are static you can add them directly to a template by inserting their URL (link from your e-sop) or upload picture from media library. How can you upload them to media library?

  • Click on “Browse” button
  • Browse
  • Now you can choose between Adding new file or Importing file from your PC
  • add,import
  • In case you use Add new file you can upload images directly from your PC or laptop.


  • If you choose the second option – Import file, you can import file directly from web by using URL link
  • Import files


Price & description

Adding price and description is very simple. The only thing you need to do is to insert under your products images text elements and then add right tags. For example:


Template placeholders

In your image library you can find the Template_placeholders file or in this list. Here are place all placeholders which are needed while creating Standard recommender e-mails or triggers.

The templates are replacing product images in your templates. The main reason of their usage is that products in these mails are personalized and so different products are generated for different audience group (depends on your filter settings).



Here you can see all placeholders for different types of campaigns. So you choose from the file based on newsletter type you are creating.



  • Standard recommender (personalised products) may includes up to 10 recommended products based on personalization.
  • Triggers have specific personalised engines.

Then you choose the “image” based on structure you are using (if you are using structure with 2 columns, 1 column, 3 or 4 columns and so). Product images are then automatically resized in order they fit into the template.




Price & description

Adding price and description for personalized emails is very simple. The only thing you need to do is to insert under your products images text elements and then add right tags according to defined placeholders. For example:


Other attributes

You can easily insert custom customer parameters, discount coupons and other dynamic content into text area in a template by clicking on Merge tags


and select an attribute. The placeholder for the attribute will be automatically inserted into the template. Not supported characters in the attribute’s name such as space or “_” will be encoded, the value of the attribute will remain the same as in data source.

If there is no data for the customer in the selected attribute, Yottly will not generate anything into the template.



You want to insert the actual credit value of a customer (the parameter is called “Bonus klub body”). Click on Merge tags and find this value:insert_custom1

Appropriate dynamic placeholder for this attribute is automatically inserted into the text:


If you want to show specific message only in case existing value of the attribute for each customer, you need to apply “IF” statement using # and / before and after the placeholder, respectively.



Save, preview, testing mail

Saving your template is important part of process. Since a template is not saved automatically during whole creation. You always need to press for saving Save button place in the right corner.

editor save

After cilcking on save you will se a tab which confirms you that templaete (and all included components) are valid and you can press Save.

editor Save1

Then you can save chnages cintinuosly by clicking on Save. Thak you will see similar tab, please click againg on Save button.


You can also preview your template or send testing mail at the end. Both these options can be found in the left corner. How exactly testing e-mails work you can find here.

editor preview, test mail

Must-included elements

There is several elements which you always need to include in your newsletter. Otherwise the template would not work appropriately.

Mirror text

  • Always placed on the top
  • You can find it under “Merge tags”

editor mirror text

  • Needs to be placed right under the mirror text
  • You can find it under “Required fields”

editor external link

  • Insert unsubscribe link at the bottom before Dynamic Content

editor unsubscribe


Add Product function

Add product


This function of drag&drop editor will allow you to easily add products from your e-shop to the e-mail.


Insert the “Add product” placeholder


To the structure where you want to add the product you need to place the HTML element (if you want products in 3 columns you need to place the HTML elements three times in every column).



Into this element insert this code:

<a id="product****" class="X" href="http://yottly.com"><img src="https://via.placeholder.com/120x200.png?text=product****" style="max-width:100%; "alt="Yottly" /></a>


  • Where “****” you need to change to attribute 1 – 10. Every added product needs to have a different attribute.
  • X – select 1,2,3, or 4 according to the number of columns in your row


If you set it up right, in 3-column structure you should see these placeholders:


Add and adjust product visualisation


Then you can begin with adding the products:


  • Choose “Add product” from main editor menu


  • Then choose which of the placeholder you want to edit


  • Choose product you want to add – you can decide if you want just products in stock or all and search by title of by ID


  • Afterwards in editor you are able to style the product visualisation fully:
    • Container: depending on width of the e-mail and number of columns you are using set up the size of the container (for 3 columns and width of the whole e-mail 750 pxls you set up width of the container to 250 pxls)
    • Image: You can set up size and a position of product image
    • Title, description, price, priceBefore, button: You are able to change colors, fonts, sizes, styles and a position of the elements, also if you click into the view on the text elements, you can rewrite it directly.


  • Every element can be hidden by the Show/Hide switch in the editor


  • Also a position can be altered by dragging chosen element if you select “Position absolute”.
  • When finished with styling the product visualisation you can save the settings as a template by “Save as template” button. Also already saved templates can be edited (Load template in Templates tab) and saved again by “Save” button.
  • Already prepared templates you can find in Templates tab and load those for chosen product.


  • To add prepared product visualisation into the e-mail use “Generate” button.


Default template

If you logged into Yottly for the first time, or you are just wondering how to create a new template and set it as default, well then you’ve come to the right place.


How to create new template

In the section Assets – Emails, click on the button +Add template.


Now you need to choose the type of the template you want to create.


As you can see, we prepared a few templates in each category.

Click on the Select button and the editor will open. Here you can edit and adjust the design and structure of your template, so it matches with the design of your e-shop.


Once you’re satisfied with the look of your new template, click on the Save or Save as new button in the top left corner. Then just name the new template, make sure, that the type is selected correctly and hit Save.


The new saved template can be seen in the list of templates.

If you want to set the template you just created as a default one, hit the sprocked on the right side. Then just choose the Set as default template option.

Updated on September 7, 2021

Was this article helpful?

Related Articles