Practical Ecommerce

Web Design Tips: Configuring Templates, Adding a Product Grid in Magento

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.

Modifying a Static Home Page in Magento


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.

Magento Path

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.


Armando Roggio
Armando Roggio
Bio  |  RSS Feed


Get the Practical Ecommerce RSS feed

Comments ( 29 )

  1. Chris "Cartel" English April 1, 2009 Reply

    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.

  2. Nathan April 2, 2009 Reply

    Thanks for posting this quick, informative article and video!

  3. frank65l April 2, 2009 Reply

    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.

  4. VisualFrames April 2, 2009 Reply

    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

  5. Armando Roggio April 2, 2009 Reply

    @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.

  6. ben April 2, 2009 Reply

    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.

  7. tom_rishworth April 2, 2009 Reply

    Great tutorial. I found this much easier to follow than the screencasts on the magento site. Thanks

  8. jeffjohnson April 4, 2009 Reply

    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!

  9. Armando Roggio April 7, 2009 Reply

    @ben,
    I could not find the resource you mentioned. Would you mind posting the URL?

  10. Armando Roggio April 7, 2009 Reply

    @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?

  11. geemint April 14, 2009 Reply

    wow thanks a lot. i learned so much. pls do more tutorials on magento. thanks again.

  12. Tim Malone April 22, 2009 Reply

    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

  13. Irwan April 28, 2009 Reply

    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.

  14. Irwan April 28, 2009 Reply

    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)

  15. Armando Roggio May 7, 2009 Reply

    @Irwan, Thanks, those are good ideas. It sounds like you have some experience using Magento yourself. Have you developed a site with it?

  16. Armando Roggio May 7, 2009 Reply

    @Irwan, by the way are you involved with the Ecommerce Archive?

  17. Armando Roggio May 7, 2009 Reply

    @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

  18. laleenaegodage May 18, 2009 Reply

    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..

  19. Armando Roggio May 18, 2009 Reply

    @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?

  20. Thomas June 4, 2009 Reply

    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?

  21. Armando Roggio June 4, 2009 Reply

    @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?

  22. Thomas June 13, 2009 Reply

    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"}}

  23. adjees July 11, 2009 Reply

    Hi Armando,
    This solution does not work on google chrome or safari. The grid looks out place. Please advise!

  24. Dave Lawson September 13, 2009 Reply

    Great video and tutorial. It was friendly, well presented and I was able instantly to implement the solution I was looking for. Well done!

  25. Armando Roggio September 14, 2009 Reply

    @Dave Lawson, Thank you. I am glad it helped.

  26. SEMTruth June 2, 2010 Reply

    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?

  27. BobbyWine July 26, 2010 Reply

    Thank you for the tips. Used it for my work.

  28. rbrill October 5, 2010 Reply

    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!

  29. Zeeshan Khalid January 22, 2013 Reply

    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

Email Newsletter Signup

Sign up to receive EcommerceNotes,
our acclaimed email newsletter.

And receive a free copy of our ebook
50 Great Ecommerce Ideas