Adding a dynamic product grid or list to any static page in Magento is as easy as adding a few lines of code. The challenge is knowing which lines to add and where to put them.
Magento is a popular open-source ecommerce platform that has been downloaded more than 750,000 times, according to Magento’s website. It offers dozens of excellent built-in features and enough flexibility to fit any ecommerce design or requirement. But Magento can seem complicated and could overwhelm a new designer or do-it-yourself entrepreneur.
In this “Web Design Tips,” I hope to show you just how easy it is to make changes to the platform’s default theme without modifying the PHP. In particular, I will (1) show you how to use template path hints to locate PHTML and XML files, and (2) demonstrate how to modify the static home page using the content management section in the administration panel.
Using Template Path Hints to Locate XML and PHTML Files
Magento offers a terrific user experience, and has an easy to use back-end. But to dynamically generate all of that ecommerce goodness, Magento uses a lot of files. In the implementation that I used as an example in the video (above) associated with this Web Design Tips, there are nine cascading style sheets, 25 XML files, and more than 40 PHTML templates.
Fortunately, there is an easy tool for locating files. To find that tool, you’ll need to log in to the Magento administration panel. Then navigate to System > Configuration.
On the configuration page, look for a drop-down menu at the top of the left navigation. It should read “Current Configuration Scope.” If you have more than one website or store operating from the Magento back-end, you’ll need to select the website or store from the drop-down menu.
Next, at the bottom of left-hand navigation, select “Developer.”
Under the “Debug” section of the developer page you should see an option for “Template Path Hints.” Set this option to “Yes” and save by clicking the “Save Config” button in the upper-right hand side of the page.
Now reload the home page of your Magento store. You will see several red tags and boxes. These tags identify which PHTML template is being used for each section of the page.
As an example, you may see a path hint like frontend/default/default_theme/template/checkout/cart/sidebar.phtml
. With this path you can easily locate the proper PHTML file in your server’s file management system. You can also identify any related XML file. For the example path, an associated XML file could be found at frontend/default/default_theme/layout/checkout.xml
. Notice that the folder after “template” in the example path gives the name of the corresponding XML file.
Modify Templates in Magento
Now that we’ve located the template and XML files that underlie our page, we can make many changes or even copy code from one page and apply it to another.
I like the product grid that appears on category and sub-category pages in Magento, and I want to replicate it on the home page. Using the template path hints tool, I located the proper PHTML file for the product grid, catalog/product/list.phtml.
Next, to change the home page, I will go back to the Magento administration panel, or back-end, and navigate to CMS > Manage Pages. Then, I need to select my static home page to open an editing tool.
In the content section, I simply need to clear out any unwanted HTML and add a call for list.phtml. The call should not nest inside of a <div>
that will restrict its size.
That call will look like this.
<code>{{block type="catalog/product_list" category_id="35" template="catalog/product/list.phtml"}} </code>
When I save my changes and reload the store’s front-end, there is a product grid on my home page, or not. At this point you may get an error that says, “There are no products matching the selection.”
If you see this message the problem has to do with the category ID you selected—the category_id=”35″ in our call. To put products in the grid you must identify a valid category ID. Once that is done, you’ll have a nice product grid right on the home page of your Magento store.
This was short tutorial was greatly needed. As you know I’ve been an outspoken supporter of Magento but I had to go with another solution for the store that I’m about to launch because it was taken me just too much time to make the modifications that I needed.
Thanks for posting this quick, informative article and video!
Good tutorial, Their is definitely a shortage of how to tips for Magento. Hopefully the latest update 1.3 will as they say, improve the speed of page loading times. As stated in the video, all these templates, xml files and numerous css files really do slow Magento down considerably. So much so, that the last website i put up was small and i hand coded this in a fraction of time that it would have taken just to setup Magento. Keep up the good work.
Great tips indeed.
As one of the leading integrators of Magento we are currently working on a visual interface to allow people to modify the layout of their themes.
It should be fun…
eCommerce-Themes.com
@frank651
Thank you for the kind words. I am very glad that you liked the tutorial. I hope to do more around Magento Commerce, as I believe it is the one of the top ecommerce platforms currently available (the only one I personally recommend). For example, I am considering a tutorial and setting up payment gateways and on establishing multiple instances of the CMS that all pull from the same database (wish me luck that could be a long one).
Not "Hand Coding"
But I must say that if I understand what you mean by "hand coded," it is never a good idea.
I understand "hand coding" to mean that you wrote the HTML for every page on the site, including every product detail page, without using PHP or some other language to make calls to a database. If that is what you meant, I would encourage you not do build a site that way. Making changes to the site will be far too cumbersome, and you will never be able to offer features like product comparisons, wish lists, or customer accounts.
As I mentioned in the article, Magento can be a little slow to load compared to a site running on WordPress or other lightweight content management systems, but it is still very acceptable. And it is absolutely worth the development time.
Finally, I cannot believe that hand coding any ecommerce website could be as quick as developing a site in Magento. (And all of the repetitive typing associated with hand coding would kill me.) It may just be a matter of not knowing your way around the platform, which is something we can take care of with a few more Magento tutorials.
You may also want to visit the Magento forums. http://www.magentocommerce.com.
This is a good walkthrough – one that I am sure many newcomers to Magento will find useful. Another good resource for information is #magento on Freenode.
Great tutorial. I found this much easier to follow than the screencasts on the magento site. Thanks
Fantastic tutorial! Please post more!
I nominate you to put together a tutorial series for Magento. I will be the first in line to buy it. You have a way of making Magento easy to understand.
Thanks for spending the time in making this tutorial. More please!
@ben,
I could not find the resource you mentioned. Would you mind posting the URL?
@jeffjohnson,
Thanks for the vote of confidence. I will be sure to do more articles related to Magento.
Are there any specific issues that you would like to see me cover?
wow thanks a lot. i learned so much. pls do more tutorials on magento. thanks again.
Dude, I spent about 6 hours looking for this and I was pulling my hair out. I just got a new job and the new boss is in high gear and wants everything done right now. I just started working with Magento and I couldn’t move fast enough. About an hour before quitting time I found your video. Big lifesaver. It is awesome. Make some more! Anyways, I put an entry on my blog with a link to your page – what an awesome resource. Thanks
Thank you for this tutorial.
Everybody should watch it before going into the code.
Yes, indeed, Magento is a bit complicated for the beginner but once you have understood the content of this video, a bit of XHTML/CSS knowledge + designing talents + a bit of effort, you are able to build a high quality website.
I hope you will publish more videos and I have some ideas that might be interresting:
1/ show how powerful it is to use Firebug (additionaly) to create a Magento template
2/ show how easy it is to deploy a template (and activate it)
@Irwan, Thanks, those are good ideas. It sounds like you have some experience using Magento yourself. Have you developed a site with it?
@Irwan, by the way are you involved with the Ecommerce Archive?
@Tim Malone,
Thanks for the very kind comment. Coming from you that is very high praise. Again thanks.
FYI, three of my kids are involved in high school band. They liked the Lancer videos, especially, http://www.timmalone.net/video/Drumline%20DVD.wmv
i follow up your tutorial. In my question, my home page displays that error.how can i avoid that.pls give me the correct answer as soon as possible.
Thank you..
@laleenaegodage,
I will try to help. So you were placing the grid on your homepage and got an error? Can you please provide me with more details?
Hi Armando,
Great tutorial, Thank you!
It is very cool that you can add the product grid anywhere on a CMS page by simply adding
{{block type="catalog/product_list" category_id="35" template="catalog/product/list.phtml"}}
I have set up Magento to display the products in the list form by default. Any clues on how I can modify the above code so products on this particular CMS-page will be listed as a grid by default?
@Thomas, I just want to make sure I understand, you want your regular product category pages to be in grid form, but a CMS-page in list form, right?
Hi Armando,
The other way around – I list regular product categories in list form. On some CMS pages I would like to list the produtcts in grid form.
Btw here is a cool way for using this feature:
Say you want to list some core products (not necessarily new ones, specials nor recommended ones) on the frontpage or another CMS page.
First you create a new root category and set it to in-active. In this root category you create a new sub-category, set it active and add or copy the related products to this sub-category .
Now this new root category doesn’t show up anywhere and you can show the sub-category by using the
{{block type="catalog/product_list" category_id="35" template="catalog/product/list.phtml"}}
Hi Armando,
This solution does not work on google chrome or safari. The grid looks out place. Please advise!
Great video and tutorial. It was friendly, well presented and I was able instantly to implement the solution I was looking for. Well done!
@Dave Lawson, Thank you. I am glad it helped.
I have however noticed that when inserting a product list in this manner the list of products does not include the category pagination links or what Magento templates seem to refer to as pager.
Within the list.phtml file I notice the call to the toolbar:
<?php echo $this->getToolbarHtml() ?>
And the toolbar does in fact include the pager code. Is there a layout file that needs to be updated?
What is the section that specifically controls a simple product list?
Thank you for the tips. Used it for my work.
Good tip about the Template Hinting. It’s a shame they don’t mention this in any tutorials when building a site and even when they do, they don’t actually explain that its under the ‘debug’ section. Thanks!
How about using a Magento Extension for the non-technical folks.
We’ve just developed one and hopefully this will server the purpose. We welcome the feedback.
http://www.fmeextensions.com/magento-add-products-to-cms.html