Solved

Text block source changes after saving

  • 20 June 2022
  • 1 reply
  • 250 views

Badge +1

I have a custom text block I am trying to create. After I paste the following code into the block within the “source” input, and save the content, the source code gets completely change to the point where the block no longer functions. It seems as if Klaviyo is attempting to format my code on save but messes it up in the process.

I am fairly new to Klaviyo so I’m hoping I have simply made a rookie error here. I have pasted the altered code at the bottom. Feed name + content has been altered for data-protection sake.

 
<table cellpadding=0 cellspacing=0 background="#ffffff" style="background-color:#ffffff;width:100%" width="100%">
<tbody>
{% for lineItem in event.extra.line_items %}
{% with productSKU=lineItem.product.sku %}
{% for item in feeds.testFeed.items %}
{% if productSKU == item.product_sku %}
<tr>
<td style="padding-bottom:15px;">
<div style='background-color:#fff;border-radius:6px;border-bottom:1px solid #e1e2e4;padding:10px 15px 20px;'>
<p style="font-size:14px; margin:0;">
Test
</p>
<p style="font-size:14px; margin:0;font-style:italic">
Test
</p>
<p style="font-size:14px;margin:0;">
<span style="font-size:18px; color:#f47e27; letter-spacing:2px;" color="#f47e27">
Test
</span>
<b>
Test
</b>
</p>
<p style="font-size:12px;text-align:right;color:#ccc; margin:0;">
{{item.date}}
</p>
</div>
</td>
</tr>
{% endif %}
{% endfor %}
{% endwith %}
{% endfor %}
</tbody>
</table>

As you can see, the table and table body element has been repositioned within the initial for and with section

{% for lineItem in event.extra.line_items %}{% with productSKU=lineItem.product.sku %}
<table background="#ffffff" cellpadding="0" cellspacing="0" style="background-color:#ffffff;width:100%" width="100%">
<tbody>{% for item in feeds.testFeed.items %}{% if productSKU == review.product_sku %}
<tr>
<td style="padding-bottom:15px;">
<div style="background-color:#fff;border-radius:6px;border-bottom:1px solid #e1e2e4;padding:10px 15px 20px;">
<p style="font-size:14px; margin:0;">Test</p>

<p style="font-size:14px; margin:0;font-style:italic">Test</p>

<p style="font-size:14px;margin:0;"><span color="#f47e27" style="font-size:18px; color:#f47e27; letter-spacing:2px;"> Test </span> <b>Test</b></p>

<p style="font-size:12px;text-align:right;color:#ccc; margin:0;">{{item.date}}</p>
</div>
</td>
</tr>
{% endif %}{% endfor %}
</tbody>
</table>
{% endwith %} {% endfor %}

 

icon

Best answer by David To 21 June 2022, 20:03

View original

1 reply

Userlevel 7
Badge +60

Hello @jrich01,

Welcome to the Klaviyo Community!

Instead of trying to implement this custom block via the source code of a text block through the drag-and-drop editor, I would instead suggest using an HTML template and code in your desired block from scratch. Depending on what it is you were custom coding, it’s not surprising to see aspects of it stripped and/or formatted when applied through a text block within the drag-and-drop editor. Similar to how inbox providers will strip out embedded code, our editor will reflect this so you aren’t accidentally sending out these emails which could negative impact your sender reputation. 

This is similar to a previous Community post I commented on which I’ve included below. I also think taking a look at our How to Embed Assets Directly in an Email Help Center article would prove helpful as well!

I hope this helps!

David

Reply