You can build more complex product layouts in your cart layout by creating multiple rows and columns. Fresh Relevance supports several approaches, including manual Jinja loop logic and the Jinja batch filter, which automatically groups products into rows. Use these methods to create grid‑based layouts or to customise the structure of your cart abandonment emails.
There are several ways to create a layout with multiple rows and columns.
Add the code manually
You can manually add rows and columns to your cart layout by editing your layout code.
Go to Content > Cart Layout.
Create a new cart layout or edit an existing one.
Add a value for the number of columns at the top of your layout template:
{% set num_cols = 3 %}Modify the For loop by adding the following just before the final statement:
{% if loop.index%num_cols == 0 and loop.index != products|length %}
</tr>
<tr>
{% endif %}Select Save.
Example
Your code should look like this:
{% set num_cols = 3 %}
<table>
<tr>
{% for product in products %}
<td>
(Product details here, or in multiple table cells)
</td>
{% if loop.index%num_cols == 0 and loop.index != products|length %}
</tr>
<tr>
{% endif %}
{% endfor %}
</tr>
</table>
Use the Jinja Batch filter
The Jinja batch filter groups products into evenly sized rows, which can simplify multi‑column layouts.
Learn more with Jinja’s documentation.
Steps
Go to Content > Cart Layout.
Create a new cart layout or edit an existing one.
Use the Jinja batch filter to create grouped rows, as shown in the example below.
Copy and paste the code into the Edit Cart Layout field.
Select Save.
Example
{% set max_products_to_show = 10 %}
{% set cols = 2 %}
{# set cols to the number of columns you want #}
{% if products|length > 0 %}
<table style="border-collapse: collapse; color: #444;" cellpadding="5">
{% for prod_row in products|limit(max_products_to_show)|batch(cols) %}
<tr>
{% for product in prod_row %}
<td><a href="{{ product.u }}"><img border="0" src="{{ product.img }}" width="100"/></a><br>
{{ product.n }}</td>
{% endfor %}
</tr>
{% endfor %}
</table>
{% endif %}