Some additional context. We’re using Shopify but we bypass Shopify checkout using Carthook’s Legacy app, Carthook Checkout. Event tags are limited to the following:
SKU = {{ event.Items.0.SKU }}
Product Variant = {{ event.Items.0.Variant }}
Product Title = {{ event.Items.0.Name }}
Cart Quantity = {{ event.Items.0.Quantity }}
Item Price = {{ event.Items.0.ItemPrice }}
Item X Quantity Print = {{ event.Items.0.RowTotal }}
Product URL = {{ event.Items.0.ProductURL }}
Image Src = {{ event.Items.0.ImageURL }}
Checkout URL = {{ event.CheckoutURL }}
Total Cart Value = {{ event|lookup:'$value' }}
Product Title = {{ event.ItemNames.0 }}
Hello @sleepingdog,
Thanks for sharing your question with the Klaviyo Community!
How are you previewing this email which you’ve imported back into Klaviyo? One thing to keep in mind is that since your template would be utilizing dynamic code, in order for the dynamic table block to render, it would need to be previewed in a metric triggered flow which aligns with these dynamic variables. In this case it sounds like it would need to be previewed within a flow triggered by your CartHook Started Checkout event.
Also, because you are using a custom event for the CartHook Started Checkout event, I would double check to make sure the dynamic variables you are using align with the variables being shared from the event. Some helpful articles I would suggest taking a look at are:
In addition, Klaviyo only recommends using custom HTML for technically savvy marketers, or for anyone who has access to a developer or email designer. While Klaviyo does support custom HTML, our support team cannot help you build out or troubleshoot your custom templates beyond offering the general guidance. Since you are building your template via HTML, I would suggest working with your email designer or finding one from Klaviyo’s extensive network of agency partners to further assist you.
Thanks for being a Klaviyo Community member! Have a great day!
David
@david.to thanks for your reply.
How are you previewing this email which you’ve imported back into Klaviyo?
We are previewing in both directly in Klaviyo and sent to gmail testing inbox.
One thing to keep in mind is that since your template would be utilizing dynamic code, in order for the dynamic table block to render, it would need to be previewed in a metric triggered flow which aligns with these dynamic variables. In this case it sounds like it would need to be previewed within a flow triggered by your CartHook Started Checkout event.
We are previewing in the exact flow with the exact metric trigger that is dynamically showing content in the original template built in Klaviyo. Essentially, it’s the same exactly snippet of code just one was built and kept inside of Klaviyo directly and one is using code exported from the same exact template and added to an HTML template and re-imported into the same flow.
Also, because you are using a custom event for the CartHook Started Checkout event, I would double check to make sure the dynamic variables you are using align with the variables being shared from the event. Some helpful articles I would suggest taking a look at are
We have, at least we think we have. None of Klaviyo’s documentation provides adequate solutions for HTML structure of dynamic blocks. That is simply all I am looking for is a sample example of what a dynamic block should look like to compare.
Here is the solution for anyone looking to build dynamic blocks in HTML.
Broken:
<table border="0" cellpadding="0" cellspacing="0" class="kmTableBlock kmTableMobile" style="border-collapse:collapse; mso-table-lspace:0; mso-table-rspace:0" width="100%">
<tbody class="kmTableBlockOuter">
<tr>
<td class="kmTableBlockInner" style="border-collapse:collapse; mso-table-lspace:0; mso-table-rspace:0; padding-top:9px; padding-bottom:9px; padding-left:0; padding-right:0" valign="top"> {% if event.Items %} {% for item in event.Items %} {% endfor %} <table align="left" border="0" cellpadding="0" cellspacing="0" class="kmTable" style="border-collapse:collapse; mso-table-lspace:0; mso-table-rspace:0" width="100%">
<thead>
<tr>
<th class="kmTextContent" style="color:#222; font-family:"Helvetica Neue", Arial; font-size:14px; letter-spacing:normal; line-height:130%; text-align:left; width:35%; padding-top:0; font-weight:bold; padding-right:0; padding-left:0; padding-bottom:0" valign="top"> </th>
<th class="kmTextContent" style="color:#222; font-family:"Helvetica Neue", Arial; font-size:14px; letter-spacing:normal; line-height:130%; text-align:left; width:65%; padding-top:0; font-weight:bold; padding-right:0; padding-left:0; padding-bottom:0" valign="top"> </th>
</tr>
</thead>
<tbody>
<tr class="kmTableRow">
<td class="kmTextContent" style="border-collapse:collapse; mso-table-lspace:0; mso-table-rspace:0; color:#222; font-family:"Helvetica Neue", Arial; font-size:14px; letter-spacing:normal; line-height:130%; text-align:left; width:35%; border-top-style:none; padding-bottom:4px; padding-right:10px; padding-left:10px; padding-top:4px; border-top-color:#d9d9d9; border-top-width:0" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0; mso-table-rspace:0" width="100%">
<tbody>
<tr>
<td class="kmImageContent" style="border-collapse:collapse; mso-table-lspace:0; mso-table-rspace:0; font-size:0; padding:0" valign="top"> <a href="{% if not 'Addon' in item.Name %}{% if not 'addon' in item.SKU %}{{ item.ProductURL }}{% endif %}{% endif %}" style="color:#2464FF; font-weight:normal; text-decoration:underline; word-wrap:break-word" target="_self"> <img align="right" alt="{% if not 'Add on' in item.Name %}{% if not 'addon' in item.SKU %} {{ item.Name }} {% endif %}{% endif %}" class="kmImage" src="{% if not 'Add on' in item.Name %} {% if not 'addon' in item.SKU %} {{ item.ImageURL|missing_image }} {% endif %} {% endif %}" style="border:0; height:auto; line-height:100%; outline:none; text-decoration:none; margin-left:0; font-size:12px; padding-bottom:0; vertical-align:top; display:inline; max-width:200px" width="200"> </a> </td>
</tr>
</tbody>
</table>
</td>
<td class="kmTextContent" style="border-collapse:collapse; mso-table-lspace:0; mso-table-rspace:0; color:#222; font-family:"Helvetica Neue", Arial; font-size:14px; letter-spacing:normal; line-height:130%; text-align:left; border-right:none; width:65%; border-top-style:none; padding-bottom:4px; padding-right:10px; padding-left:10px; padding-top:4px; border-top-color:#d9d9d9; border-top-width:0" valign="top"> {% if not 'Add on' in item.Name %}{% if not 'addon' in item.SKU %} <h3 style="display:block; font-family:"Helvetica Neue", Arial; font-size:24px; font-style:normal; font-weight:bold; letter-spacing:normal; line-height:110%; margin-bottom:12px; margin-left:0; margin-right:0; margin-top:0; text-align:left; color:#222"><a href="{{ item.ProductURL }}" style="color:#2464FF; font-weight:normal; text-decoration:underline; word-wrap:break-word">{{ item.Name }}</a></h3>
<p style="margin-bottom:0; margin-left:0; margin-right:0; margin-top:0; padding-bottom:0">Quantity: {{ item.Quantity|floatformat:0 }} — Total: ${{ item.ItemPrice|floatformat:2 }}</p> {% endif %}{% endif %}
</td>
</tr>
</tbody>
</table> {% else %} {% endif %} </td>
</tr>
</tbody>
</table>
Fixed
{% if event.Items %} {% for item in event.Items %}
<table align="left" border="0" cellpadding="0" cellspacing="0" class="kmTable" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;border-collapse:collapse;border-spacing:0px" width="100%">
<thead>
<tr style="border-collapse:collapse">
<th class="kmTextContent" style="color:#222;font-family:'Helvetica Neue', Arial;font-size:14px;letter-spacing:normal;line-height:18px;text-align:left;width:35%;padding-top:0;font-weight:bold;padding-right:0;padding-left:0;padding-bottom:0" valign="top"></th>
<th class="kmTextContent" style="color:#222;font-family:'Helvetica Neue', Arial;font-size:14px;letter-spacing:normal;line-height:18px;text-align:left;width:65%;padding-top:0;font-weight:bold;padding-right:0;padding-left:0;padding-bottom:0" valign="top"></th>
</tr>
</thead>
<tbody>
<tr class="kmTableRow" style="border-collapse:collapse">
<td class="kmTextContent" style="Margin:0;border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;color:#222;font-family:'Helvetica Neue', Arial;font-size:14px;letter-spacing:normal;line-height:18px;text-align:left;width:35%;border-top-style:none;padding-bottom:4px;padding-right:10px;padding-left:10px;padding-top:4px;border-top-color:#d9d9d9;border-top-width:0" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;border-collapse:collapse;border-spacing:0px" width="100%">
<tbody>
<tr style="border-collapse:collapse">
<td class="kmImageContent" style="padding:0;Margin:0;border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;font-size:0" valign="top"> <a href="{% if not 'Addon' in item.Name %}{% if not 'addon' in item.SKU %}{{ item.ProductURL }}{% endif %}{% endif %}" style="-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;text-decoration:underline;color:#2464FF;font-size:14px;font-weight:normal;word-wrap:break-word" target="_self">
<img align="right" alt="{% if not 'Add on' in item.Name %}{% if not 'addon' in item.SKU %} {{ item.Name }} {% endif %}{% endif %}" class="kmImage" src="{% if not 'Add on' in item.Name %} {% if not 'addon' in item.SKU %} {{ item.ImageURL|missing_image }} {% endif %} {% endif %}" style="display:inline;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;height:auto;line-height:12px;margin-left:0;font-size:12px;padding-bottom:0;vertical-align:top;max-width:200px" width="200"/></a>
</td>
</tr>
</tbody>
</table>
</td>
<td class="kmTextContent" style="Margin:0;border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;color:#222;font-family:'Helvetica Neue', Arial;font-size:14px;letter-spacing:normal;line-height:18px;text-align:left;border-right:none;width:65%;border-top-style:none;padding-bottom:4px;padding-right:10px;padding-left:10px;padding-top:4px;border-top-color:#d9d9d9;border-top-width:0" valign="top">
{% if not 'Add on' in item.Name %}
{% if not 'addon' in item.SKU %}
<h3 style="Margin:0;line-height:26px;mso-line-height-rule:exactly;font-family:'Helvetica Neue', Arial;font-size:24px;font-style:normal;font-weight:bold;color:#222;display:block;letter-spacing:normal;margin-bottom:12px;margin-left:0;margin-right:0;margin-top:0;text-align:left"> <a href="{{ item.ProductURL }}" style="-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;text-decoration:underline;color:#2464FF;font-size:20px;font-weight:normal;word-wrap:break-word">{{ item.Name }}</a>
</h3>
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:Montserrat, sans-serif;line-height:21px;color:#333333;font-size:14px;margin-bottom:0;margin-left:0;margin-right:0;margin-top:0;padding-bottom:0">
Quantity: {{ item.Quantity|floatformat:0 }} — Total: ${{ item.ItemPrice|floatformat:2 }}
</p> {% endif %}
{% endif %}
</td>
</tr>
</tbody>
</table> {% endfor %}
{% endif %}
Just replace my event variables and style.
Hello @sleepingdog,
Happy to hear you were able to properly code a dynamic table block using HTML! Also, really appreciate you sharing your answer with the rest of the Klaviyo Community! I’m sure this will be helpful to other members who may be having the same issue you’ve had.
Thanks for being a part of the Klaviyo Community! Have a great day!
David
