Grid display for Prestashop 1.5 default theme

I’ve been frequently asked how to turn Prestashop’s default theme product list view into a grid. Today, we will take the basic theme and turn the product list display into a cool grid with 4 items per row.

Download Project Files

Finished result

Grid display for Prestashop 1.5 default theme

Note: I used Prestashop 1.5.0.17 for this tutorial. Since 1.5.1, the image type name must be followed by _default, so, in the “home” case, it will be “home_default”

Let’s get started!

No time for chitchat. If you clicked to see this tut, you only want to turn the considerably not-so-good-looking Prestashop default product list into a cooler product grid. Please, note that the tutorial is for Prestashop 1.5 and uses the base product-list.tpl file of the default theme for this version only. If you are using 1.4 ,you can try to follow along, but don’t blindly copy/paste stuff, or you might get some errors!

Knowing this, login to the admin panel and go to Preferences > Themes. Prestashop 1.5 allows us to create new themes directly from the back office. Click Add new in the top left corner of the page and fill the form as shown in the picture:

Prestashop 1.5 create new themeOf course, you are free to use any name you want. Just be sure you select a theme to copy missing files from, since we are creating a new theme. Choose the default theme for this.

Before editing TPL files, be sure you set Template Caching to Compile cache if templates are updated or Force Compile under Advanced parameters > Performance

Now, you might have noticed I have removed the left column to give the grid a bit more space, and have the design feel less cluttered. To do it, open header.tpl and look for the following lines:

			<!-- Left -->
				<div id="left_column" class="column grid_2 alpha">
					{$HOOK_LEFT_COLUMN}
				</div>

				<!-- Center -->
				<div id="center_column" class=" grid_5">

We need to hide the left column, and widen the center one, so modify it like this:

			{*<div id="left_column" class="column grid_2 alpha">
					{$HOOK_LEFT_COLUMN}
				</div>*}

				<!-- Center -->
				<div id="center_column" class=" grid_7 alpha">

Explanation: I used smarty comments ({* content commented out *}) to hide the left column, then changed the center column class to grid_7 to take up the 2 grid units left empty by the left column. Notice that I added the aplha class so that the column doen’s have a left margin.

Please note that, by just doing this, all modules hooked to the left column will still be processed. To remove them completely and save some memory you will have to go to modules/positions in the admin panel, and remove them from there.

 

Let’s get rid of the list

Now that we have a new theme to play with, go to the newly created folder, then, inside this, css/ and open up product_list.css. This is the stylesheet responsible of the look of the list. Delete everything inside this file, since we will do it from scratch.

Now open the template file product-list.tpl that you find in the theme’s root. Delete everything from line 31 to line 71. The file should now look like this:

{*
* 2007-2012 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@prestashop.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <contact@prestashop.com>
*  @copyright  2007-2012 PrestaShop SA
*  @version  Release: $Revision: 7457 $
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark &amp; Property of PrestaShop SA
*}

{if isset($products)}
	<!-- Products list -->
	<ul id="product_list" class="clear">
	{foreach from=$products item=product name=products}
	{/foreach}
	</ul>
	<!-- /Products list -->
{/if}

Of course, if you now refresh a category page, you’ll see nothing anymore. Be sure you change the ul class from clear to clearfix.

The TPL file

Let’s go ahead and add some content to this template, shall we? Start by adding the following lines after line 30 (but before the closing foreach):

	<li class="ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.iteration%4 == 0}last_row_item{else}item{/if}">
			<a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}">
				<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />
				{if isset($product.new) &amp;&amp; $product.new == 1}<span class="new">{l s='New'}</span>{/if}
			</a>
			<p class="clear"></p>
			<h3><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|escape:'htmlall':'UTF-8'|truncate:26:'...':true}</a></h3>

		</li>

Explanation: The first line is the most important one. Have a close look (I know it’s a bit messy, unfortunatly the syntax highlight doesn’t have a smarty brush!) at the class of the list item:

class="ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.iteration%4 == 0}last_row_item{else}item{/if}"

Notice the “{if $smarty.foreach.products.iteration%4 == 0}last_row_item” part of the code. If you want to change the number of items displayed, change the 4 to something else. Of course, you’ll then need to change the css accordingly.

The first item we are placing in the list item is the product image, wrapped in a link that points to the single product view. We also add a to ensure new products can be hotspotted inside the link. Then, we place an H3 tag with the name of the product, and again, link it to the product itself.

Next, we have to deal with the price block. Add the following just after the closing h3:

		
<div class="content_price">

    {if isset($product.show_price) &amp;&amp; $product.show_price &amp;&amp; !isset($restricted_country_mode)}<span class="price" style="display: inline;">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span><br />{/if}
				{if isset($product.available_for_order) &amp;&amp; $product.available_for_order &amp;&amp; !isset($restricted_country_mode)}<span class="availability">{if ($product.allow_oosp || $product.quantity > 0)}{l s='Available'}{elseif (isset($product.quantity_all_versions) &amp;&amp; $product.quantity_all_versions > 0)}{l s='Product available with different options'}{else}{l s='Out of stock'}{/if}</span>{/if}
</div>

Inside this last div, we can also place some text to let customers know if a product is on sale, or has a reduced price. If none of this situations is true, we just add an empty span to fill the space and give a uniform height to the elements:

{if isset($product.on_sale) &amp;&amp; $product.on_sale &amp;&amp; isset($product.show_price) &amp;&amp; $product.show_price &amp;&amp; !$PS_CATALOG_MODE}<span class="on_sale">{l s='On sale!'}</span>
				{elseif isset($product.reduction) &amp;&amp; $product.reduction &amp;&amp; isset($product.show_price) &amp;&amp; $product.show_price &amp;&amp; !$PS_CATALOG_MODE}<span class="discount">{l s='Reduced price!'}</span>
				{else}
				<span style="height:16px; margin: 5px 0; display: block"></span>
{/if}

Finally, we can add the “add to cart” button (again, inside the same content_prices div):

			{if ($product.id_product_attribute == 0 || (isset($add_prod_display) &amp;&amp; ($add_prod_display == 1))) &amp;&amp; $product.available_for_order &amp;&amp; !isset($restricted_country_mode) &amp;&amp; $product.minimal_quantity <= 1 &amp;&amp; $product.customizable != 2 &amp;&amp; !$PS_CATALOG_MODE}

					{if ($product.allow_oosp || $product.quantity > 0)}
						{if isset($static_token)}
							<a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add&amp;id_product={$product.id_product|intval}&amp;token={$static_token}", true)}" title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>
						{else}
							<a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add&amp;id_product={$product.id_product|intval}", true)}" title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>
						{/if}						
					{else}
						<span class="exclusive"><span></span>{l s='Add to cart'}</span><br />
					{/if}
				{/if}

 

The list is already finished, and you can jump to the next section at this point. However, if you need a further feature, you can add the comparator link. As before, in the same div.

{if isset($comparator_max_item) &amp;&amp; $comparator_max_item}
				<p class="compare">
					<input type="checkbox" class="comparator" id="comparator_item_{$product.id_product}" value="comparator_item_{$product.id_product}" {if isset($compareProducts) &amp;&amp; in_array($product.id_product, $compareProducts)}checked="checked"{/if} /> 
					<label for="comparator_item_{$product.id_product}">{l s='Select to compare'}</label>
				</p>
{/if}

And that’s it! Now, reload a category page, it should look more or less like this (yes, all screwed!):

Prestashop template screwed

The Stylesheet

Now that the html part is done, the only thing left is the CSS. Open up product_list.css that you cleared before, and start by adding the following code:

ul#product_list {
	list-style-type: none
}
#product_list li {
	text-align: center;
	float: left;
	width: 142px;
	padding: 16px;
	margin-bottom: 14px;
	margin-right: 20px;
	background-color: #f9f9f9
}
#product_list li.last_row_item {margin-right: 0;}

Explanation: first, we remove the list bullets, since we won’t need those, and then setup the style for each list item. Note that the width is calculated based on 4 products per row, and you’ll have to do some math to adjust it to other numbers. The last style is to remove the margin from each last element in a row. If we didn’t do this, the element would just fall to the next line.

If you are experiencing uneven height issues, add a fixed height to #product_list li.

Now, let’s style the image and give a basic color to links

#product_list li a {
	color: #374853;
	text-decoration: none
}
#product_list a.product_img_link {
	overflow:hidden;
	position:relative;
	float: left;
	display:block;
	border: 1px solid #ccc
}
#product_list a.product_img_link img {
	display: block;
	vertical-align: bottom
}

It is important to set the position of a.product_img_link as relative since we will be adding the “new product” label over it, absolutely positioned.

#product_list li span.new {
	display: block;
	position: absolute;
	top: 15px;
	right:-30px;
	padding: 1px 4px;
	width: 101px;
	font-size:10px;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform:rotate(45deg);
	-ms-transform: rotate(45deg);
	background-color: #990000
}

 

Then, it’s time for product data. Note that I’m hiding the “availability” label, since i don’t need it.

#product_list li h3 {
	padding:0 0 10px 0;
	font-size:13px;
	color:#000
}

#product_list li p.product_desc {
	overflow: hidden;
	padding:0;
	line-height:16px;
}
#product_list li p.product_desc,
#product_list li p.product_desc a {
	color:#666;
}

#product_list li .discount, ul#product_list li .on_sale, ul#product_list li .online_only {
	display: block;
	font-weight: bold;
	margin: 5px 0;
	padding: 1px 5px;
	color: #990000;
	text-transform: uppercase
}
#product_list li .discount {
	display: inline-block;
	font-size: 10px;
	color: #fff;
	background: none repeat scroll 0 0 #9B0000
}

#product_list li .content_price {
	width: 142px;
	float: left;
}
#product_list li .price {
	display: block;
	padding-bottom: 15px;
	font-weight:bold;
	font-size: 16px;
	color:#990000
}
#product_list li span.availability {
	display:none; /* remove to show availability */
	color: #488C40
}

 

Finally, the “Add to cart” button and the optional compare checkbox

#product_list li .ajax_add_to_cart_button {
	padding-left: 20px
}
#product_list li .ajax_add_to_cart_button span {
	display: block;
	position: absolute;
	top: -1px;
	left: -12px;
	height: 26px;
	width: 26px;
	background: url(../img/icon/pict_add_cart.png) no-repeat 0 0 transparent
}
#product_list li p.compare {padding-bottom: 0;margin-top: 10px;}

 

Save and refresh the page. It should now look like this. If it doesn’t go back and check that your code matches. You can always download the project files to copy directly from there.

Grid display for Prestashop 1.5 default theme

Final Sources

product-list.tpl

Notice: For some reason, the plugin I use to highlight te code changes line 34. Be sure you download the project files and replace that line with the correct img tag, or remove the “if” part (you can also fix it if you know smarty!).

{*
* 2007-2012 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@prestashop.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA
*  @copyright  2007-2012 PrestaShop SA
*  @version  Release: $Revision: 7457 $
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}
 
{if isset($products)}

    <ul id="product_list" class="clearfix">
    {foreach from=$products item=product name=products}

	<li class="ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.iteration%4 == 0}last_row_item{else}item{/if}">
	    <a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}">
	       <img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} /> 
	        {if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/if}
	    </a>
	    <p class="clear"></p>
	    <h3><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|escape:'htmlall':'UTF-8'|truncate:26:'...':true}</a></h3>
		<div class="content_price">
		 
		    {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}<span class="price" style="display: inline;">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span><br />{/if}
		                {if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}<span class="availability">{if ($product.allow_oosp || $product.quantity > 0)}{l s='Available'}{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}{l s='Product available with different options'}{else}{l s='Out of stock'}{/if}</span>{/if}


			{if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="on_sale">{l s='On sale!'}</span>
			                {elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="discount">{l s='Reduced price!'}</span>
			                {else}
			                <span style="height:16px; margin: 5px 0; display: block"></span>
			{/if}
			{if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.minimal_quantity <= 1 && $product.customizable != 2 && !$PS_CATALOG_MODE}
			 
			    {if ($product.allow_oosp || $product.quantity > 0)}
			        {if isset($static_token)}
			            <a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add&id_product={$product.id_product|intval}&token={$static_token}", true)}" title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>
			        {else}
			            <a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add&id_product={$product.id_product|intval}", true)}" title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>
			        {/if}                       
			    {else}
			        <span class="exclusive"><span></span>{l s='Add to cart'}</span><br />
			    {/if}
			{/if}
			{if isset($comparator_max_item) && $comparator_max_item}
                <p class="compare">
                    <input type="checkbox" class="comparator" id="comparator_item_{$product.id_product}" value="comparator_item_{$product.id_product}" {if isset($compareProducts) && in_array($product.id_product, $compareProducts)}checked="checked"{/if} /> 
                    <label for="comparator_item_{$product.id_product}">{l s='Select to compare'}</label>
                </p>
			{/if}		
		</div>

	 
	</li>

    {/foreach}
    </ul>

{/if}	

 

product_list.css

ul#product_list {
	list-style-type: none
}
	#product_list li {
		text-align: center;
		float: left;
		width: 142px;
		padding: 16px;
		margin-bottom: 14px;
		margin-right: 20px;
		background-color: #f9f9f9
	}
	#product_list li.last_row_item {margin-right: 0;}

	#product_list li a {
		color: #374853;
		text-decoration: none
	}
	#product_list a.product_img_link {
	overflow:hidden;
	position:relative;
	float: left;
	display:block;
	border: 1px solid #ccc
	}
	#product_list a.product_img_link img {
		display: block;
		vertical-align: bottom
	}

	#product_list li span.new {
		display: block;
		position: absolute;
		top: 15px;
		right:-30px;
		padding: 1px 4px;
		width: 101px;
		font-size:10px;
		color: #fff;
		text-align: center;
		text-transform: uppercase;
		-moz-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-o-transform:rotate(45deg);
		-ms-transform: rotate(45deg);
		background-color: #990000
	}
	#product_list li h3 {
		padding:0 0 10px 0;
		font-size:13px;
		color:#000
	}

	#product_list li p.product_desc {
		overflow: hidden;
		padding:0;
		line-height:16px;
	}
	#product_list li p.product_desc,
	#product_list li p.product_desc a {
		color:#666;
	}

	#product_list li .discount, ul#product_list li .on_sale, ul#product_list li .online_only {
		display: block;
		font-weight: bold;
		margin: 5px 0;
		padding: 1px 5px;
		color: #990000;
		text-transform: uppercase
	}
	#product_list li .discount {
		display: inline-block;
		font-size: 10px;
		color: #fff;
		background: none repeat scroll 0 0 #9B0000
	}

	#product_list li .content_price {
		width: 142px;
		float: left;
	}
		#product_list li .price {
			display: block;
			padding-bottom: 15px;
			font-weight:bold;
			font-size: 16px;
			color:#990000
		}
		#product_list li span.availability {
			display:none; /* remove to show availability */
			color: #488C40
		}
	#product_list li .ajax_add_to_cart_button {
		padding-left: 20px
	}
	#product_list li .ajax_add_to_cart_button span {
		display: block;
		position: absolute;
		top: -1px;
		left: -12px;
		height: 26px;
		width: 26px;
		background: url(../img/icon/pict_add_cart.png) no-repeat 0 0 transparent
	}
	#product_list li p.compare {padding-bottom: 0;margin-top: 10px;}

Conclusion

And that’s it! You should now have a clean grid display for your Prestashop theme, and be able to set up a new one with your own dimensions in the future.

You like the tuts and want to say "thank you"? Well, you can always feel free to donate:

  • http://useballet.com.br/usedemo/index.php?id_category=4&controller=category Caram

    Sorry Nemo, something is wrong, tag “””” not working… Trying:
    ———————————————————————————————————————————-
    Nemo,

    I changed like I mentioned above in “product_list.tpl” and works! The images LOADS!!!

    You are the man!

    Thanks a LOT!

    To share:
    ———————————————————————————————————————————-
    People that removes the right column just have to do:

    In “footer.tpl” comments the code below with “{* codebelow *}”:

    {$HOOK_RIGHT_COLUMN}

    In “header.tpl” insert the label “omega” as the code below:

    These changes worked to me, like mentioned by Nemo.

    Thanks!!!
    Caram.:

  • http://useballet.com.br/usedemo/index.php?id_category=4&controller=category Caram

    Sorry Nemo, something is wrong, tag “””” not working… Trying:
    ———————————————————————————————————————————-
    Nemo,

    I changed like I mentioned above in “product_list.tpl” and works! The images LOADS!!!

    You are the man!

    Thanks a LOT!

    To share:
    ———————————————————————————————————————————-
    People that removes the right column just have to do:

    In “footer.tpl” comments the code below with “{* *}”:

    {*

    {$HOOK_RIGHT_COLUMN}

    *}

    In “header.tpl” insert the label “omega” as the code below:


    These changes worked to me, like mentioned by Nemo.

    Thanks!!!
    Caram.:

  • http://useballet.com.br/usedemo/index.php?id_category=4&controller=category Caram

    Hello.

    Very good tutorial, THANKS! AMAZING!

    Help: it’s not showing the images, see at: http://useballet.com.br/usedemo/index.php?id_category=4&controller=category

    My “product-list.tpl” is

    {*
    * 2007-2012 PrestaShop
    *
    * NOTICE OF LICENSE
    *
    * This source file is subject to the Academic Free License (AFL 3.0)
    * that is bundled with this package in the file LICENSE.txt.
    * It is also available through the world-wide-web at this URL:
    * http://opensource.org/licenses/afl-3.0.php
    * If you did not receive a copy of the license and are unable to
    * obtain it through the world-wide-web, please send an email
    * to license@prestashop.com so we can send you a copy immediately.
    *
    * DISCLAIMER
    *
    * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
    * versions in the future. If you wish to customize PrestaShop for your
    * needs please refer to http://www.prestashop.com for more information.
    *
    * @author PrestaShop SA
    * @copyright 2007-2012 PrestaShop SA
    * @version Release: $Revision: 7457 $
    * @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)
    * International Registered Trademark & Property of PrestaShop SA
    *}

    {if isset($products)}

    {foreach from=$products item=product name=products}


    getImageLink($product.link_rewrite, $product.id_image, 'home')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />
    {if isset($product.new) && $product.new == 1}{l s='New'}{/if}

    {$product.name|escape:'htmlall':'UTF-8'|truncate:26:'...':true}

    {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}{/if}
    {if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}{if ($product.allow_oosp || $product.quantity > 0)}{l s='Available'}{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}{l s='Product available with different options'}{else}{l s='Out of stock'}{/if}{/if}

    {if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}{l s='On sale!'}
    {elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}{l s='Reduced price!'}
    {else}

    {/if}
    {if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.minimal_quantity 0)}
    {if isset($static_token)}
    getPageLink('cart',false, NULL, "add&id_product={$product.id_product|intval}&token={$static_token}", true)}" title="{l s='Add to cart'}">{l s='Add to cart'}
    {else}
    getPageLink('cart',false, NULL, "add&id_product={$product.id_product|intval}", true)}" title="{l s='Add to cart'}">{l s='Add to cart'}
    {/if}
    {else}
    {l s='Add to cart'}
    {/if}
    {/if}
    {if isset($comparator_max_item) && $comparator_max_item}

    {l s='Select to compare'}

    {/if}

    {/foreach}


    {/if}

    Can you help me?

    Thanks a lot!
    Caram.:

    • http://nemops.com Nemo

      You have to change the image name to “home_default” ;)

      • http://useballet.com.br/usedemo/index.php?id_category=4&controller=category Caram

        Hello Nemo.

        Thanks for the reply.

        I’m learning PrestaShop and, where I have to change? In “product_list.css” line 34?

        Mine line 34 in “product_list.css” is:

        getImageLink($product.link_rewrite, $product.id_image, 'home')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />

        I have to change to:

        getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />

        Is it right?

        Thanks!
        Caram.:

        • http://useballet.com.br/usedemo/index.php?id_category=4&controller=category Caram

          Sorry Nemo, I meant “product_list.tpl”.

        • http://useballet.com.br/usedemo/index.php?id_category=4&controller=category Caram

          Nemo,

          I changed like above in “product_list.tpl” and works!

          You are the man!

          Thanks a LOT!

          To share:

          People that removes the right column just have to do:

          In “footer.tpl” comments the code below with “{* *}”:
          {*

          {$HOOK_RIGHT_COLUMN}

          *}

          In "header.tpl" insert the label "omega" as the code below:


          These changes worked to me, like mentioned by Nemo.

          Thanks!!!
          Caram.:

        • http://useballet.com.br/usedemo/index.php?id_category=4&controller=category Caram

          Sorry Nemo, something is wrong, follows correct:
          ——————————————————————————————————————————————————–
          Nemo,

          I changed like I mentioned above in “product_list.tpl” and works! The images LOADS!!!

          You are the man!

          Thanks a LOT!

          To share:
          ——————————————————————————————————————————————————–
          People that removes the right column just have to do:

          In “footer.tpl” comments the code below with “{* *}”:
          {*

          {$HOOK_RIGHT_COLUMN}

          *}

          In “header.tpl” insert the label “omega” as the code below:


          These changes worked to me, like mentioned by Nemo.

          Thanks!!!
          Caram.:

        • http://useballet.com.br/usedemo/index.php?id_category=4&controller=category Caram

          Sorry Nemo, something is wrong, tag “” not working… Trying:
          ——————————————————————————————————————————————————–
          Nemo,

          I changed like I mentioned above in “product_list.tpl” and works! The images LOADS!!!

          You are the man!

          Thanks a LOT!

          To share:
          ——————————————————————————————————————————————————–
          People that removes the right column just have to do:

          In “footer.tpl” comments the code below with “{* *}”:

          {*

          {$HOOK_RIGHT_COLUMN}

          *}

          In “header.tpl” insert the label “omega” as the code below:


          These changes worked to me, like mentioned by Nemo.

          Thanks!!!
          Caram.:

        • http://useballet.com.br/usedemo/index.php?id_category=4&controller=category Caram

          Sorry Nemo, something is wrong, tag “””” not working… Trying:
          ———————————————————————————————————————————-
          Nemo,

          I changed like I mentioned above in “product_list.tpl” and works! The images LOADS!!!

          You are the man!

          Thanks a LOT!

          To share:
          ———————————————————————————————————————————-
          People that removes the right column just have to do:

          In “footer.tpl” comments the code below with “{* *}”:

          {*

          {$HOOK_RIGHT_COLUMN}

          *}

          In “header.tpl” insert the label “omega” as the code below:


          These changes worked to me, like mentioned by Nemo.

          Thanks!!!
          Caram.:

  • Bigfoot

    Did you have any ideas how to made subcategories grid view. Im new on Presta. Thnx

  • http://4stuff.co.uk bas

    is it possible to allow the user to select between LIST and GRID

    Ideally, I would like this to display as a Grid but allow the user to change to a List if Preferred.

    • http://nemops.com Nemo

      Yes, it can be done. However, you will need javascript, and need to pay close attention to the “blocklayered” module, since it will cause trouble if not modified properly

  • rekram

    Hi, why the product description is not visible. I tried to copy line

    {$product.description_short|strip_tags:’UTF-8’|truncate:360:’…’}

    from default product-list.tpl to your, but it does not help

    • rekram

      ok, my mistake, it works because default products like ipod didn’t have short describe :)

  • http://24x7shop.in Prateek

    hey friend nice tutorial and it also worked for me, but i want to delete the right column, insted of left, so how to do it. Thanks in advance.

    • http://nemops.com Nemo

      Hi,
      You will have to swap those classes and add “grid_7 alpha” to the center column, and “grid_2 omega” to the right.

      • http://mebleprowansalskie.com eftrzy

        I would like to delete the right column too but I have no in the header.tpl just left and center. Can you tell me what should I do?
        Thanks for the tut!

        • http://nemops.com Nemo

          You can find it in footer.tpl ;)

        • http://mebleprowansalskie.com eftrzy

          Thank you:)
          I’ve edited the footer.tpl and add this code:
          {*
          {$HOOK_RIGHT_COLUMN}
          *}

          and then in the header.tpl

          {$HOOK_LEFT_COLUMN}


          but now my page is messed up:) it looks like this . Any ideas what went wrong?:)

        • http://nemops.com Nemo

          The center column must be omega, no alpha ;)

        • http://mebleprowansalskie.com eftrzy

          Cheers mate, you’re the man! It almost works now:) There’s only one problem left – the slider buttons are right next to the slider itself. Can you help me with that too?
          I must say I’ve never got so much help regarding prestashop, not even on official site. Thanks again for your time!

        • http://nemops.com Nemo

          The slider takes up all the space, but images are too small, that’s the catch ;) You have to increase the width for those images ;)

        • http://mebleprowansalskie.com eftrzy

          Thanks again:)
          This site has the best support ever!:)

          Can you answer me in your topic on prestashop.com about subcategories grid?

          Cheers mate. I will tell about this site all around!

        • http://intalcrest.com MAIO

          I’m trying to do the same thing , but probably I’m missing some base .tpl knowledge,
          what should I do?
          I’m a newbie and I’ve seen a couple of your post, you’re the man,
          thanks

        • http://intalcrest.com MAIO

          solved,
          your posts are always appreciated

  • Cristine

    Oh my gosh, thank you so much! This is exactly what I wanted to do and just the help I needed. The only problem I’m still having is the height issue, I don’t know where to fix it. Can you give the dummies version. Again Thank you

    • http://nemops.com Nemo

      You mean you already added a fixed height to the

    • s, but they’re still taking up an uneven vertical space?
  • Cristine

    Nope didn’t add it yet. I’m not sure what to add or where to add it.

    • http://nemops.com Nemo

      I should add it in the tut. At any rate, in the css file (product_list.css), set a fixed height for the

    • items, like this: #products_list li {height: 180px} Your height may vary, of course, just use the one that best suits your store
  • Cristine

    THANK YOU!!!!!

  • milou

    hi, thanks for this tutorial. learned a lot.

    since yesterday i’m using these new files in ps 1.5.2. but now i have very often an error-500 page, when browsing the shop. i can reload the page and then everything is fine. any idea?

  • Noobert

    This article was great, but ran into a problem on only some of my pages. Most everything is showing up just fine in the 4 columns. However, on some of my pages, I’ve noticed that I’ll have 4 perfect items in a row and then the next row will only have 1 or 2 items, then the next row might go back to 4 items, and then I might have 1 item in the next. I’m not talking about only having 10 items show on a page where you get 4 items, 4 items, and then 2 items. I’m getting some pages with 1 or 2 items in them but they aren’t on the left, they might be in the middle or on the right. So if you have 4 columns in each row (i.e. 1 2 3 4), I may get some rows with an item in columns 2 and 3, or just one in 3 and then the row below it will have 4 items in it like it never happened. Most of my site is perfect, but some pages have this glitch. Any ideas?

  • http://www.extracreative.co.uk Extra Creative

    great tutorial however

    the 9th grid product just floats on its own in the middle

    ****
    ****
    *
    ****
    ****

    like seen above with *

  • asrikanth

    Hi,thanks for the post and it is really useful.
    I downloaded files which you have posted and updated my PS1.5.2 version
    I had two queries:
    1) I am dont was to show product tile and also name. Only title will do for me.How can I remove product name?

    2) I cannot see “add to cart” button for each product in Grid View. How can I fix this issue?

    Thanks

  • http://www.g-improve.cz Roumec

    Hi there, can you please help me? I want to have a three product instead two in row. In this page http://www.g-improve.cz/index.php?id_category=10&controller=category

  • http://www.hardiscount.fr skroll

    Hello Nemo,
    Thanks a lot for your tuto . You can even call it “For dummies” because it work for me and i’m really newbie in prestashop !
    thanks also to Thijs because your post on “home_default” help me .
    I just have a few problem (i mean “few” for you ;-) My items name are long and they don’t appear entirely in the grid display is there a way to display 3 lines under the image instead of 1 ?
    Thx for your help regards.

  • http://www.tissu.com.br/lojaonline b.designer

    Hello. You are such a genius, I was about to give up using 1.5 when I lucky found you, so my thanks to you.

    I am working on removing right and left things on the home page. Keeping only slide at center.
    Then on the category page I want to have Layered Menu only and the grid list.

    My question is: I want the grid look, but instead of hidding the left, I want to keep the left column (where you see CATALOG) and hide the right one. So how can I do this?

    See my site: http://www.tissu.com.br/lojaonline.

    I would appreciate if you could help. Thanks.

    B.designer.

  • H

    I am very new to PrestaShop and just used your tutorial, thank you very much for this! The only thing I would like to know is, is it possible to keep the left column and still have 4 items listed next to each other in the middle? So basically, what I want is I would like to widen the shop (or, the middle part so that left and right column will move further away from the middle)…. Is that possible? Because now I didn’t remove the left column and the items display 2 next to each other instead of 4, because there is not enough space. Thank you!

  • http://www.shuanwallace.net Shaun

    Learning with this tutorial. Spotted an error: “Now open the template file product-list.css that you find in the theme’s root. Delete everything from line 31 ” — should be .tpl not .css :)

    Will let you know if I spot any other errors that may confuse readers!

    S.

  • Juppijo

    Hi,
    thank you for the tutorial!
    Is there any way you could explain how to integrate the “base price” information (X.XX € / 100 ml) properly?
    I’m using PS 1.5.2

  • http://www.caletectiendaonline.com Noel

    Thanks for the this tutorial, I am testing PS 1.5 before doing the upgrade to my shop and this saved me hours of investigation…
    Now I just have to apply this to the home page, to the featured products.

    Very good job!

    Noel
    Libros 6 Sigma, Lean y Kaizen

  • http://techkram.de Franky

    Thanks for this great Tutorial!

  • Follow on Twitter

    Store Top Sales

    You like the tuts and want to say "thank you"? Well, you can always feel free to donate: