Developer's Toolbox: Creating Custom Category Pages in Magento

Would you like to cater to different audiences in the same Magento store? Do you need a quick way to differentiate categories using Magento development? This blog will walk you through the steps of making a custom category page in Magento. This is helpful for categories like ‘Men and Women’ or ‘Kids and Adults’, but in this tutorial the focus is on differentiating category pages for ‘Girls and Boys’.

This article assumes you have a new design ready to go along with the images and styling you need. We’ll go over how to implement these changes. They can be as simple as changing a few colors or as complicated as changing the entire structure of the site. Anything that you can change from default Magento can be changed from category to category.

Below is a default Magento category page:

This theme is good for a basic, neutral category that has a broad targeted audience. But what if you wanted to make a category page attractive to young girls? The category page may contain products that are sold to girls as the main customer base. A good category page design should include some pink accents and softer fonts to prompt engagement from this targeted audience. All you need to do is develop these changes and apply the new theme to the default Magento category page.

To help you understand this Magento development process, I’ve created an example to work through the changes in the stylesheet.

Next in the skin/frontend/enterprise folder, create a folder with the same name as the folder you made before. I recommend making a copy of the default folder and renaming it to your theme name. This way you can be sure any styles that are the same for both categories will remain the same.

These are the files you will change to make your updates. I’ve made the background and header pink, and changed some of the text to the evil Comic Sans (our designers will hate me).

Implement your changes

First, in the Magento admin, go to Catalog > Categories > Manage Categories.

On the left hand side, click on the category you would like to change the design for. Click on the ‘Custom Design’ tag.

Here you can select if you would like to apply the theme changes to the product pages in that category.

For now we will choose no, but remember that this can be a valuable tool, as we can dramatically change the layout of a product page to cater to different types. For example, you can create a category page with a larger text font for products with an older generation of customers that may have trouble seeing smaller fonts. You can also play with the design to fit other population genres that correspond with your customer base using this tool.

Select the custom design drop box and choose the theme you have been working on. In this example it would be ‘girls’.

Save the category (this is very important).

If you have made changes in the skin files, these should be active now. If not, try clearing the Magento cache after clearing the cache in your browser.

To compare category pages, below are the changes made for the ‘boys’ section – a blue background and changes in the font. This is better suited to engage the population of young boys. The font is big and bold which would be flattering to the male audience. The blue background represents the standard color associated with boys that is general over the population. The background will help differentiate this category page from the opposite ‘girls’ page design.

This is just the tip of the iceberg when talking about custom designs. These same principals can be used to make different designs for a single product, or change the design based on the day of the year or holiday season. Use this tool to increase the quality of your website design and development. Custom category page designs can help you promote certain products to a targeted audience to increase sales. They also allow you to differentiate selected products and categories by developing specific designs for specific categories. This Magento tool should be implemented to maximize the reach to your targeted audience and increase your overall sales.

Have any questions/comments? Please contact Groove and we’d be happy to help you.