How to Change Default Grid in Prestashop 1.6 – 1.7

How to Change Default Grid in Prestashop 1.6 – 1.7

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:

We need these – columns classes:

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:

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

2_How to Change Default Grid in Prestashop 1.6

3_How to Change Default Grid in Prestashop 1.6

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).

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.

Primarily, the product list looked that way:

How to Change Default Grid in Prestashop 1.6 - 1.7 _1

After settings are implemented, it will look like this:

How to Change Default Grid in Prestashop 1.6 - 1.7 _2



52 comments

  1. Hello,

    I work with Prestashop 1.6.1.4 but i can’t find the following lines..

    CAN’T FIND IN PRODUCT-LIST.TPL:
    {if $page_name == ‘index’ || $page_name == ‘product’} col-xs-12 col-sm-4 col-md-2{else}
    col-xs-12 col-sm-6 col-md-3{/if}

    Is there something change in the newest versie?

    I FIND ONLY THIS LINES:
    {if $page_name !=’index’ && $page_name !=’product’}
    {assign var=’nbItemsPerLine’ value=7}
    {assign var=’nbItemsPerLineTablet’ value=2}
    {assign var=’nbItemsPerLineMobile’ value=3}
    {else}
    {assign var=’nbItemsPerLine’ value=8}
    {assign var=’nbItemsPerLineTablet’ value=3}
    {assign var=’nbItemsPerLineMobile’ value=2}
    But i see the same, it doesn´t change i still seeing 4 item per row
    Any help please?

    Tnx

  2. Elmar,

    In 1.6.1.4 version this code is in the same place as previously, it’s a class of

    tag.

  3. Hi
    I made the changes to the product-list.tpl but not to the global.js as I want the list view to stay as it is. All I wanted to change was the Grid View of the products to 4 cross instead of 3.

    Any ideas on where I’m going wrong? I’m using ver 1.6.1.4

    Thanks

    ———–
    {if isset($products) && $products}
    {*define number of products 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}
    ——
    <li class="ajax_block_product{if $page_name == 'index' || $page_name == 'product'} col-xs-12 col-sm-4 col-md-2{else} col-xs-12 col-sm-6 col-md-2{/if}

    ————–

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

  5. 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

  6. Marco,

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

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

  8. 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

  9. 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 !

  10. 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 :(

  11. 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
    :)

  12. 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

  13. 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”

  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

  15. 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.

  16. Thanks lena.
    Where is link for modify the product ?
    Do you have sample website from ur project.?

  17. i say it in french

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

    Merci bcp

Post a new comment

top
BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *