Try the Demo

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)

Grid View of Magento Catalog Page

List View Wireframe (click on the image to see full-sized)
List View of Magento Catalog Page

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!

RSS comments feed for this entry

User Comments

|38 comments
  1. Olive

    1Olive from Hobson|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

  2. roy

    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 smile

  3. Olive

    3Olive from Hobson|posted July 31 2007

    Thanks Roy,
    I can’t wait to see and test the possibilities of your eCommerce solution. ..

  4. steve

    4steve from Hobson|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

  5. Jorg

    5Jorg from Hobson|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 wink

    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.

  6. Jonathan Mash

    6Jonathan Mash from Hobson|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…

  7. Roman

    7Roman from Hobson|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.

  8. Kategorieseiten in Magento

    8Kategorieseiten in Magento from Hobson|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 [...]

  9. OliGER

    9OliGER from Hobson|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

  10. TOM

    10TOM from Hobson|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.

  11. Ian

    11Ian from Hobson|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.

  12. Ian

    12Ian from Hobson|posted August 1 2007

    ...taking a closer look, it is rather nice actually wink

  13. Clayton

    13Clayton from Hobson|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.

  14. Dave

    14Dave from Hobson|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?

  15. roy

    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.

  16. John

    16John from Hobson|posted August 1 2007

    Finally, a revolution is coming.

  17. Philip

    17Philip from Hobson|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).

  18. roy

    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.

  19. molly

    19molly from Hobson|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)?

  20. roy

    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.

  21. Peter

    21Peter from Hobson|posted August 1 2007

    Looking for BETA testers. Let me know .
    I would love to test your product!

  22. Fletsch

    22Fletsch from Hobson|posted August 2 2007

    WOW looks fantastic!

  23. Fletsch

    23Fletsch from Hobson|posted August 2 2007

    Can’t wait to translate. *g*

  24. Rob

    24Rob from Hobson|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.

  25. Aarne

    25Aarne from Hobson|posted August 2 2007

    I also agree with Philip and on top of that I’m actually quite impressed of the community already. smile 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. smile

    I also share the frustration of current ecommerce field so this has been really awaited breeze of fresh air.

  26. Didier

    26Didier from Hobson|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 smile

    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 smile

  27. Ian

    27Ian from Hobson|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 smile

  28. Ian

    28Ian from Hobson|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 wink

  29. Austin Storm

    29Austin Storm from Hobson|posted August 3 2007

    Ian, it’s a wireframe, not a working prototype. It was likely created in Photoshop.

  30. Austin Storm

    30Austin Storm from Hobson|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.

  31. Peter

    31Peter from Hobson|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

  32. roy

    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.

  33. Mark

    33Mark from Hobson|posted August 6 2007

    Looks great! Can’t wait to get this tested!

  34. arif

    34arif from Hobson|posted August 6 2007

    amazing...sounds good..can’t wait to try..

  35. Dan

    35Dan from Hobson|posted August 6 2007

    Is Bobby Easland involved with this project?  It sounds a lot like the now defunct “Project-X”.

  36. roy

    36roy from Los Angeles, CA|posted August 6 2007

    Dan - not sure who Bobby is, but he is certainly not involved.

  37. Dan

    37Dan from Hobson|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.

  38. truckerdeluxe

    38truckerdeluxe 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?


RSS: This Entry| All Blog Posts (RSS)