<p>With the Product Pages we had one goal in mind, increasing conversions by presenting relevant product information to customers in a clear manner. A customer who is viewing a product page is just one click away from the shopping cart, making the presentation of that product the priority. Yet we still needed to present other relevant information to the customer such as related items, the wishlist and the customer’s shopping cart. With this in mind we made it effortless for customers to find any additional information they might seek. Let’s look at the layout of the Product Pages.</p>
<h4>Product Page Wireframe <a target="_blank" href="http://www.varien.com/blog/images/mag-product-highres.jpg">(click to see full-size)</h4>
<p></a><a target="_blank" href="http://www.varien.com/blog/images/mag-product-highres.jpg"><img src="http://www.varien.com/blog/images/mag-product-lores-sm.jpg" alt="Magento Regular Product View" border="0" /></a></p>
<p>The product images are presented in the left side of the page, allowing customers to zoom in and view multiple views of a product. While reviews reside at the bottom of the page, an overview of the reviews is prominently placed underneath the product title. Reviews, like other elements on the page, are optional elements in Magento. If you do not elect to turn the reviews or other optional elements on, the remaining elements will move up on the page so this space is not left blank. Optional elements will be called out here with an *.</p>
<p>Below the review overview is the stock availability* and shipping information*. We gave these elements prominence as they are shown to increase conversions. Immediately below is the price information, which will include tier pricing* if it is in use for that product. We placed the calls to action below the pricing. By keeping these elements in the center of the page, not only the Add to Cart button but the Add to Wishlist* and Add to Compare* links as well, we highlight the most important calls to action to the customer. Required Items*, for instance a HDMI cable if the customer is on a product page for a projector, are highlighted right above the product description. </p>
<p>The product description resides above the fold to provide customers with relevant information on the product, and below this are upsell items*, selected by the store owner. The bottom of the product page is given to customer-generated content, including product tags* and the aforementioned reviews*.</p>
<p>In the right column we feature related items*, a mini shopping cart, the customer’s wishlist*, the product comparison box* and an area for a marketing callout*. You can read more about this right column in the <a href="http://www.magentocommerce.com/blog/category/behind-the-scenes/" target="_blank">Behind the Scenes: Category Pages post</a>.</p>
<p>Prefer a tabbed view of the product page? By tweaking the templates and CSS, this page could be redesigned to accommodate this.</p>
<hr />
<h4>Product Images</h4>
<p><img src="http://www.varien.com/blog/images/mag-product-image2.jpg" alt="Multiple Images in Magento"><br />
To provide rich media functionality to the customer, product images can be zoomed and dragged right in the product page. Images can also be opened in a slideshow, where multiple images can be browsed at a larger size.</p>
<hr />
<h4>Tier Pricing</h4>
<p><img src="http://www.varien.com/blog/images/mag-product-tiers.jpg" alt="Tier Pricing"><br />
Tier pricing will display as shown above. If only 1 item is added to cart, the regular price is used.</p>
<hr />
<h4>Products with Variants</h4>
<p><img src="http://www.varien.com/blog/images/mag-product-variant3.jpg" alt="Variant Products"><br />
Selectable product options will appear directly above the call to action area. Of course, variants are saved when adding to the cart, wishlist, or compare box. The product price adjusts based on the options the customer selects.</p>
<hr />
<h4>Grouped Products</h4>
<p><img src="http://www.varien.com/blog/images/mag-product-grouped3.jpg" alt="Grouped Products"><br />
Magento also allows store owners to sell multiple products with similar characteristics on one page, making customers’ lives easier by allowing them to compare all the products in the group. This also encourages customers to purchase more items in the group by allowing them to add all the items to the cart with one click.</p>
<p>That’s it for the product page. As always, 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=CJF279at"><img src="http://feeds.feedburner.com/~f/magento?i=CJF279at" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/magento?a=gEzfkBwm"><img src="http://feeds.feedburner.com/~f/magento?i=gEzfkBwm" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/magento?a=h9TsyiWb"><img src="http://feeds.feedburner.com/~f/magento?i=h9TsyiWb" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/magento?a=aFKDi2SE"><img src="http://feeds.feedburner.com/~f/magento?i=aFKDi2SE" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/magento/~4/142062883" height="1" width="1"/>

More...