After setting up Magento, what we want to do at first is adding some products to Magento homepage. As you may notice, when you add new products to Magento, they will not be automatically displayed on Magento homepage. We have some extra steps to tell Magento to display products/categories to Magento homepage.
In this Magento tutorial, we will go step by step how to:
- Add and display all products to Magento homepage
- Add and display products from a specific category to Magento homepage
- Add and display products marked as new
Related tutorial:
We will need to add some specific code snippets, which I will provide in this tutorial, to homepage so that it will display the set of products we want onto homepage.
Before we begin
From Magento 1.9, we need to set permission for ‘catalog/product_list’ block to enable this block to be shown on Magento homepage.
Go to ‘System->Permissions->Blocks‘ add permission for catalog/product_list block as below:
Display all products on Magento homepage
In Magento backend, go to CMS -> Manage pages > Homepage
In content section, click on button to add HTML code to your page
and add the following code into the WYSIWYG editor
1 | {{block type="catalog/product_list" name="home.catalog.product.list" alias="products_homepage" template="catalog/product/list.phtml"}} |
Finally save your changes and go to Homepage to see the magic
Display products from a specific category to homepage
First, we will look for ID of category we want to add to homepage, in Magento backend, go to Catalog > Categories > Select the category you want to display on Homepage, the category ID will be shown next to Category name
After we got Category ID, same as display all products on homepage, go to CMS -> Pages > Homepage and add the follow code to HTML editor of Homepage:
1 | {{block type="catalog/product_list" name="home.catalog.product.list" alias="products_homepage" category_id="3" template="catalog/product/list.phtml"}} |
Remember to replace category_id="3" with your category ID
Finally, refresh homepage to see changes
Add and display only new products
We use the following code to add new product to Magento homepage
1 | {{widget type="catalog/product_widget_new" display_type="all_products" products_count="8" template="catalog/product/widget/new/content/new_grid.phtml"}} |
Replace products_count="8" with your preferred value
Add and display Recently Viewed Products
Similarly we can add the following code to display recently viewed products to Magento homepage to remind customers about what products they’ve seen on your store.
1 | {{widget type="reports/product_widget_viewed" page_size="5" template="reports/widget/viewed/content/viewed_grid.phtml"}} |
Conclusion
There are much more we can do with homepage of Magento, just tweak the code we add to homepage of Magento and we can customize product display as we want. I will go in more detail in the next part of the series Magento tutorial for beginners
Drop a comment if you have any question
Good luck!
