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

Blog

Google Merchant Center: Everything an eCommerce Merchant Needs to Know

As the eCommerce landscape continues to evolve, businesses are constantly seeking...
Learn More
Blog

Choosing the Right eCommerce Tech Stack for 2023 & Beyond

Introduction The eCommerce tech stack is the foundation of any successful online...
Learn More
Blog

eCommerce UX: How Website Design Affects Conversion Rates

In the competitive world of eCommerce, striking the perfect balance between an...
Learn More
eCommerce Development

How This Nursery Increased Revenue 140% With HubSpot Email Marketing

Background Groove Commerce initially partnered with Caragh Nursery to migrate them...
Learn More
BigCommerce

3 Reasons Subscription Bundles Will Change Shopify Forever

What are subscription bundles?  Before we dive into the three major reasons why...
Learn More
BigCommerce

Lifting Bottom-Line Revenue 50% With Paid Advertising

Background The team at Cordova Outdoors specializes in creating tools for...
Learn More
Transforming eCommerce Customer Service   - 524x352
Frame 167 (1)
E-BOOK

From Cost Center to Profit Driver: Transforming eCommerce Customer Service

Download e-Book

Let's Grow Your eCommerce Business, Together.