Custom html template with dynamic product content

Hi ​@dennygoosensen 
Your WooCommerce product catalog must already be synced to Klaviyo. (Sounds like it is, great!)

Dynamic Product Recommendations, you want to use a personalized product per user and correct HTML Template with Klaviyo Tags.

Step-by-Step Setup

1) Loop Over a Catalog

You already have this line in your code:

{% catalog products limit:1 %}

That’s the correct way to loop through a catalog! But for personalization, you’ll want to use lookup, recommended_products, or other dynamic options but let’s keep it simple for now and use a universal block with a product recommendation tag that automatically adjusts per user.

2) Working Version for One Product (Use in Flows):

{% assign product = catalog.recommended_products[0] %}
{% if product %}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" valign="top">
      <table width="280" border="0" cellspacing="0" cellpadding="0" align="center" style="width: 280px;">
        <tr>
          <td align="left">
            <a href="{{ product.url }}" target="_blank">
              <img src="{{ product.image_url }}" width="280" alt="{{ product.title }}" style="display: block; font-family: Arial, sans-serif; font-size: 16px; color: #000000; font-weight: bold;">
            </a>
          </td>
        </tr>
        <tr>
          <td align="left" style="padding-top: 10px; font-family: Arial, sans-serif; font-size: 16px; line-height: 22px; color: #333333;">
            <a href="{{ product.url }}" target="_blank" style="text-decoration: none; color: #333333;">{{ product.title }}</a>
          </td>
        </tr>
        <tr>
          <td align="left" style="font-family: Arial, sans-serif; font-size: 16px; line-height: 22px; color: #00b4f0; padding-top: 5px;">
            {{ product.price | money }}
          </td>
        </tr>
        <tr>
          <td align="left" style="padding-top: 10px;">
            <table border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td bgcolor="#00b4f0" align="center" height="38" style="border-radius:4px; padding: 0 20px;">
                  <a href="{{ product.url }}" target="_blank" style="font-family: Arial, sans-serif; font-size: 14px; letter-spacing: 1px; font-weight: 600; color: #ffffff; text-decoration: none; display: inline-block; line-height: 38px;">Bekijk deal</a>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
{% endif %}

What This Does: catalog.recommended_products → automatically shows a personalized recommendation for each recipient.

    It displays:

        Image: product.image_url

        Title: product.title

        Price: product.price

        Button URL: product.url

3) How to Test It

    1) Go to Flows in Klaviyo.

    2) Insert your custom block into a flow email.

    3) Preview the email with a real user profile (with shopping/browsing history).

    4) Klaviyo will automatically choose a product per user.

Extra Tips: You can change products[0] to products[1], products[2], etc. for “next-next best product.”

Want to show multiple products? Use a loop:

{% for product in catalog.recommended_products limit:3 %}
   <!-- product block HTML here -->
{% endfor %}

Let me know if this works. 

Hi ​@dennygoosensen 

1. Confirm Catalog Sync and Product Data

Ensure your WooCommerce product catalog is syncing successfully with Klaviyo.

Check that the recommended products have valid values for:

1. image_url

2. title

3. price

4. url

If any of these fields are missing, the product block will not render.

2. Predictive Recommendations Eligibility

While you’ve chosen a customer with Predictive Analytics enabled, please ensure they also:

Have enough event data (browse/purchase history).

Aren’t excluded from product recommendations due to catalog rules (e.g. out of stock, unpublished).

3. Fallback Logic

If a recommendation doesn’t exist, the block won’t render. You can optionally add fallback content or logics like:

{% assign product = catalog.recommended_products[0] %}
{% if product %}
<!-- show recommended product block -->
{% else %}
<!-- optional fallback content -->
{% endif %}

4. Use Real Preview (Not Desktop Test Email)

When previewing the flow:

Use the "Preview and Test" feature with a real profile, not just the desktop test send.

You can also try sending a live email to yourself using a test profile with recent browsing/purchase activity to confirm.

Thanks for confirming that your WooCommerce catalog is synced.

When I mentioned "valid values", I meant making sure that each product in your catalog has actual, non-empty data for these fields:

1. image_url – a working image link

2. title – a product name

3. price – a numeric value

4. url – a valid product page link

If any of these fields are missing or blank for a product, Klaviyo’s product block might skip rendering that product.