Putting products on a Magento CMS page or Homepage

Mar 31, 2011

No matter how many Magento websites I build I never seem to be able to remember the following code snippet to add products onto the homepage or CMS page. I thought I would post, simply so I know where I can quickly find the information – I hope others find it useful as well.

The simplest way to do this is to add a widget to the cms page which allows you to specify a category if you need to as well as the template. Being able to change the template is really important as it allows you to create a new way of displaying your products, which you often need to do on the homepage.

// all products (it is still paginated)
{{block type="catalog/product_list" name="home.catalog.product.list" alias="products_homepage" template="catalog/product/list.phtml"}}

// products from one category (it is still paginated)
{{block type="catalog/product_list" name="home.catalog.product.list" alias="products_homepage" category_id="4" template="catalog/product/list.phtml"}}

If you need to customise the way these get displayed, either do this in your CSS, or change the template above and create your own phtml file. I usually copy the existing template and modify it to suit my needs since there are a lot of optional sections to do with pricing etc. that you don;t want to lose.

There are also some other options for displaying specific lists of products that are built-in to Magento, such as new and random products. Watch out for the random products though because the sorting options given to the user won’t work as expected on a random list. You would hope that Magento would keep the same list of products on the first page and sort them, but Magento actually sorts the whole catalogue. While this functionality is correct, it is hardly helpful to the user in most cases. Anyway, here is the code.

// new products (note this uses a different template, you can choose to use the normal list if you prefer)
{{block type="catalog/product_new" name="home.catalog.product.new" alias="product_homepage" template="catalog/product/new.phtml"}}

// random products
{{block type="catalog/product_list_random" name="product_random" template="catalog/product/list.phtml"}}