<p>Our goal with Magento?s <strong>Category Page</strong> 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.</p>
<p><strong>Grid View Wireframe </strong>(click on the image to see full-sized)</p>
<p><a href="http://www.varien.com/blog/images/grid-highres.jpg"><img src="http://www.varien.com/blog/images/grid-lowres.jpg" alt="Grid View of Magento Catalog Page" border="0" /></a></p>
<p><strong>List View Wireframe </strong>(click on the image to see full-sized)<br />
<a href="http://www.varien.com/blog/images/list-highres.jpg"><img src="http://www.varien.com/blog/images/list-lowres.jpg" alt="List View of Magento Catalog Page" border="0" /></a></p>
<p>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.</p>
<p>Each viewing style has its advantages for both the customer and Store Owner. <a href="http://www.varien.com/blog/images/grid-highres.jpg" title="Grid View" target="_blank">Grid view</a> (top) shows more products at a time, while the <a href="http://www.varien.com/blog/images/list-highres.jpg" title="List View" target="_blank">list view</a> (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.</p>
<p>Customers will also find this ease and flexibility in Magento?s <strong>Compare Box</strong>. 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.</p>
<p>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.</p>
<p>Take a look, and tell us what you think! Have a suggestion or a question? Let us know in the comments!</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~f/magento?a=bbVquinF"><img src="http://feeds.feedburner.com/~f/magento?i=bbVquinF" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/magento?a=mbHbe5Cy"><img src="http://feeds.feedburner.com/~f/magento?i=mbHbe5Cy" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/magento?a=nNMGZmp7"><img src="http://feeds.feedburner.com/~f/magento?i=nNMGZmp7" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/magento?a=VyFkfLyy"><img src="http://feeds.feedburner.com/~f/magento?i=VyFkfLyy" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/magento/~4/139380387" height="1" width="1"/>

More...