We are about to launch a month of discounts on our Prestashop modules and themes.
4 weeks – each day – one discount on one module!
Any day of the next week (from 23rd to 27th of November) we’ll offer a… (more…)
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:
|
1 2 3 4 5 6 7 8 9 10 |
<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:
|
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:
|
1 2 3 4 5 6 7 8 9 10 |
{*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:
|
1 2 3 4 5 6 7 8 9 10 11 |
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'); }} |
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.
Lift your store up from the RUNWAY Fashion Responsive Prestashop 1.6 Template. Reasonably minimalistic in design – it helps focus on colorful navigation elements. The theme is functional and ready to accommodate your extensions. It’s responsive and looks good on mobile devices. Originally meant for clothing stores and accessories it’s both functional and neutral enough to present any type of product.
Runway Prestashop 1.6 Template is coded by certified professionals for your comfort and store growth. Inbuilt functional extensions like: Homefeatured slider on homepage, Static blocks module and Scroll Top module. (more…)
how to open the root in presta shop
for correct GRID-LIST
you must change values in /js/global.js too:
function display(view)
{
…
$(‘.product_list > li’).removeClass(‘col-xs-12 col-sm-6 col-md-3’).addClass(‘col-xs-12’);
…
$(‘.product_list > li’).removeClass(‘col-xs-12’).addClass(‘col-xs-12 col-sm-6 col-md-3’);
…
I have a problem.
i did all you say but i don´t see any change
how its possible?
I change the document /themes/default-bootstrap/product-list.tpl
{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?
Borja, you had to change the class of bootsrap grid:
For correct list view find js/global.js and change the class for list view:
Hi.
I did everything like you show but nothing happens. I still having 4 colums on hompage and 3 columns on categories page.
I d’ont know wath is wrong. I re-create de thumbnails too in admin panel, and nothing changes.
my presta version is 1.6.0.11
thanks
worked like a charm! Thanks Lena
Everything works allright but the modification for the list view, that need further explanation. Here is.
You have to find the function display (view) and do the following:
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’);
modify ONLY the previous line, changing md-4 for md-3. Let the rest of the function untouched
…
(rest of the code untill the else, untouched)
…
}
else
{
$(‘.product_list > li’).removeClass(‘col-xs-12 col-md-12’).addClass(‘col-xs-12 col-sm-6 col-md-3’);
…
do the same, change 4 for 3 in the previous line. Let the rest of the code untouched
…
}
}
Perhaps this litle explanation will help somebody, I hope so.
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
Elmar,
In 1.6.1.4 version this code is in the same place as previously, it’s a class of
tag.
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}
————–
{assign var=’nbItemsPerLine’ value=4} in this line you should change to value=6. Because you wrote col-md-2 class
I tried that and it still only shows 3 products across the product grid page. Any ideas?
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
Paul,
Try to disable cache in the backend.
Marco,
Prestashop theme uses bootstrap grid, so it’s only availbale 12, 6 , 4, 3, 2, 1 products per line.
thank you. I have gained two hours to live
Thanks
It worked for me.. Thanks a lot and God will bless you for this tutorial!
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
@mohammad, do you use smarty caching on your website?
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 !
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 :(
Marianne, thanks! Glad that my articles were helpful!
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
none of this works. changing the grid view messes up the list view and visa versa.
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
:)
How can i show more of 8 products there (in homepage)?..
How for mobile version, home future 2 colom??? please help me
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
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”