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

Your Guide to eTail West 2024 in Palm Springs, CA: Event Tips & Tricks

What Do I Need To Know About Etail West 2024? Are you in the eCommerce industry? If...
Learn More
Blog

The 5 Best AI and SEO Tools for eCommerce Website Strategy

In the vast digital landscape, where visibility is paramount, the science and art of...
Learn More
Blog

3 Tools To Use AI in Email Marketing For eCommerce Online Stores

In the realm of digital marketing, email continues to be a potent and influential...
Learn More
Blog

5 Awesome AI Copywriting Tools For Making Money Online In 2024+

In the realm of persuasive communication and digital marketing, the art of crafting...
Learn More
Blog

The 5 Best Video Enhancing AI Tools for Selling Online [2024 Update]

In the realm of digital content creation, video has emerged as a dominant force,...
Learn More
Blog

Our Agency's Top 5 AI Social Media Content Marketing Tools For Online Sales

In today's interconnected world, social media has transformed into an indispensable...
Learn More
BigCommerce vs Shopify_ Everything You Need to Know - 524x352
eBook
E-BOOK

BigCommerce vs Shopify:
Everything You Need to Know

Download e-Book

Let's Grow Your eCommerce Business, Together.