Skip to main content
All CollectionsContentCart layout
Create a cart layout with multiple rows and columns
Create a cart layout with multiple rows and columns

Learn how to create a cart layout with multiple rows and columns.

Updated over 6 months ago

There are several ways to create a layout with multiple rows and columns.


Manually add the code

You can rows and columns to your cart layout by editing your layout’s code:

  1. Go to Content > Cart Layout.

  2. Create a new cart layout or edit an existing one.

  3. Insert the following code into the Edit the Cart Layout textbox:

    Add a value for the number of columns you want in your layout at the top.

    {% set num_cols = 3 %}
  4. 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 %}
  5. 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>

Jinja Batch filter

Another way to do this is to use Jinja's Batch filter, which can create code like this:

Learn more with Jinja’s documentation.


{% 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 %}
  1. Go to Content > Cart Layout.

  2. Create a new cart layout or edit and existing one.

  3. Use Jinja Batch filter to create the appropriate code.

    As in the example above.

  4. Copy and paste the code into the Edit the Cart Layout textbox.

  5. Select Save.

Did this answer your question?