Hey ​@mariotapia nice sharing this ...

What's happening is your items are stacked because the layout you are using is block based. To fix it use a 2 column layout in klaviyo if you are using the drag drop builder. Just drop your product (image and text) into each column for more two, just duplicate the section. If you are using HTML, a basic table will do the trick: 

<table>

  <tr>

    <td align="center">

      <img src="IMAGE_URL_1" style="width:150px;" /><br/>

      <a href="#">Playful Posies Cover</a><br/>

      <strong>$145.00</strong>

    </td>

    <td align="center">

      <img src="IMAGE_URL_2" style="width:150px;" /><br/>

      <a href="#">Waterproof Bamboo Jersey Cover</a><br/>

      <strong>$95.00</strong>

    </td>

  </tr>

</table>

This keeps everything side by side with the image on the top and text below.

Hi ​@mariotapia -

This is a great question (and idea)!

I actually don’t think this is currently possible because the dynamic nature of the loop in Klaviyo I believe is based on the row, not the column. So, even if you code a table with two columns, when you apply the dynamic language to the table, it will continue to loop the products by row. 

I tried setting this up myself, and each column showed the same product, and each row showed a different product. I wasn’t able to get one product per column. 

But, I’d like to toss this out to a few other Klaviyo Champions, especially the more technical ones, to see if they have a solution here. ​@DavidV ​@Omar ​@StefanUE ​@retention ​@ebusiness pros 

Best,

​@In the Inbox 

Hey, thanks for the tap in!

​@mariotapia why don’t you try using this in an HTML block instead of the Klaviyo default checkout block, and let me know if that worked (you can adjust the styling any way you need to):
 

<div style="display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;">

{% for item in event.extra.line_items %}

  <div style="display: inline-block; width: 200px; vertical-align: top; text-align: left; border: 1px solid #ddd; padding: 10px;">
    
    <img src="{% if item.product.variant.images.0.src %}{{item.product.variant.images.0.src}}{% else %}{{item.product.images.0.src|missing_product_image}}{% endif %}" width="180" style="display: block; margin: 0 auto 10px;" />

    <strong>{{ item.product.title }}</strong><br/>
    Quantity: {{ item.quantity|floatformat:0 }}<br/>
    Total: {% currency_format item.line_price|floatformat:2 %}

  </div>

{% endfor %}

</div>