I wanted to add a small selection of products to the Magento homepage, and I thought I’d quickly write up how I did it, because it brings together a few little tidbits from around the net. This solution will use a specific category which can either be an actual category with a few products in it (e.g. specials), or one you created specifically for displaying on the home page (let’s call it ‘home page featured’). It takes only 3 simple steps as shown below.
Step One
First add this to your CMS page where you want the products to appear (I’ll assume from here on out that it’s your cms home page):
{{block type="catalog/product_list" category_id="YOUR_CATEGORY" template="catalog/product/list.phtml"}}Notice you have to put your chosen category id in the code where I have YOUR_CATEGORY as a placeholder.
This will make the products show up but you’ll notice two annoying things probably. The first is the category you made for featuring showed up in your navigation menu and second the toolbar for paging and sorting may show up, which you won’t want if you just have 3-6 products featured on your home page.
Step Two
So the second step is to hide away those toolbars on the cms homepage. We are using a standard magento template to display the prodcts (that’s the template="catalog/product/list.phtml" from above) so it’s cleaner and better for upgrading/template maintenance if we do not go and edit it just to remove the toolbars. Instead let’s just throw a display:none in just for this page on the two css classes that matter, the .pager and .sorter.
That will look like this, notice it is specifically the cms-home page that is being styled, you’d do the same for your page:
.cms-home .pager, .cms-home .sorter { display: none; }
So this hides them away, the html is still there, but no one will see it. The template is unchanged, and easily upgradeable.
Now the last issue is the nav menu, if you chose to use a new category especially for home page featured products then you won’t probably want that showing up in the nav menu.
Step Three
The 3rd and final step is a simple config option to disable categories from showing in the menu. It will allow you to have categories that can be used for display in parts of the store, but that will not show on the menu. The Is Active option is what you need to set to ‘no’ in order to hide the faux category.
So we put all of those simple 3 steps together and we get this (you can click through for the full size image):
RealNappiesUSA Magento Home page showing the simple category display technique
You might also be interested in:
Hi! I'm Ashley Schroder, a
where do we put the code
.cms-home .pager, .cms-home .sorter {
display: none;
}
on the CMS of the homepage?
Hi, the code goes in your css file, or the default css file if you have not added your own. Though I recommend you do!
The hidden category method works well for selecting frontpage products, only the css does not hide the toolbars.
In my cms settings the home page reference is ‘home’. I have tried using
.cms-home .pager, .cms-home .sorter {
display: none;
}
and
.home .pager, .home .sorter {
display: none;
}
in boxes.css, but nothing happens.
Does this method not work with 1.3.2.4, or am i doing something wrong?
Hi, you could post/email a link to your page and I’ll take a quick look. The tool I use to take a quick look is called firebug, it’s a plugin for firefox that by the sounds of things you don’t have. If you do, you can inspect any html element and check what css styles are (or are not) being applied. You can actually do about 1000 other useful web developer things with firebug, it really is the number one must have tool and I can’t recommend it to you enough.
Not to worry – since posting I duplicated the ‘list.phtml’ file, removed the toolbar references in that, then referenced the new file in my cms block.
Ta for the firebug recommendation – ill look into it.
Where are you entering this code? I’m a NOOB to all of this stuff.
I got it to show products but way off the screen by adding step 1 to my cms file under Content in the admin panel, but i can’t figure out what files you are altering for step 2 and what exactly step 3 is supposed to do?
We were all noobs at one stage.
Step 1 goes in the CMS Page content itself – you input it using the Manage Pages section of Magento CMS – it’s layout might depend on the number of columns you’re using? Post a link to the page if you want me to take a quick look.
Step 2 goes in a CSS file in the skin directory, but if that sounds too hard, you can put it at the top of your CMS page too in a style block
Step 3 is just done using the Manage categories screen.
Dear, Ashley i want to add left menu of subcategories at my product page but i could not got the solution if u could help me to tackle this problem i will be highly thankful.i will send u a screen shot if u give me your email.
i am waiting your reply.
thanx in advance
simon
Hi, Simon – thanks for getting in touch, I suggest searching on Google for magento code that will show products from the same category on the product page. Then once you have that working, tackle the next step, which is to slightly modify that code to grab sub categories of the current products category and list those.
thanx Ashely for your precious time but i did the part of main menu.my store main menu working properly but after lots of searching in google still i could not got the solution i am using 1.3.2.4 version of magento if u colud give me some code or links which will help me.
which will help me displaying subcategories in left menu
example in your cms home page
.cms-home .pager, .cms-home .sorter {
display: none;
}
{{block type=”catalog/product_list” category_id=”4″ template=”catalog/product/list.phtml”}}
Hi,
only pager is hide, but sorter is still there!!!
Any help?
i am waiting your reply.
thanx in advance
Thank you for posting. I would like to create page where after clicking on image product is added to basket. Is that possible?
I create a magento theme. In that, in the navigation menu the sub categories are not showing in the frontend when iam opening the website..
can u give me the solution for this kind of problem..
I am working on this site: http://www.cavellequipment.com/ and I need to get just the grid of category thumbs/links from this page: http://www.cavellequipment.com/index.php/products.html onto the homepage. Would I use a similar code to do this?
Thanks!
-Mike
Hi, I think you’d use a category list, not a product list – but same principle. Let us know how you get on.
This is a great article on how to use code snippets in design. I purchased a magento template for my first magento site that gave me great insight on how to use xml markup. For those still following along may be interested in a code hack for finding category ids. It is provided by my own magento host at http://www.sonassi.com/knowledge-base/quick-script-to-export-categories-with-ids/.
Keep up the good work.
regards Tony
Looks like this no longer works in version 1.4. Any idea how to list products from a category in this new version?
How do I add category products to a .phtml file?? I have looked everywhere without luck! Thank you.. i want to add category products to the search results page.
how to show product of various category on the homepage
ths…
Works great for me, thanks. The only thing is how do I display 4 products in a row and how do I limit the number of new products? Would be very grateful for a help.
My products are showing from my correct category on my home page, and I uploaded the images on each of the products through Magento. However, they are not showing up on the home page product preview slider or on the product page. Any ideas on what I’m doing wrong?
To hide the sorter and remove the small blank spaces, try this css instead.
.cms-home .toolbar, .cms-home .toolbar-bottom {
display: none;
}
without the spaces in the style tags.
It hides the entire toolbar element that contains the sorter and pager.
For those who don’t know where to put this:
Put it at the top of your “content” section for your homepage (this is the lazy way).
I’ve only tested this in 1.5 but it should work for all versions that use the div classes toolbar and toolbar-bottom.
Hi
where we need to add
{{block type=”catalog/product_list” category_id=”YOUR_CATEGORY” template=”catalog/product/list.phtml”}}
if in css file – where is it
Thanks
I want to show paging on home page list.
Is that possible ?
i want to display the products of different categories using multiple slider….
{{block type=”catalog/product_list” category_id=”YOUR_CATEGORY” template=”catalog/product/featured.phtml”}}
by using this code i do get 1 slider of first category. bt by repeating this code my slider vanished and the products are lined up vertically…..
Ashley…..you save my life!!!!, hahaha
Thank you for your guide, for your help, for your site!!!
I could finally delete the toolbar on my home page of site!!
I spent at least 3 days for understand how to do looking around….then finally i found your site!
Thank you again
David, from Italy
….anyway i found that it works on Internet Exploer, but not on Firefox… is it normal?
Thanks for this guide, just implemented it on my site
Really great post. As i implement this in my site and it really works.
Thanks for sharing such a useful stuff.
Hi,
I try this to add products on My home page but it shows error. can anyone please tell me what i have to do?