Prestashop: change to 2 columns product listing for bootstrap theme in mobile

Additional issue: because it is now 2 columns, and the original one column layout, height is not fixed, sometimes some products require more height, while some are shorter. When split side by side, this causes the grid to be broken if the combo is a tall and short product height.

Fix: change the min-height in theme’s product-list.css to a value that fits the layout.
(Product list(Grid) Styles) for @media (min-width: 480px) and (max-width: 767px)
ul.product_list.grid > li .product-container
In this case, min-height: 460px;


This is what I did and it worked for me.

In your product-list.tpl file there should be a line like this:

<li class=”ajax_block_product{if $page_name == ‘index’ || $page_name == ‘product’} col-xs-12 col-sm-4 col-md-3{else} col-xs-12 col-sm-6 col-md-3{/if}

for me it was line 49.

change the col-xs-12 to col-xs-6 instead and it should show up in two columns.

This entry was posted in ecommerce, templates and tagged . Bookmark the permalink.