3 easy steps to add products to the Magento Home Page (or any CMS page)
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:
- Removing the Compare function in Magento, the easy way
- Top 3 Solutions when your Magento Categories are not displaying
- How to Bulk Enable Products when Google Checkout is Disabled in Magento
- How to install MAMP on your Leopard Mac
- Mailchimp + Magento: How to get autoresponders working with the API
Tagged as categories, cms, homepage, Magento, products + Categorized as Featured, Magento, Web Development
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?