Category List on Home Page

All Files

Getting Started
Products
Marketing
Content
Customers
- Customer Accounts
- Customer Groups
  - Creating a Customer Group
Sales
Reports
- Dashboard
  - Snapshot Reports
  - Dashboard Setup
- Running Reports
  - Refreshing Report Statistics
  - Available Reports
Operations
- Stores
- System
Reference

You are here: Content > Markup Tags > Category List on Home Page

Magento Open Source, 1.9.x

All Files

Magento 1.x Security Patch Notice
For Magento Open Source 1.5 to 1.9, Magento is providing software security patches through June 2020 to ensure those sites remain secure and compliant. Visit our information page for more details about our software maintenance policy and other considerations for your business.

Listing Categories On Home Page

A common addition to the home page is to use the Widget tool to display a list of new products. You can also add a markup tag to the home page code to display a list of products from a specific category.

Home Page with Category Listing

Step 1: Add the Markup Code to the Home Page

On the Admin menu, select Catalog > Manage Categories.

In the category tree, select the category that you want to use. Take note of the category ID that appears in parentheses after the category title. For example: (ID: 25)

On the Admin menu, select CMS > Pages. Then, open your home page and do the following:

In the panel on the left, select Content.

In the editor, “comment out” the current code by enclosing it in beginning and ending comment tags.

<!--

(your current home page code)

-->

Paste the following markup tag into the editor above the commented out code, substituting the ID of the category that you want to appear:

{{block type="catalog/product_list" category_id="25" template="catalog/product/list.phtml"}}

<!--

(your current home page code)

-->

Depending on your theme, it might be necessary to include additional CSS styling to format the list. The home page in our sample data uses CSS to remove the bullet from each item, and to control the spacing in the grid. If the products in your grid are bulleted after completing this exercise, try adding the following CSS style either before or after the markup tag.

<style type="text/css">

.std ul.products-grid li {

list-style:none;

margin-left:0;

</style>

Click the Save Page button.

Home Page Code

Step 2: Add Content Permissions for the Block

Because the new block isn't recognized by your Magento installation, the permissions must be set to add it to the whitelist of content that can be referenced.

On the Admin menu, select System > Permissions.

Click the Add New Block button, and do the following:

In the Block Name field, enter "catalog/product_list."

Set Is Allowed to "Yes."

When complete, click Save Block.

Add New Block

When prompted, go to Cache Management, and refresh any invalid cache.

Step 3: Verify the Update

To verify the update, go to the home page of your store, and press F5 to refresh the page.

To restore your previous home page, simply remove the comment tags from the original code, and comment out the markup tag. If you don’t plan to ever use the original code, it can be deleted from the page.