Magento Basics – How To Create Sub Category Grid
Clients have often asked me why including a sub category grid on product pages is not standard functionality of Magento. Most eCommerce sites require this type of navigation.
Although this is not “out of the box” functionality it is relatively easy to implement and will improve the user experience of your store.
Create Sub Category Grid
Create The Template File
1. Firstly you will need to create a new PHTML page template file. Name this file ‘sub-category-grid.phtml’.
2. upload to:
public_html/app/design/YOUR_THEME/YOUR_PACKAGE/page/html/
3. Include the following in your new PHTML file.
<?php
$category = Mage::getSingleton('catalog/layer')->getCurrentCategory();
$categories = $category->getCollection()
->addAttributeToSelect(array('name', 'image'))
->addAttributeToFilter('is_active', 1)
->addAttributeToFilter('include_in_menu', 1)//if not to show in nav
->addIdFilter($category->getChildren())
?>
<?php $_columnCount = 4; ?>
<?php if ($i++%$_columnCount==0): ?>
<ul class="catblocks">
<?php foreach ($categories as $category): ?>
<li class="item<?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>">
<a href="<?php echo $category->getUrl() ?>"><img src="<?php echo Mage::getBaseUrl('media') . 'catalog' . DS . 'category' . DS . $category->getImage() ?>" alt="<?php echo $this->htmlEscape($category->getName()) ?>" />
<span><?php echo $category->getName() ?></span></a>
<?php $i++ ?>
</li>
<?php endforeach; ?>
<?php endif; ?>
</ul>
Create The Static Block
Now we have to create a static block to call the sub-category-grid.phtml file you have just made.
1. Create your static block. Make sure you give this a relevant name & identifier.
CMS -> Static Block -> Add New Block
2. Insert the following into your new static block
{{block type="page/html" template="page/html/sub-category-grid.phtml"}}
3. Now set the new static block to show on category pages.
Catalog -> Category -> DESIRED CATEGORY -> Display Settings -> Display Mode -> Static block only
Catalog -> Category -> DESIRED CATEGORY -> Display Settings -> CMS Block -> Your new static block
4. Save & refresh your cache.
You should be all set. This is tested in 1.9.1 and using the above technique your sub category grid should be using “out of the box” responsive CSS.
Magento Sub Category Grid
Conor Tomkins
Senior PHP Developer
Working with PHP applications since the age of 17. I have a wide range of knowledge on most PHP open source platforms. I must admit, my favorites are Magento & Wordpress!
Hello, Thanks for putting this guide together!
I followed the instructions to create a category grid on my magento storefront but am running into a display bug in my implementation. I am displaying 16 categories in this grid. The grid creates 4 columns but it is displaying like the diagram below (x’s represent category listings, 0’s represent blank spaces.)
x,x,x,0
x,x,x,0
x,x,x,0
x,x,x,0
x,x,x,x
do you know how i could make it fill like this?:
x,x,x,x
x,x,x,x
x,x,x,x
x,x,x,x
Thanks again!
Hello Zack,
You need to add a custom rule to your madisonisland.css. This rule will remove the margin from list item with the class “Last”.
.catblocks .last {margin-right:0 !important;}
Hope this helps.
Hi Conor
Thank you for sharing this tip!
I have a problem that this creates a list view not grid
How should I fix this?
Hello,
I’ve had a look at your website, it appears that you are missing the default CSS which is packaged with the RWD template. This could happen if you are running another template.
Add this to your themes main .css – this has come directly from a default copy of RWD: madisonisland.css
/* ============================================ *
* Category Landing Pages
* ============================================ */
.category-image {
position: relative;
}
.catblocks {
float: left;
padding: 0 0 20px 0;
width: 100%;
}
.catblocks li {
position: relative;
float: left !important;
width: 23%;
margin-right: 2.66667%;
margin-bottom: 10px;
padding: 10px;
}
.catblocks li:hover {
border-color: #3399cc;
}
@media only screen and (max-width: 770px) {
.catblocks li {
width: 49% !important;
margin-right: 2% !important;
}
.catblocks li:nth-child(even) {
margin-right: 0 !important;
}
}
@media only screen and (max-width: 479px) {
.catblocks li {
width: 100% !important;
margin-right: 0 !important;
float: none;
}
}
.catblocks li:last-child {
margin-right: 0 !important;
}
.catblocks-home li img {width:85% !important; margin:auto;}
.catblocks li img {
width: 100%;
max-width: 100%;
}
.catblocks li:hover a span {background-color: #39C; color:white;}
.catblocks li a span {
color: #39C;
position: absolute;
background-color: white;
border:1px solid #39C;
border-radius:6px;
font-family: raleway;
font-size: 17px;
text-transform: uppercase;
text-align: center;
bottom: 0px;
left: 0px;
width: 100%;
padding: 5px 10px;
margin-right: 10px;
}
.catblocklinks a {
color: #FFFFFF;
text-decoration: none;
}
Thank you Conor!
Now it works as supposed.
You are the man.
Have to fix that css colors and fonts.
Working fine with css modification on RWD. We only have 1 question, we have insert the variable in the page directly for the home page, we have the same result except before the picture have a dot. Do you know how to erase this?
For another time thanks a lot!!
Hello,
Add this additional line to your CSS.
.cms-home .catblocks li {list-style:none !important;}
This should resolve your issue.
Let me know if you have any other issues.
It working now with insert list-style: none; in the li section.
If you do not specify which list you in which to remove the list style, it will remove the bullet point on all un-ordered lists on you site. This includes within product descriptions.
Thanks for fast reply, we also note in the RWD themes for the mobile, all list is completely at right and not center. Can we add something in css?
Hello,
Sorry for the delay in response!
I see you are running a custom template and not the default RWD. Some of the custom CSS is interfering with the responsiveness of the grid.
Add this rule to your CSS – this should fix the issue with the mobile responsiveness.
@media only screen and (max-width: 770px) {
.std .catblocks li {margin-left:0 !important;}
}
Hope this helps.
Conor, I just wanted to tell you that of all the research I’ve done in order to build my site yours has truly been some of the most relevant and updated. I have tried so many peoples “IDEAS” of what “Should” be done and followed it to the T only to find out that on newer magento versions it breaks your site. Out of all of this deep sea of the web your up there in my top 3 sites including Magento’s own. I cannot thank you enough for sharing your knowledge and your time. As a true professional who knows what he is talking about and does it right. I salute you. 🙂
Hi guys, not sure how other versions, but in 1.9.2.3 you need to add permissions for blocks.
System->Permissions->Blocks
Add New Block
page/html status Allowed
And then everything works like a charm.
Hello, great addition to the post!
This technique works on the latest version of Magento but on any version 1.9.2.x or above – or with the SUPEE-6788 patch applied, Egle’s step is required.
Thx a lot your comment helped me a lot!!! cheers
This only works for first level and 2nd level subcategories. I have a 3th level category and enabled the above on second level, but then it stops working. Any ideas on how to make this work?
Hello Karl,
Please provide me email me with your web address. I will have a look.
Kind Regards
For 1.9.2 I had to give the block permission and as Iḿ using a different theme (not the standard) i had to add the CSS code from Madison Island (default magento 1.9.2 theme)
Thx for this post
I cannot work out where my Theme and My package folders are – I can create a theme folder but the Package is a bit harder to name as a relevant Package name
Hello, Sorry but I do not understand your issue.
Please contact us by email or live chat and we can try and help.
Thank you
Thanks Conor – I am really impressed by your approach and attitude towards helping those with less knowledge and understaning about Magento – Very happy with the grid on my categories pages now 🙂 – Thanks
Is it the same code for magento 2 as well??. Since the directory structures have changed and where do i keep this code?
This code is untested in Magento 2 & will likely not work.
Hi Connor, for some reason the categories arent following position order, any ideas?
Very sorry for the delayed reply. You can add the following code to order the categories in the order which you set in the administrator panel:
->addAttributeToSort(‘position’);
Hi Conor. I have implemented what you said correctly, however still nothing appears. I am using the accessshop modified theme. Also, is it possible to add text above the sub categories?
Hello, please read one of the previous comments by “Egle on March 10, 2016 at 3:38 pm” – please tell me if you have added permissions for the new block.
In regards to having the name above the image simple change the position of this line:
getName() ?>
I hope this helps.
Hey, great guide, I got it working on one of my categories but can only get a list display rather than showing the sub cats as a grid.
I was going to try the amendment you suggested above but not sure where to find my themes main .css file.
Any tips would be much appreciated, thanks!
Hello, if you are still having issues with this – please contact me at conor@conortomkins.co.uk