Magento Behind the Scenes: Category Pages
Our goal with Magento’s Category Page was to create a customizable browsing experience and keep shopping tools at customers’ fingertips. The customer never has to stop browsing to see essential elements like the shopping cart and wishlist. Price and rating are displayed right on the category page, eliminating the need to drill down into the product info pages. This saves the customer valuable time and makes shopping as convenient as possible.
Grid View Wireframe (click on the image to see full-sized)
List View Wireframe (click on the image to see full-sized)
Magento’s Category Page was designed with functionality and flexibility in mind. Customers should decide how they browse a catalog, and our extensive Pagination Tool supports this philosophy, creating a quick and intuitive experience. Customers can decide how many products they want to view per page, how they prefer to view them (in grid or list view, outlined below), and how each page is sorted (by price, manufacturer, popularity, etc). The customer’s preferences are then saved, creating a customized shopping experience. The Store Owner also has the option to control the way customers view their catalog. If a site is better viewed in one format over another the Store Owner can make this viewing style the default. This flexibility creates several browsing options for customers and helps Store Owners showcase products in the way that best fits their needs.
Each viewing style has its advantages for both the customer and Store Owner. Grid view (top) shows more products at a time, while the list view (bottom) allows for more information like the product description to be immediately available to customers. Both views allow customers to see the product image, the rating, and the product name. In addition, customers can add products to their cart, compare box, or wishlist, potentially eliminating one more step between the customer and a conversion.
Customers will also find this ease and flexibility in Magento’s Compare Box. Unlike many online stores, customers will be able to compare products not just in a single category, but across the site. This allows customers to compare attributes from any category in your catalog, no matter how different they may seem. If a son is shopping for Father’s Day he can compare shared attributes like price or product rating between a golf club and an easy chair just as easily he could compare attributes like weight and size between two chairs. We wanted the Compare Box to remain visible while a customer browses, providing a constant, helpful list of items already added to compare, without forcing the customer onto another page.
The entire page is designed so that the customer sees browsing options like tags and product types first, on the left, while shopping tools like the Shopping Cart, Compare and Wishlist are available on the right. The constant presence of these tools provide an immediate reminder to the customer that they’re interested in these products, and encourages conversion.
Take a look, and tell us what you think! Have a suggestion or a question? Let us know in the comments!






1Olive |posted July 31 2007
Hi,
Why is the search box on the left when usually it’s on the right ?
Do you have a date of release in August?
Thank you,
Olive
2roy from Los Angeles, CA|posted July 31 2007
Olive - The images are wireframes. The actual design we are working with has the search on the right - in any case, you have full control over the templates and can change the layout as you wish.
In terms of release, you can expect Magento in the later part of the month. A firm date has not been set.
Thanks
3Olive |posted July 31 2007
Thanks Roy,
I can’t wait to see and test the possibilities of your eCommerce solution. ..
4steve |posted July 31 2007
Wow guys this looks great!!
And after what is going on over there at Shopify this month, I really hope you can get this product out there.
Keep those screenshots coming.
Thanks
5Jorg |posted July 31 2007
Well ... it’s getting better and better! I just can not wait for the first release.
As far as I can say: your shopping system seems to outperform other systems in so many ways—it’s almost frightening.
I’ve been building online shops for some years now, with the help of commercial AND open source software, but none of the systems came close to magento. Even if only half of your announcements will come true
One thing which especially delights me: you have some designers who really know how to design a simple but great looking system (with top usability!).
Once again: I really can not wait to get my hands on magento!
Greetings from Germany.
6Jonathan Mash |posted July 31 2007
Hi guys. How will you be providing customer support? Will you be offering product customization help? I don’t want to get Magento and then be left with no support because it’s an open source product…
7Roman |posted July 31 2007
I like the idea of letting customers decide in which way they would like to view the items within the respective categories.
And it goes without saying that I’m looking forward to the first release.
8Kategorieseiten in Magento |posted August 1 2007
[...] von Magento Commerce: Varien veröffentlicht zwei Screenshots, die zeigen, wie Shopbesucher sich Produktkategorien ansehen können. Interessant ist hier die Möglichkeit, zwischen einer Listen- und einer [...]
9OliGER |posted August 1 2007
Hi Hardworkers!
I can’t wait to get Magento but until this time I’ve some questions and suggestions:
1. Teaser area for categories (visual navigation)
Is it possible to reflect categories from the left as teaser area for visual navigation. With some Logos for example. This “block” could be placed at the top of result pages or as doorpages?
2. Midex Grid-Layouts for product views
It would be great if we can create Grid- and List views in a mixture. But what does it mean? It means that we have 3 or 4 product boxes as in your Grid style at top of screen and under them begins the List view style. Additionally you can use product view at the top for featured products (most view, topseller etc.)
My wishlist would be:
Product views:
- Full Grid view (as it is)
- Full List view (as it is)
- Grid/List view mix
- Grid “big box” at top + “smaller box” down
Functions for product view:
- Featured Product at the top
- Most view feature
- Most sell feature
Thanks,
Oli
10TOM |posted August 1 2007
I think for better performance and more user friendly magento commerce please add ajax features like ajax basket that the best sample that used for several years on GAP.COM, when I am going to their website I am enjoying online shopping because it is very easy to navigate and adding more items in my basket.
with best wishes for your great team.
11Ian |posted August 1 2007
I’m impressed and dissapointed at the same time. Whilst the design is simple and effective, i was expecting a more web2.0 style front-end to go with your modern day cart back-bone. 3 column designs are usually only suitable for ‘very’ big sites where all the extra ‘best seller’ modules etc are needed. For small sites 2 columns are more suitable. Whilst modifying the templates to suit is possible, most will want an already done solution. I’d suggest the wishlist be an ‘nice to have’ extra, in my years experience i’ve never found anyone bothered about such a feature, they’d rather see clear descriptions and stand out buy buttons not to mention a simple ‘few page’ checkout facility. Still, can wait for its launch anyway, there isn’t many carts on the market worth the time to setup, but think jonathan’s question of support is paramount, just a forum running, but make sure its populated by your team often and not rely on the members as this is where other carts fall down. One last thing (promise), what gateways are you launching from the beginning, i hope google checkout, paypal and protx will be in there, very important for the UK market, you’ll not gain ‘business’ from the UK otherwise.
12Ian |posted August 1 2007
...taking a closer look, it is rather nice actually
13Clayton |posted August 1 2007
I just fixed an issue in something I was working with due to some rare weird floating point addition/subtraction results, which I ended up replacing with bc(add|sub). So, I am inquiring if all math operations will be using the bc(add|sub|mul|div) functions.
14Dave |posted August 1 2007
Ian brings up some good points that I’d be interested in hearing responses to.
Also - is there customizability in terms of what gets displayed in the product list? Lets say for example a customer is in list view, can we make it display only descriptions? Maybe I don’t want to have comparison or product reviews...Or even the price for that matter.
Interested in hearing which gateways will be supported from the get go as well?
Another thing off topic that I wanted to add in terms of a roadblock that has stopped me. I have multiple locations that products ship from, and I think that may be common as maybe a company has two suppliers that both drop ship...and each one is in CA and NY. Is there a way to specify that a product is coming out of NY for example in order to calculate shipping from that zip code when a customer checks out? Rather than just where the store is located. If so, what about when it comes from two different locations, is it smart enough to know that there will be two separate packages?
15roy from Los Angeles, CA|posted August 1 2007
Jonathan - Varien will be providing commercial support and product customization. We expect that an extensive partner network (over time) will develop as well. One of our most important goals is to create commercial communities to support those who need help (and yes - this is a critical limitation in other open source eCommerce solutions).
Oli -You can certainly do that. The product is completely open so once its out, give it a shot.
Tom - We’ll probably have a sample showcase store in the future with similiar functionality.
Ian - I am glad you brought up your concerns. The wireframes (and the upcoming first design) are presented in a 3-column format intentionally. We are trying to show ALL that can be done with Magento using the feature set that is currently available. We don’t expect designers and developers to use the design as-is out-of-the-box, but rather get a feel of how things work. It was actually a challenge to create a layout that would appeal to a wide array of audience and contain all the features (and yes - we’ve decided to go less web2.0 than expected with this first version). The great thing is that we’ll have a number of implementation and showcases (over time) so you can choose what you like best and start from there.
In regards to gateways, Beta1 (our first preview) will support Authorize.net, Paypal (payflow pro, etc.), and Google Checkout. Additional gateway support will be developed thereafter by us and the community.
Dave - Sure. You have access to the code, so you can display anything you wish. In regards to your multiple origin shipping situation, this is currently not on the roadmap.
16John |posted August 1 2007
Finally, a revolution is coming.
17Philip |posted August 1 2007
I also share your frustrations with current open source solutions and I think you guys have a great vision for this application. And I think it’s great that a commercial firm like Varien is spending time and resources on a solution that’s going to be free. Obviously there are benefits for Varien otherwise you wouldn’t be doing this but that’s a business discussion not suitable here. I’d just like to say thanks for giving back to the open source community.
Magento looks very promising and I can’t wait to test it out. I must say, even the black-and-white wireframes look good but that’s just me. I actually like the more simplistic template rather than a flashy web 2.0 look. I think some type of sandbox template would be great (similar idea to the Wordpress Sandbox theme).
P.S. I saw that you guys posted a help wanted ad for Drupal integration over at Drupal Groups. How’s that going? (The idea of Drupal integrated with Magento is very exciting to me).
18roy from Los Angeles, CA|posted August 1 2007
Philip - thanks for the kind words. Drupal integration is something we are actively seeking, but unfortunately has been put on the sidelines for now. We are fully focused on the product right now and the pending Beta1 preview launch.
19molly |posted August 1 2007
Will the option exist out-of-the-box to allow shoppers to select quantities and product attributes (size, color) right from these product list pages (as opposed to only once they click to view an individual product)?
20roy from Los Angeles, CA|posted August 1 2007
molly - We actually gave this a great deal of thought and decided against it at this time.
21Peter |posted August 1 2007
Looking for BETA testers. Let me know .
I would love to test your product!
22Fletsch |posted August 2 2007
WOW looks fantastic!
23Fletsch |posted August 2 2007
Can’t wait to translate. *g*
24Rob |posted August 2 2007
WOW - Speaking as a designer / administrator of a site with over 15,000 products for sale based on Joomla! & Virtuemart,
I cant wait to see if your product can provide the same functionality and more.
25Aarne |posted August 2 2007
I also agree with Philip and on top of that I’m actually quite impressed of the community already.
It’s picking up nicely even before the first release is out so hopefully Magento will prove our hopes true. As it seems so far.
I also share the frustration of current ecommerce field so this has been really awaited breeze of fresh air.
26Didier |posted August 3 2007
Hi,
I can’t wait to see your baby as well ! I’m just disapointed it does not come out this early august as we are working on the second version of our website
We developped our front and back office from scratch and feel it would be a better solution to restart with Magento than continue to develop our own solution.
Will you have a complete products management in terms of minimum/maximum per reference and automatic re-order proposition to suppliers ?
Also, will we be able to set up different prices (buying and selling) for a product (in different sizes for example) ? And if we have a product coming from different suppliers, does Magento support this feature ?
Anyway, if you need beta testers, we are open
27Ian |posted August 3 2007
Roy, thanks for the reply as always. Having spent years with ecommerce solutions i’ve always got suggestions and recommendations if you need them.
My angling towards web2.0 is not so much because of the current ‘fad’, but more the fact that they limit the amount of modules in use and therefore speed up the site. So many sites suffer massively from delay due to this, especially when run on a php, mysql etc platform. Considering most of your customers are likely to use on ‘shared’ hosting, its important the code is simple and tidy. Visitors to a site will be put off by slow checkout, and most will loose confidence and patients if a page takes more than a few seconds to load, especially after inputting card details.
Its good that you are using generic payment gateways to begin with, but don’t forget your UK market, especially where google and paypal are concerned, setup is different! The UK has a large percentage of online shops than anywhere else in the world, so it would be wrong to not incorporate the same from the off-set.
In terms of templates, make a few options available to switch between, this is because a large number of your customers won’t want a site exactly the same as others, but might not have the expertise to change the design.
So looking forward to its launch
28Ian |posted August 3 2007
Has anyone spotted the fatal mistake yet, the shopping cart on the top right can’t add up, lol, but sure it will before launch
29Austin Storm |posted August 3 2007
Ian, it’s a wireframe, not a working prototype. It was likely created in Photoshop.
30Austin Storm |posted August 3 2007
I have read every page on this site at least twice now, and I just wanted to say (for the first of what will no doubt be many times) thank you for this great gift. When beta 1 comes out (oh please oh please let it be August) it will be like Christmas came early.
31Peter |posted August 4 2007
Hello Magento-Team,
can’t wait to see the release of Magento! You’re really doing a great job!
Can you please tell me about the implementaion of new templates into the shop? Are you using something like Smarty or your own solution?
Thanks,
Peter
32roy from Los Angeles, CA|posted August 5 2007
Peter - We are using templates based on the Zend Framework. That said, Magento is flexible enough to allow usage of other template engines, so you can technically develop a Smarty implementation if you wish. Hope this helps.
33Mark |posted August 6 2007
Looks great! Can’t wait to get this tested!
34arif |posted August 6 2007
amazing...sounds good..can’t wait to try..
35Dan |posted August 6 2007
Is Bobby Easland involved with this project? It sounds a lot like the now defunct “Project-X”.
36roy from Los Angeles, CA|posted August 6 2007
Dan - not sure who Bobby is, but he is certainly not involved.
37Dan |posted August 6 2007
Roy, Bobby was known as ‘chemo’ on the osCommerce site (and forums), and is known for some of his high quality osCommerce contributions.
38chadalderson from Santa Monica, Ca.|posted April 16 2008
Hey - have you guys posted ALL the wireframes + sitemap(s) in a single location for the front-end?