Does anyone know how to display items side by side (image on top, text below) when there are multiple items, instead of having them stacked vertically? Currently, they only appear one on top of another. I’ve attached an image for reference
Solved
Abandoned Cart Vertical display, how to not stack items?
Best answer by StefanUE
Hey, thanks for the tap in!
<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>
+19Hey
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.
+31Hi
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.
Best,
+20Hey, thanks for the tap in!
<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>
Log in to the Community
Use your Klaviyo credentials
Log in with Klaviyo
Use your Klaviyo credentials
Log in with KlaviyoEnter your E-mail address. We'll send you an e-mail with instructions to reset your password.