Liquid syntax on Klaviyo

Hello, 

with an AI help I am trying to build liquid logic to achieve below scenario. 

I want to create custom product block on Klaviyo which would show personalized recommendations. For example, if customer bought product X, I want to recommend product Y. Since customer can have multiple products in a single order, I cannot use snippet like “event.extra.line_items.0.product.title”as it only considers the first order (and I am not sure whether my “product X” is the 1st, 2nd, 3rd etc. 

So far, I’ve tested this logic (see below) but when I preview the email, I keep seeing raw liquid code which tells me that HTML block that I used doesn’t accept my liquid code. 

I read some Klaviyo articles and it says that Klaviyo does support liquid logics, therefore, I am not sure what could be wrong with the code?

Any help/advice would be much appreciated!!


{% assign bought_trigger_product_1 = false %}
{% assign bought_trigger_product_2 = false %}

{% assign trigger_product_1_title_in_order = '' %}
{% assign trigger_product_2_title_in_order = '' %}

{% for item in event.extra.line_items %}
  {% if item.product.id == 'YOUR_TRIGGER_PRODUCT_1_ID' %} 
    {% assign bought_trigger_product_1 = true %}
    {% assign trigger_product_1_title_in_order = item.product.title %}
  {% elsif item.product.id == 'YOUR_TRIGGER_PRODUCT_2_ID' %} 
    {% assign bought_trigger_product_2 = true %}
    {% assign trigger_product_2_title_in_order = item.product.title %}
  {% endif %}
{% endfor %}

{% if bought_trigger_product_1 %}
  {% product 'YOUR_RECOMMENDED_PRODUCT_FOR_1_ID' as rec_product_for_1 %} 
  {% if rec_product_for_1 %}
    <div style="text-align: center; margin-bottom: 20px;">
      <a href="{{ rec_product_for_1.url }}" target="_blank">
        <img src="{{ rec_product_for_1.image }}" alt="{{ rec_product_for_1.title }}" style="max-width: 200px; height: auto; display: block; margin: 0 auto;">
      </a>
      <h4 style="margin-top: 10px; margin-bottom: 5px;">
        <a href="{{ rec_product_for_1.url }}" target="_blank" style="color: #333; text-decoration: none;">{{ rec_product_for_1.title }}</a>
      </h4>
      <p style="font-size: 16px; color: #666; margin-bottom: 15px;">{{ rec_product_for_1.price|currency }}</p>
      <a href="{{ rec_product_for_1.url }}" target="_blank" style="background-color: #007bff; color: #ffffff; padding: 10px 20px; text-decoration: none; border-radius: 5px; display: inline-block;">Shop Now</a>
    </div>
  {% endif %}

{% elsif bought_trigger_product_2 %}
  <h3>Since you got {{ trigger_product_2_title_in_order | default:'your recent purchase' }}, consider adding:</h3>
  {% product 'YOUR_RECOMMENDED_PRODUCT_FOR_2_ID' as rec_product_for_2 %} 
  {% if rec_product_for_2 %}
    <div style="text-align: center; margin-bottom: 20px;">
      <a href="{{ rec_product_for_2.url }}" target="_blank">
        <img src="{{ rec_product_for_2.image }}" alt="{{ rec_product_for_2.title }}" style="max-width: 200px; height: auto; display: block; margin: 0 auto;">
      </a>
      <h4 style="margin-top: 10px; margin-bottom: 5px;">
        <a href="{{ rec_product_for_2.url }}" target="_blank" style="color: #333; text-decoration: none;">{{ rec_product_for_2.title }}</a>
      </h4>
      <p style="font-size: 16px; color: #666; margin-bottom: 15px;">{{ rec_product_for_2.price|currency }}</p>
      <a href="{{ rec_product_for_2.url }}" target="_blank" style="background-color: #007bff; color: #ffffff; padding: 10px 20px; text-decoration: none; border-radius: 5px; display: inline-block;">View Product</a>
    </div>
  {% endif %}

{% else %}

  <h3>Explore more from our collection:</h3>
  <p>Here's one of our most popular items you might love:</p>
  {% product 'YOUR_DEFAULT_BESTSELLER_PRODUCT_ID' as bestseller_product %} 

  <div style="display: flex; justify-content: center; flex-wrap: wrap;">
    {% if bestseller_product %}
      <div style="width: 100%; max-width: 300px; text-align: center; margin-bottom: 20px;">
        <a href="{{ bestseller_product.url }}" target="_blank">
          <img src="{{ bestseller_product.image }}" alt="{{ bestseller_product.title }}" style="max-width: 250px; height: auto; display: block; margin: 0 auto;">
        </a>
        <h4 style="margin-top: 10px; margin-bottom: 5px;">
          <a href="{{ bestseller_product.url }}" target="_blank" style="color: #333; text-decoration: none;">{{ bestseller_product.title }}</a>
        </h4>
        <p style="font-size: 16px; color: #666; margin-bottom: 15px;">{{ bestseller_product.price|currency }}</p>
        <a href="{{ bestseller_product.url }}" target="_blank" style="background-color: #007bff; color: #ffffff; padding: 10px 20px; text-decoration: none; border-radius: 5px; display: inline-block;">Shop Bestseller</a>
      </div>
    {% endif %}
  </div>
{% endif %}