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://na LS

    Hello Nemo,

    Thank you for sharing this with us. However i have a slight issue.

    As you can see from the attached image, how do I align the product pictures to the left most side of the center page?

    Thank you!

  • http://limousineuse.com Harry

    hi there:

    It is great guide.

    Just wonder if I could hide right column. I can not find the Right Column in Header.tpl.

    Could you suggest How to hide Right Column and make Center Column expand to the right.

    Thanks,

    • http://www.tried-and-true.co.uk Tried and True

      hey mate, i got around this by adding omega instead of alpha to the center grid then removing the right modules in the postions window.

      • http://limousineuse.com Harry

        Hi there:

        Thanks for your reply.

        I did exactly what you says. The problem is after I did what you said, The change also applied to the home page.

        The homepage is not showing properly. But the category page is perfect.

        Any idea?

        Thanks,

  • Jan

    Wow, thanks a lot. Looks very nice! But how can I make the products at the homepage also show in a grid like on the category pages?

    • Jan

      Since the left column is gone, I can make the product page wider. My coding skills are very bad, so if someone can tell me how to do it I would be very thankfull. Now i have some white space at the right side of my product page.

  • Miguel

    hi,please help me … i change product_list.tpl and product_list.css on mi presta 1.5.3
    and show me only 2 columns and the image product not see…help me please http://movilescuenca.com/index.php?id_category=22&controller=category
    …sorry for my english…

  • Maury Markowitz

    Some more tips:

    1) if you have x numbers per row, and your page shows y rows, you probably want to show x times y products per page. So go to your Preferences->Products->Pagination-> Products per page setting!

    You might even want to change the numbers in the pagination controller’s pop-up, but I haven’t found them yet. It’s not in the obvious place, pagination.tpl, so I’m not sure where it’s hiding.

    2) there is a minor grammar/translation problem in the pagination controller, it should be “products per page” not “products by page”. This can be fixed in nbr-product-page.tpl You’ll see it!

  • Maury Markowitz

    Another fantastic article.

    Still playing with the code, but I think I have found one minor issue… if the list contains “disabled” products, it seems that it leaves spaces for them in the display, with nothing in that.

    At least that’s what I *think* is happening. I’ll report back.

    • Maury Markowitz

      No, this appears just to be a spacing issue. I’m going to try forcing the vertical size to see what happens.

      • http://www.preservationcoins.com Helen

        Did changing or specifying the vertical size fix the random empty spots on the grid? I have had this problem for a while. I don’t know coding, but if you can offer any advice it would be much appreciated.
        Thanks!

  • Maury Markowitz

    Another *amazing* tutorial Nemo!

    But I have found a problem. One of my lists has about 16 products, so it’s in two pages by default. On page 2 I noticed “holes”, areas in the list with nothing in them.

    I *believe* this might have something to do with disabled products?

    I have an image if that would help.

  • http://anabel.co Yair

    Hi Nemo,

    Great article. Thanks.

    A bit unrelated since i’m writing my own module and so cannot change the tpl files.

    Do you know how can I add more action buttons in the category page?

    I tried hooking to displayProductButtons
    which should: “Put new action buttons on product page”

    but it does not work.

    Thanks

    Yair

  • http://iloveyou-shop.com Genie

    Hi,

    I have tried to make grid display again but my images are now showing…everything else is fine though..
    http://iloveyou-shop.com/3-leather-handbags

    Any advice?
    Thank you!
    Genie

  • nufaha

    hye nemo, i did this tutorial, but i have some question, how to put short description under the picture like shown in featured product at homepage, please guide me, thanks :)

    • http://nemops.com Nemo

      Hi,
      It should be $product.description_short ;)

    • Matt

      If any one is having trouble with adding short description here’s what you add (I dont know if the website’s gonna let me post the code):

      to tpl file:
      at the beginning of the file (add it before tag and after tag):

      {$product.description_short|strip_tags|truncate:65:’…’}

      in css file (anywhere):

      #product_list li span.short {
      font-size:10px;
      color:#000
      }

      and that’s it :)
      there’s probably a better or easier (or both) way, but I have a very little knowledge about php/html ;) you also might want to adjust ‘truncate:’ to something else as the short description might be too long to be displayed with 65 characters

  • Mozza

    Hey there,

    Great tutorial! Thank you very much! I want to do exactly the same to my featured product page, can you give me a push in the right direction?

    • Mozza

      Hey there,

      I am using Prestashop version 1.5.3.

      I found a bug after implementing product_list.tpl to my shop, when I don’t use the AJAX cart, it redirects to homepage and doesn’t add anything to my cart after I click “Add to cart”. I think there are more differences in version 1.5.1 and version 1.5.3. Anyone else having the same problem? Any help would be appreciated ;)!

  • John

    Hi

    Can i just say that this is the most wonderful and clean tutorial ever available n google search? Can you help me with 1 coding? I need to change the product view thumbnail image size.

    its being defined over here..

    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} />
    {if isset($product.new) && $product.new == 1}{l s=’New’}{/if}

    when i change homesize width height, the layout is becoming messy.. i need to make the thumbnail bit bigger.. may be height 200px and width 175px..

    any help?

    John

    • http://nemops.com Nemo

      Thanks!
      Well, you can always create a new image type is changing the home becomes messy. But then, you’ll also have to assign it to the template. So, you have 2 options:
      1- In the image preferences (back office) change the home_default size, and regenerate these thumbs
      2- Create a new image type, extend the category controller (or create a module that’s always hooked to the header) and assign the new image size. In the layot, use those measures

  • http://shop.wmztoys.com maza

    great guide. really helpful. thanks a lot. works well with version 1.5.3

    btw, i have 1 quick question. by default, the item which is on sale & reduced price will have a notification between price and add to cart button. how do i add product availability / status to the same space?

    example;

    thanks

  • Jose Maria

    Hello Nemo,

    Thanks for the add.

    I am using ps 1.5.3.1 and, images are not showing and products are still one under the other.

    I have to tell you that product-list.tpl in versión 1.5.3.1 have changed.

    Any ideas to make all this working in 1.5.3.1as most of people are migrating from 1.5.2 to 1.5.3.1 due to the problems and bugs?

    Thanks,

    José María

  • Harry

    Thanks so much for this great tutorial.
    I would like to know is, is it possible to keep both left column and right column and have 3 or 4 items listed next to each other in the middle? Which is similar to Home Featured Products?

    Could you give me some idea on how to do that?

    Or still to follow your guide and where to make some changes to get the result?

    I am running on 1.5.3.1.

    Really appreacite your help and time.

    Thanks,

    • http://nemops.com Nemo

      Hi,
      Well, you can skip the steps when hiding the columns, and keep 3 products instead of 4, simply. Use an according width for the elements, there is nothing special to it, really ;)

      • http://limousineuse.com Harry

        Thanks for your reply and great work.

        I had one problem, the image is not showing. Then i followed your suggestion that Change Home to home_default.
        After upload to the server. The whole page just goes blank when going to products list. See http://www.limousineuse.com.

        Do not know what wrong with it. Using Frontpage.

        Any chance you could send me the product-list.tpl with “home_default” code?

        my email is lhrr111@hotmail.com.

        Appreciate your time and help.

        • http://limousineuse.com Harry

          All Fixed, thanks for your time.

          Also another thing that If we could make the Sub Category in Grid display instead of List Display.

          Make the whole page too long.

          Thanks in advance.

        • http://nemops.com Nemo

          Well, you can use the same css but apply it to the uli.inline_list instead, like #subcategories .inline_list li {float:left} etc… ;)

  • http://bijutaniki.com Dodi Markov

    Hallo Nemo!

    Great Tutorial. I have 3 questions:

    1.How to make my shop to have 4 product in row (like my home page – home featured products).
    2. How to add part of description (like my home page – home featured products).
    3. How to add “view” link (like my home page – home featured products).

    I wont to make grid like to be my home featured products :)

    Trying to make it, but don`t know how, help?

    My shop: http://bijutaniki.com (home featured products)
    – category list page: http://bijutaniki.com/25-myjki-prysteni

    Best Regards from Bulgaria!
    Dodi Markov

    • http://bijutaniki.com Dodi Markov

      Correction: Without 1 question, i made it.

  • Uzi

    Thanks for sharing mate,
    It works well on 1.5.2.

    Hmmm, since the left hook is deleted. the main product column being bigger to 735pixel.
    Can you help me to make the featured product column to showing 5 items ?
    by default it show 4 items only,
    this one i mean : image
    because my code skill is very bad :D

    • Uzi

      sorry, don’t mention the first question because i just got it easy to make it defaylt showing more than 4.
      But i got problem on this :
      see this red squared space
      There is no space netween the 4th and 5th item

  • http://mebleprowansalskie.com eftrzy

    Hi there, I will post my problem with the grid display here since no one answered on prestashop.com

    Three things still driving me crazy:

    In subcategories there is that annoying margin right next to the last item in a row, can’t figure where to get rid of it…

    On main page I want to display five products instead of four so I’ve changed

    {if $smarty.foreach.products.iteration%4 == 0}last_row_item

    to

    {if $smarty.foreach.products.iteration%5 == 0}last_row_item

    but nothing changed. Force compile is on.

    The other issue is that I have no add to cart button visible.

    Would you please take a look at it?

    • http://nemops.com Nemo

      Have you targeted the last_row_item in the css to remove the margin? Maybe the overall width of the elements is too much?

      For the add to cart, it should be hidden by the css someplace (can’t remember just now, sorry)

  • H

    Thank you for the tutorial! Everything went fine but in my case the Compare and Sort box will show up next to the products if I have 1 product in the line (where 3 more can be added). So I have the exact same image like your last one, the only difference is that the bottom “Compare” and “Sort Box” are displayed next to the fifth product, instead of underneath it. Do you know how I can fix this? Thanks in advance!

    • http://nemops.com Nemo

      Hi,
      Try adding this before the compare

      <div class="clear">&nbsp;</div>
      
      • http://nemops.com Nemo

        Gosh, i’ts not being copied. Try adding an empty div with the class “clear” before the compare button

        • H

          In which of the files do I need to do this? Thanks!

        • http://nemops.com Nemo

          product_list.tpl ;)

        • H

          I did it like this:

          {if isset($comparator_max_item) && $comparator_max_item}

          but it didn’t work. Maybe I didn’t add it in the proper position?

        • H

          Aha, mine is not being copied either :P I mean this, but without the space in between (hope this does copy):

        • H

          Neither….. well, I added an empty div class = “clear” above the before mentioned line…..

        • http://kvetshop.sk Juraj22

          In global.css => .content_sortPagiBar =>clear: left;

        • http://www.rockymountaingrow.com hornetjb

          I had the same problem with one of my sites and found the source to be in category.tpl so I added:

          Before the 2nd

          Don’t know how category.tpl affected one of my sites because I used Nemo’s grid tutorial before and did not have a problem. On my second site the bottom “compare and sort bar” showed up in the product grid. Anyway this fixed it.

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

    Hello.

    I noticed that my top menu (http://useballet.com.br/usedemo) is different (look and feel) from the demo of PrestaShop (http://demo-store.prestashop.com/).

    What I have to do to be the same?

    Thanks!
    Caram.:

    • http://nemops.com Nemo

      It seems your blocktopmenu module is somehow broken, you should download another prestashop installer and grab it from there

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

        I did like you mentioned, nothing. :(

        Can you send me this folder of the tutorial?

        Thanks!
        Caram.:

        • http://nemops.com Nemo

          It’s just a fresh prestashop folder, nothing special, it’d be like yours

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

          Hum…

          Looking in the “superfish-modified.css” I noticed that many images in the “img” folder aren’t pointed, take a look:


          /*** ESSENTIAL STYLES ***/
          .sf-contener {
          clear: both;
          }
          .sf-right {
          margin-right: 14px;
          float: right;
          width: 7px;
          }
          .sf-menu, .sf-menu * {
          margin: 0;
          padding: 0;
          list-style: none;
          }
          .sf-menu {
          margin: 10px 0;
          padding:0;
          width:980px;/* 980 */
          background: #383838;
          }
          .sf-menu ul {
          position: absolute;
          top: -999em;
          width: 10em; /* left offset of submenus need to match (see below) */
          }
          .sf-menu ul li {
          width: 100%;
          }
          .sf-menu li:hover {
          visibility: inherit; /* fixes IE7 'sticky bug' */
          }
          .sf-menu li {
          float: left;
          position: relative;
          border-right: 1px solid #777;
          }
          .sf-menu a {
          display: block;
          position: relative;
          color:#fff;
          text-shadow:0 1px 0 #333;
          }
          .sf-menu li:hover ul,
          .sf-menu li.sfHover ul {
          left: 0;
          top: 34px; /* match top ul list item height */
          z-index: 99;
          width:auto
          }
          ul.sf-menu li:hover li ul,
          ul.sf-menu li.sfHover li ul {
          top: -999em;
          }
          ul.sf-menu li li:hover ul,
          ul.sf-menu li li.sfHover ul {
          left: 200px; /* match ul width */
          top: 0;
          }
          ul.sf-menu li li:hover li ul,
          ul.sf-menu li li.sfHover li ul {
          top: -999em;
          }
          ul.sf-menu li li li:hover ul,
          ul.sf-menu li li li.sfHover ul {
          left: 200px; /* match ul width */
          top: 0;
          }

          /*** DEMO SKIN ***/
          .sf-menu {
          float: left;
          margin-bottom: 1em;
          }
          .sf-menu a {
          display:block;
          margin-right:2px;
          padding: 0 22px 0 20px;
          line-height:34px;
          border: 0;
          text-decoration:none;
          }
          .sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
          color: #fff;
          white-space:nowrap;
          }
          .sf-menu li li {
          background: rgba(113, 113, 113, 0.9);
          }
          .sf-menu li li li {
          background: rgba(113, 113, 113, 0.9);
          }
          .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
          background: #4E4E4E;
          }
          .sf-menu ul li:hover, .sf-menu ul li.sfHover,
          .sf-menu ul li a:focus, .sf-menu ul li a:hover, .sf-menu ul li a:active {
          background: #4e4e4e;
          outline: 0;
          }
          /*** arrows **/
          .sf-menu a.sf-with-ul {
          padding-right: 2.25em;
          min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */
          }
          .sf-sub-indicator {
          position: absolute;
          display: block;
          right: 10px;
          top: 1.05em; /* IE6 only */
          width: 10px;
          height: 10px;
          text-indent: -999em;
          overflow: hidden;
          background: url('../img/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
          }
          a > .sf-sub-indicator { /* give all except IE6 the correct values */
          top: 11px;
          background-position: 0 -100px; /* use translucent arrow for modern browsers*/
          }
          /* apply hovers to modern browsers */
          a:focus > .sf-sub-indicator,
          a:hover > .sf-sub-indicator,
          a:active > .sf-sub-indicator,
          li:hover > a > .sf-sub-indicator,
          li.sfHover > a > .sf-sub-indicator {
          background-position: -10px -100px; /* arrow hovers for modern browsers*/
          }

          /* point right for anchors in subs */
          .sf-menu ul .sf-sub-indicator { background-position: -10px 0; }
          .sf-menu ul a > .sf-sub-indicator { background-position: 0 0; }
          /* apply hovers to modern browsers */
          .sf-menu ul a:focus > .sf-sub-indicator,
          .sf-menu ul a:hover > .sf-sub-indicator,
          .sf-menu ul a:active > .sf-sub-indicator,
          .sf-menu ul li:hover > a > .sf-sub-indicator,
          .sf-menu ul li.sfHover > a > .sf-sub-indicator {
          background-position: -10px 0; /* arrow hovers for modern browsers*/
          }

          /*** shadows for all but IE6 ***/
          .sf-shadow ul {
          background: url('../img/shadow.png') no-repeat bottom right;
          padding: 0 8px 9px 0;
          -moz-border-bottom-left-radius: 17px;
          -moz-border-top-right-radius: 17px;
          -webkit-border-top-right-radius: 17px;
          -webkit-border-bottom-left-radius: 17px;
          }
          .sf-shadow ul.sf-shadow-off {
          background: transparent;
          }
          li.sf-search {
          background: inherit;
          float: right;
          line-height: 25px;
          }
          li.sf-search input {
          -moz-border-radius: 0 5px 5px 0;
          padding: 3px 0;
          padding-left: 20px;
          margin: 6px 6px 0 0;
          background: #fff url('../img/search.gif') no-repeat left center;
          border:1px solid #777
          }

          /* hack IE7 */
          .sf-menu a, .sf-menu a:visited {height:34px !IE;}
          .sf-menu li li {
          width:200px;
          background:#726f72 !IE;
          }

          Thanks for the replies!
          Caram.:

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

        Hum…

        Looking in the “superfish-modified.css” I noticed that many images in the “img” folder aren’t pointed, take a look:


        /*** ESSENTIAL STYLES ***/
        .sf-contener {
        clear: both;
        }
        .sf-right {
        margin-right: 14px;
        float: right;
        width: 7px;
        }
        .sf-menu, .sf-menu * {
        margin: 0;
        padding: 0;
        list-style: none;
        }
        .sf-menu {
        margin: 10px 0;
        padding:0;
        width:980px;/* 980 */
        background: #383838;
        }
        .sf-menu ul {
        position: absolute;
        top: -999em;
        width: 10em; /* left offset of submenus need to match (see below) */
        }
        .sf-menu ul li {
        width: 100%;
        }
        .sf-menu li:hover {
        visibility: inherit; /* fixes IE7 'sticky bug' */
        }
        .sf-menu li {
        float: left;
        position: relative;
        border-right: 1px solid #777;
        }
        .sf-menu a {
        display: block;
        position: relative;
        color:#fff;
        text-shadow:0 1px 0 #333;
        }
        .sf-menu li:hover ul,
        .sf-menu li.sfHover ul {
        left: 0;
        top: 34px; /* match top ul list item height */
        z-index: 99;
        width:auto
        }
        ul.sf-menu li:hover li ul,
        ul.sf-menu li.sfHover li ul {
        top: -999em;
        }
        ul.sf-menu li li:hover ul,
        ul.sf-menu li li.sfHover ul {
        left: 200px; /* match ul width */
        top: 0;
        }
        ul.sf-menu li li:hover li ul,
        ul.sf-menu li li.sfHover li ul {
        top: -999em;
        }
        ul.sf-menu li li li:hover ul,
        ul.sf-menu li li li.sfHover ul {
        left: 200px; /* match ul width */
        top: 0;
        }

        /*** DEMO SKIN ***/
        .sf-menu {
        float: left;
        margin-bottom: 1em;
        }
        .sf-menu a {
        display:block;
        margin-right:2px;
        padding: 0 22px 0 20px;
        line-height:34px;
        border: 0;
        text-decoration:none;
        }
        .sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
        color: #fff;
        white-space:nowrap;
        }
        .sf-menu li li {
        background: rgba(113, 113, 113, 0.9);
        }
        .sf-menu li li li {
        background: rgba(113, 113, 113, 0.9);
        }
        .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
        background: #4E4E4E;
        }
        .sf-menu ul li:hover, .sf-menu ul li.sfHover,
        .sf-menu ul li a:focus, .sf-menu ul li a:hover, .sf-menu ul li a:active {
        background: #4e4e4e;
        outline: 0;
        }
        /*** arrows **/
        .sf-menu a.sf-with-ul {
        padding-right: 2.25em;
        min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */
        }
        .sf-sub-indicator {
        position: absolute;
        display: block;
        right: 10px;
        top: 1.05em; /* IE6 only */
        width: 10px;
        height: 10px;
        text-indent: -999em;
        overflow: hidden;
        background: url('../img/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
        }
        a > .sf-sub-indicator { /* give all except IE6 the correct values */
        top: 11px;
        background-position: 0 -100px; /* use translucent arrow for modern browsers*/
        }
        /* apply hovers to modern browsers */
        a:focus > .sf-sub-indicator,
        a:hover > .sf-sub-indicator,
        a:active > .sf-sub-indicator,
        li:hover > a > .sf-sub-indicator,
        li.sfHover > a > .sf-sub-indicator {
        background-position: -10px -100px; /* arrow hovers for modern browsers*/
        }

        /* point right for anchors in subs */
        .sf-menu ul .sf-sub-indicator { background-position: -10px 0; }
        .sf-menu ul a > .sf-sub-indicator { background-position: 0 0; }
        /* apply hovers to modern browsers */
        .sf-menu ul a:focus > .sf-sub-indicator,
        .sf-menu ul a:hover > .sf-sub-indicator,
        .sf-menu ul a:active > .sf-sub-indicator,
        .sf-menu ul li:hover > a > .sf-sub-indicator,
        .sf-menu ul li.sfHover > a > .sf-sub-indicator {
        background-position: -10px 0; /* arrow hovers for modern browsers*/
        }

        /*** shadows for all but IE6 ***/
        .sf-shadow ul {
        background: url('../img/shadow.png') no-repeat bottom right;
        padding: 0 8px 9px 0;
        -moz-border-bottom-left-radius: 17px;
        -moz-border-top-right-radius: 17px;
        -webkit-border-top-right-radius: 17px;
        -webkit-border-bottom-left-radius: 17px;
        }
        .sf-shadow ul.sf-shadow-off {
        background: transparent;
        }
        li.sf-search {
        background: inherit;
        float: right;
        line-height: 25px;
        }
        li.sf-search input {
        -moz-border-radius: 0 5px 5px 0;
        padding: 3px 0;
        padding-left: 20px;
        margin: 6px 6px 0 0;
        background: #fff url('../img/search.gif') no-repeat left center;
        border:1px solid #777
        }

        /* hack IE7 */
        .sf-menu a, .sf-menu a:visited {height:34px !IE;}
        .sf-menu li li {
        width:200px;
        background:#726f72 !IE;
        }

        Thanks for the replies!
        Caram.:

        • http://nemops.com Nemo

          You’re right. It seems that they changed it then. You have to downoad a 1.5.2 version of Prestashop to have it

Store Top Sales

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