eCommerce Strategy

Developer's Toolbox: Creating Custom Category Pages in Magento

Nov 28, 2012   •   2 Min Read

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:

Magento Test Bundle

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.

Magento Development Process Example 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.

Copy File & Rename Copy

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.

Implement Changes

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

Click on "Custom Design" Tag

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

Apply Theme Changes To Product Pages Here

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

Select Custom Design Drop Box & Choose Theme

Save the category (this is very important).

Save, Save, Save!

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.

Compare Category Pages

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.

Explore more tags: eCommerce Strategy Blog
Related Content

You Also May Like

HubSpot

Use The HubSpot Shopify Integration To Sync Customer Data

Introduction Running an online store is full of day-to-day excitement, but the data...
Learn More
Blog

How Cordova Outdoors Manufactures Insulated Coolers In the USA with Gentry Jensen - EP 003

Podcast: Download | Subscribe: Apple Podcasts | Google Podcasts | Spotify Meeting...
Learn More
Klaviyo

Klaviyo Abandoned Cart: 5 Strategies to Increase Conversion

It takes a lot of work to get customers to your eCommerce store. Whether you use SEO...
Learn More
Blog

Omnisend vs Klaviyo: A Marketer's Perspective on the Best Choice

One of the main factors to consider when growing your brand is choosing an email...
Learn More
Blog

Klaviyo Email Marketing: 5 Reasons They Stand Out in 2024

In 2024, email marketing is far from dead. Contrary to popular belief, it continues...
Learn More
Blog

Klaviyo vs HubSpot: A Side-by-Side Comparison

While many tools are required to successfully manage a digital-age brand, the tools...
Learn More
20 Best Shopify Apps LP Background Small
eBook
E-BOOK

20 Best Shopify Apps For Your eCommerce Store

Download e-Book

Let's Grow Your eCommerce Business, Together.