How to Change Default Grid in Prestashop 1.6 – 1.7

July 14, 2014 Lena Tsybulenko Prestashop, Tips&Tricks

By default Prestashop 1.6 uses grid of 3 products at the category page and 4 products at the homepage. Here is the solution on to change grid on these pages.

Prestashop 1.6 use Bootstrap, so we can change class of the columns.

Open product-list.tpl and find this code:

<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-4{/if}{if $smarty.foreach.products.iteration%$nbItemsPerLine 
== 0} last-in-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLine == 1} first-in-line{/if}{if 
$smarty.foreach.products.iteration > ($smarty.foreach.products.total - $totModulo)} last-line{/if}{if 
$smarty.foreach.products.iteration%$nbItemsPerLineTablet == 0} last-item-of-tablet-line{elseif 
$smarty.foreach.products.iteration%$nbItemsPerLineTablet == 1} first-item-of-tablet-line{/if}{if 
$smarty.foreach.products.iteration%$nbItemsPerLineMobile == 0} last-item-of-mobile-line{elseif 
$smarty.foreach.products.iteration%$nbItemsPerLineMobile == 1} first-item-of-mobile-line{/if}{if 
$smarty.foreach.products.iteration > ($smarty.foreach.products.total - $totModuloMobile)} last-mobile-
line{/if}">

<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-4{/if}{if $smarty.foreach.products.iteration%$nbItemsPerLine

== 0} last-in-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLine == 1} first-in-line{/if}{if

$smarty.foreach.products.iteration > ($smarty.foreach.products.total - $totModulo)} last-line{/if}{if

$smarty.foreach.products.iteration%$nbItemsPerLineTablet == 0} last-item-of-tablet-line{elseif

$smarty.foreach.products.iteration%$nbItemsPerLineTablet == 1} first-item-of-tablet-line{/if}{if

$smarty.foreach.products.iteration%$nbItemsPerLineMobile == 0} last-item-of-mobile-line{elseif

$smarty.foreach.products.iteration%$nbItemsPerLineMobile == 1} first-item-of-mobile-line{/if}{if

$smarty.foreach.products.iteration > ($smarty.foreach.products.total - $totModuloMobile)} last-mobile-

line{/if}">

We need these – columns classes:

{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-4{/if}

1 2	{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-4{/if}

For homepage change class col-md-3 to col-md-2, and you’ll get 6 columns grid.

For category page change class col-md-4 to class col-md-3, and you’ll get 4 columns grid.

You can change column class to any you need.

Don’t forget to change number of products per line:

{*define numbers of product per line in other page for desktop*}
	{if $page_name !='index' && $page_name !='product'}
		{assign var='nbItemsPerLine' value=4}
		{assign var='nbItemsPerLineTablet' value=2}
		{assign var='nbItemsPerLineMobile' value=3}
	{else}
		{assign var='nbItemsPerLine' value=6}
		{assign var='nbItemsPerLineTablet' value=3}
		{assign var='nbItemsPerLineMobile' value=2}
	{/if}

{*define numbers of product per line in other page for desktop*}

{if $page_name !='index' && $page_name !='product'}

{assign var='nbItemsPerLine' value=4}

{assign var='nbItemsPerLineTablet' value=2}

{assign var='nbItemsPerLineMobile' value=3}

{else}

{assign var='nbItemsPerLine' value=6}

{assign var='nbItemsPerLineTablet' value=3}

{assign var='nbItemsPerLineMobile' value=2}

{/if}

For correct list view find js/global.js and change the class for list view:

function display(view)
{
 if (view == 'list')
 {
$('.product_list > li').removeClass('col-xs-12 col-sm-6 col-md-3')
.addClass('col-xs-12 col-sm-6 col-md-12');
}
 else 
 {
 $('.product_list > li').removeClass('col-xs-12 col-md-12').addClass('col-xs-12 col-sm-6 col-md-3');
}}

function display(view)

{

if (view == 'list')

{

$('.product_list > li').removeClass('col-xs-12 col-sm-6 col-md-3')

.addClass('col-xs-12 col-sm-6 col-md-12');

}

else

{

$('.product_list > li').removeClass('col-xs-12 col-md-12').addClass('col-xs-12 col-sm-6 col-md-3');

}}

Prestashop 1.7

In Prestashop 1.7 as well as in its previous version 1.6 there are 3 product columns for category page and 4 columns for homepage. But there are some differences in implementation. In Prestashop 1.6 bootstrap classes are used (which is described above in details), while in Prestashop 1.7 everything is done with CSS styles. Moreover, in Prestashop 1.7 “display: flex” is applied to create a grid for product list block, and the block width is specified for the product list. Since the width of container block (or product list block), as well as the width of product block, has specified value, the number of products in a row depends on the container block (3 for category page and 4 for homepage). Default width of product list block is 257 pixels (and this is for category page as well as homepage). In order to change the number of products in a row, we should alter the product block width.

As an example, let’s try to carry out it on the category page (for homepage and other pages where there’s a product list, it will be the same). We’re going to create not 3, but 4 products in a row.

In the style file (make sure the file is attached after the file “/themes/classic/assets/css/theme.css”) we should specify the width of product block (according to the container width it will be 188 pixels).

"#products .thumbnail-container {width: 188px;}"

1	"#products .thumbnail-container {width: 188px;}"

But it’s not enough for us. Since we’ve changed the block width, we’ll have to change the style of the elements placed within the block.

"#products .highlighted-informations {width: 188px;}"
"#products img{width: 100%; margin: 0;}"
"#products .product-description {width: 188px;}"

"#products .highlighted-informations {width: 188px;}"

"#products img{width: 100%; margin: 0;}"

"#products .product-description {width: 188px;}"

Primarily, the product list looked that way:

After settings are implemented, it will look like this:

hire the author

Lena Tsybulenko

Lena is our ingenious front-end developer and designer. Lena graduated from the Academy of Art and her fine art school very much peeps out in her design works. She has drawn designs for more than 50 sites and web interfaces. Lena is moving forward to make her own modern art exposition.

55 comments

Lena Tsybulenko says:

February 8, 2016 at 18:16

{assign var=’nbItemsPerLine’ value=4} in this line you should change to value=6. Because you wrote col-md-2 class
Paul says:

February 8, 2016 at 20:47

I tried that and it still only shows 3 products across the product grid page. Any ideas?
Marco says:

February 12, 2016 at 02:48

Hi Lena,

It worked for me perfectly. Can you tell me please how I can do if I want to show 9 or 10 or 11 products per line?

Thanks in advance
Lena Tsybulenko says:

February 12, 2016 at 11:55

Paul,

Try to disable cache in the backend.
Lena Tsybulenko says:

February 12, 2016 at 12:07

Marco,

Prestashop theme uses bootstrap grid, so it’s only availbale 12, 6 , 4, 3, 2, 1 products per line.
santiago says:

February 12, 2016 at 22:02

thank you. I have gained two hours to live
Paul says:

February 15, 2016 at 23:33

Thanks
The Refinerz Touch says:

March 9, 2016 at 22:07

It worked for me.. Thanks a lot and God will bless you for this tutorial!
mohammad says:

April 5, 2016 at 10:46

hi there
i do all you said but unfortunately it is not working anyway
my website is: http://www.20look.com

my problem is that by changing col-md-3 to col-md-2 for home page but in inpec of chrome it is still stay col-md-3 again!!!!
i dont khnow where is the code that it follow of it
Pavel Novitsky says:

April 5, 2016 at 11:37

@mohammad, do you use smarty caching on your website?
Marianne says:

April 5, 2016 at 19:05

Hi Lena,

It is the second time I read one of your articles to fix some slight container’s issues on my shop.
Just like the last time I read your advice, I found a solution I had been looking for days and nights !
I do not often comment on articles, but this time I had to.
Thank you for all the time you spend on writing these helpful article, you’re my prestashop hero ! haha
Have a nice day !
JJ says:

August 2, 2016 at 03:09

Dear guys,

I want to have 3 instead of 4 products on the productpage.
Can someone please sow me how to do ? (i can find the product-list.tpl and js/global.js and changed every md-4 into 3 but nothing changes :(
Lena Tsybulenko says:

August 2, 2016 at 18:39

Marianne, thanks! Glad that my articles were helpful!
Lena Tsybulenko says:

August 2, 2016 at 18:39

JJ, just make sure that you have changed col-md-3 to col-md-4 if you want 3 columns grid. Here is a description of how bootstrap grid works: http://getbootstrap.com/css/#grid
noodles says:

August 3, 2016 at 00:38

none of this works. changing the grid view messes up the list view and visa versa.
Abelardo Abarca says:

October 20, 2016 at 00:23

Good afternoon, Lena and thank you so much for all your advises :)
i do all you said and all is working .. (i mean… 6 products at the homepage and 4 products at the category)
But… exist a little problem .. (at the homepage)
Now
I can see 6 products .. in the “first line” (and that’s good)
but..
I see “2 products only” in “the second line” (I cannot see 6 products like the first line)

Thank you for reading these lines and waiting your answer
Have a good day
:)
Abelardo Abarca says:

October 20, 2016 at 23:08

How can i show more of 8 products there (in homepage)?..
zefa says:

November 16, 2016 at 21:42

How for mobile version, home future 2 colom??? please help me
Cauê Michelin says:

December 25, 2016 at 12:51

Hi, thanks for the help. But it´s not worked here.

I did change de product_list.tpl (“col-md-2”) for homepage, and did change the global.js. When i whatch the files on ftp, they are exacly how you said to do up here. But when a see the homepage, the product list is still like this: “col-md-3”. So, it’s still showing 4 products per line. Is any more change to do?

Thanks Caue
El0din says:

May 31, 2017 at 21:24

The tutorial works fine, but if you are trying and you did’t see changes, you need to delete all objects( except index.php) from “cache/smarty/cache” and “cache/smarty/compile”
Enda says:

August 5, 2017 at 01:14

Hello,

i want make 2 columns in presta 1,7 mobile version. but i dont know coz i check 1,7 not same like version 1,6.

thanks
Lena Tsybulenko says:

August 10, 2017 at 13:02

Hi Enda,
In 1.7 version you are free to use any instruments to achieve 2 columns, you may use bootstrap col-xs-6 class, or use flexbox, or create your own grid.
Sachin says:

August 11, 2017 at 08:43

how to display 6 products in prestashop 1.7 version

thanks
Enda says:

August 13, 2017 at 03:51

Thanks lena.
Where is link for modify the product ?
Do you have sample website from ur project.?
Lena Tsybulenko says:

August 18, 2017 at 12:29

Hi Enda, you need to modify product-list.tpl file. Here is an example of modified grid in our template: https://module-presta.com/craft-prestashop-1-6-responsive-template.html
ben2017 says:

August 23, 2017 at 15:45

i say it in french

C’est exactement ce que je cherchais
et ca marche parfaitement

Merci bcp
Iryna Kandrashova says:

August 23, 2017 at 15:58

Thank you, Ben!
Subscribe to our blog to stay tuned :)
david says:

January 17, 2018 at 21:08

hi
in prestashop 1.7 when I make it to be 6 products per row, each product box looks too high (as compared with the width). Also when I insert the add to cart and quantity fields on each product, the add to cart button is too big. How can I add those 2 objects (add to cart and quantity) on each product when there are 6 products per row and how to make decrease the height of each product so it will look more in proportion?
thanks in advance
Ali says:

January 27, 2018 at 04:51

Hi Lena;
Thanks for your advanced advices, help much.
I have some unsolved problem about product display on home page.
As you can see, featurated products are displaying 2 products per arrow/line which I do not want to display in that way. I want them to be displayed 3 products per arrow as the same display in category page. If you click on one of the categories on the left column you can see that products display by 3 per arrow but not on home page. Whatever I tried to solve this I failed, never worked.
Please help me to solve this problem before I hurt myself.

Thanks,
Iryna Kandrashova says:

January 29, 2018 at 11:15

Dear Ali,
the issue is pretty complicated. Unfortunately, it’s not possible to provide a qualitative answer without getting into details.
Please contact our support department in case you need an individual consideration of the matter: store@belvg.com
We’ll be happy to assist.

How to Change Default Grid in Prestashop 1.6 – 1.7

55 comments

Post a new comment Cancel