PrestaShop subcategories as grid

Today i want to show you how to change subcategories view in your prestashop store. By default prestashop in version 1.5.x displays subcategories in list with descriptions. I will show step by step how you can easily change it.  Are you ready  to display subcategories as a grid?  so, let's go ;)

default subcategories view in default prestashop template

And we want to modify view of the list to:

default prestashop theme and subcategories grid display

What we have to change?

We will modify two things, theme category.tpl file and it's css styles from category.css stylesheet file. From category.tpl file we will remove the subcategory description (we will move it to the category image alternative text). In the css styles file we will change appearance of the categories list.

Category.tpl template file contents

We will edit category.tpl file located in your theme directory (themes/your_theme/category.tpl). So please open this file. If you're using default theme - search for code that i pasted below. If you use non-default template - whole code should looks similar. Here it is, a piece of prestashop subcategories code:

<div id="subcategories">
			<h3>{l s='Subcategories'}</h3>
			<ul class="inline_list">
			{foreach from=$subcategories item=subcategory}
				<li class="clearfix">
					<a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" title="{$subcategory.name|escape:'htmlall':'UTF-8'}" class="img">
						{if $subcategory.id_image}
							<img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'medium_default')|escape:'html'}" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
						{else}
							<img src="{$img_cat_dir}default-medium_default.jpg" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
						{/if}
					</a>
					<a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" class="cat_name">{$subcategory.name|escape:'htmlall':'UTF-8'}</a>
					{if $subcategory.description}
						<p class="cat_desc">{$subcategory.description}</p>
					{/if}
				</li>
			{/foreach}
			</ul>
			<br class="clear"/>
</div>

Remove the subcategory description

We have to removesubcategory description from code mentioned above. Subcategory description code looks like:

{if $subcategory.description}
    <p class="cat_desc">{$subcategory.description}</p>
{/if}

You can remove it or comment it (maybe it the future you will want to use it one again.. who knows?). To comment the code use smarty {* comment *} method:

{*
 {if $subcategory.description}
    <p class="cat_desc">{$subcategory.description}</p>
{/if}
*} 

We don't want to lose seo. Let's move the description in the image alt tag

As you notied above, category description variable looks like: {$subcategory.description}. We will use it in the alt="" tag. Here is the code for it:

{if $subcategory.id_image}
    <img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'medium_default')|escape:'html'}" alt="{if $subcategory.description}{$subcategory.description}{/if}" width="{$mediumSize.width}" height="{$mediumSize.height}" />
{else}
    <img src="{$img_cat_dir}default-medium_default.jpg" alt="{if $subcategory.description}{$subcategory.description}{/if}" width="{$mediumSize.width}" height="{$mediumSize.height}" />
{/if}

Use code above instead old one. Save changes.  Make sure that you've got force compilation turned to on. It's necessary while you're workin on template files. After all, you can turn force compile off. Okay, now it's time to css styles.

Css stylesheet file modification

Open the category.css file located in css subdirectory. (themes/your_theme/css/category.css). This is file with css styles related to the category page. 

Display subcategories block as a block

First important change is related to the whole #subcategories div block. We need to change its styles to block. In category.css file near the line 36 you've got something like:

#subcategories {
margin-top: 15px;
}

change it to:

#subcategories {
margin-top: 15px;
clear:both;
display:block;
overflow:hidden;   
}

Change subcategories list to grid

Now it's time to the most important thing in whole process. We need to change <li> objects. <li> objects is a row with subcategory photo and subcategory name. By default <li> objects appear as a list. To display each <li> as an "element" of grid, we have to change <li> object css styles. In category.css file near line 50 you've got code:

.inline_list li {
  padding: 10px 0;
  border-bottom: 1px dotted #ccc;
}

change it to:

.inline_list li {
  text-align: center;
  float: left;
  display: inline-block;
  width: 96px;
  height: 100px;
  border: 1px dotted #ccc;
  margin: 4px;
}

It's almost everything...

As you probably noticed, category images arent in the middle of the box, in this case it's necessary to change their css styles too.  And this is what we want to achieve:

In the category.css file near line 54 you've got:

.inline_list li .img {
  float: left;
  margin-right: 15px;
}

change it to:

.inline_list li .img {
  display: block;
  float: left;
  margin-top: 15px;
}

And the effect is

if you have any questions related to this tutorial - feel free to start discussion in the comments field below. Thanks!