Adding drag/drop capability into a HTML template

In the classic editor, you can add drag/drop capability into an HTML template. This means, you can import in an HTML template, add the code below to the template’s code, and then in that specific spot you added the code, a drag/drop block can be added.

The drag/drop capability is only enabled where the code was added within the template - the whole template does not become drag/drop - that is not possible.

Order of steps written out:

1. Import in HTML template, or select edit on existing HTML template
2. Paste the following code, wherever you want the product block (or any other drag/drop block) to be:

   <tr>
       <td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
   <div class="klaviyo-block klaviyo-text-block">
   <p>text/drag drop block here</p>
   </div>
   </td>
   </tr>

    

3. Create campaign using the HTML template
4. Drag/drop in the product block where the HTML was added, it will say ‘text/drag drop block here’
5. Done!

It is up to your team to know where in the HTML the ‘HTML capability’ table should be added, not Klaviyo Support. 

The Knowledge base article mentioned in the video can be found here.

As always, custom code questions should be directed to your team’s developer or email designer, not Klaviyo Support. 

At present, the ability to add drag/drop capability into an HTML template is restricted to our classic editor, but rest assured that our Product Team is exploring a similar feature for our new editor.

Additional Resources:

• Import a Custom HTML Template with Drag and Drop Support

• Edit the Plain Text Version of an HTML Email