Jump to content

Display products 4 in a row


Recommended Posts

It's the following on lines 26-35 of themes/default-bootstrap/product-list.tpl that controls the number of products per line:

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

The first three assigns are for the number of products per line in desktop, tablet and mobile mode on category pages. The second three assigns are for the homepage and product page.

  • Like 1
Link to comment
Share on other sites

Hi, I have change this line in themes/default-bootstrap/product-list.tpl

 

{if $page_name !='index' && $page_name !='product'}
        {assign var='nbItemsPerLine' value=3} --> {assign var='nbItemsPerLine' value=4} 

 

but I don't see any difference..

I have to do something else?

 

thank you

Link to comment
Share on other sites

I just checked and it looks like you need to change line 49 of product-list.tpl too. Change it from:
		<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}

to:

        <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}

That will change the width of products in desktop view on category pages from 4/12ths to 3/12ths.

Link to comment
Share on other sites

Change lines 26-30 of themes/default-bootstrap/product-sort.tpl from:

<ul class="display hidden-xs">
	<li class="display-title">{l s='View:'}</li>
    <li id="grid"><a rel="nofollow" href="#" title="{l s='Grid'}"><i class="icon-th-large"></i>{l s='Grid'}</a></li>
    <li id="list"><a rel="nofollow" href="#" title="{l s='List'}"><i class="icon-th-list"></i>{l s='List'}</a></li>
</ul>

to:

{*<ul class="display hidden-xs">
	<li class="display-title">{l s='View:'}</li>
    <li id="grid"><a rel="nofollow" href="#" title="{l s='Grid'}"><i class="icon-th-large"></i>{l s='Grid'}</a></li>
    <li id="list"><a rel="nofollow" href="#" title="{l s='List'}"><i class="icon-th-list"></i>{l s='List'}</a></li>
</ul>*}
Link to comment
Share on other sites

  • 3 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...