HomeAssetsDrag & Drop designerAdd Product function

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.


Was this article helpful to you? Yes No