Magento Blog

Magento Behind the Scenes: Product Pages

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.

Product Page Wireframe (click to see full-size)

Magento Regular Product View

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 *.

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.

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*.

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 Behind the Scenes: Category Pages post.

Prefer a tabbed view of the product page? By tweaking the templates and CSS, this page could be redesigned to accommodate this.

Product Images

Multiple Images in Magento

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.

Tier Pricing

Tier Pricing

Tier pricing will display as shown above. If only 1 item is added to cart, the regular price is used.

Products with Variants

Variant Products

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.

Grouped Products

Grouped Products

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.

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!

Magento Featured on the Zend Framework Site

If you head over to the Zend Framework site you will find Magento front and center as a featured example of the Zend Framework in action.

You can also read a case study on Varien’s use of the Zend Framework for development.

Community Chat v.2 - Thursday, August 9th 11 AM PST

We had a great turnout last week for our inaugural community chat. The ambitious plans to discuss a wide array of topics was scaled back and concentrated on US Taxes, Coupons/Promotions (see transcript below) and Taxonomies (specifically integration with 3rd party providers). It was an absolute success and the conversation was flowing. Seems ya'll have a lot to say smile That said, we are already looking forward to our v.2 community chat, happening on Thursday, August 9th at 11 AM PST. We'll discuss user registrations, product search, and more (should time allow). Get those screenshots ready (we love 'em!). We are opening this up for everyone across the world ... but, here's the catch ... there are only (roughly) 20 spots available. Interested? We'd love to hear from you. Step 1 - Contact Us Step 2 - Get online on Thursday bright and early to ensure you have a spot

(if reading via feed, view the transcript on our blog)
Topic: Coupons / Promotions
Roy R. Outside of the standard percent off, fixed amt, minimum order
coupons (and combinations of) what are some creative promotions/coupons that
you've seen?
Matt G. free shipping
Josh P. We use free shipping coupons a lot.
Josh P. And "Get X Product for free" coupons.
Scott S. buy one get one (free|% off|$ off|specific product|multiple
product choice)
Brandon E. Free shipping definitely
Brandon E. ability to restrict to certain products
Brandon E. or exclude certain products
Josh P. Ability to restrict to a group of products is huge.
Brandon E. I've also had a lot of clients request the ability to do buy
one get one or by 3 get 20% off
Brandon E. not sure how to handle those
Matt G. ability to limit coupons to one user per customer.
Matt G. etc
Scott S. as far as free/promotional shipping goes, I have a client on
the east coast who can afford to ship free up to the mississippi river, but
beyond, costs are increasingly greater after that point...
Nathan P. What about upgrade to a better shipping method?\
Scott S. I've also seen free shipping on only one product, whereas the
other items in the order are charged for shipping
Chris M. For the appearance of free shipping to the customer, do you
restrict it to a certain method (ground) and $0 that out, or do you just offer
a new method Free Shipping which the customer selects?
Josh P. On our free shipping we offer free on Parcel. If you want it
faster, you can pay full price for Priority or Express.
Brandon E. @Scott - I think if you allow to restrict based on product,
and offer the coupon as free shipping, it should do just that
Scott S. amazon adds an otherwise unseen shipping option for their free
shipping, I think they call it super saver shipping...
Matt G. we run into restrictions for free shipping coupon like lower
48 (not free for AK, HI, International)
Brandon E. A new shipping option would be fine, as long as it was
triggered by the coupon and not available to everyone
Nathan P. Same here Matt, good point.
Brandon E. I don't want to offer free shipping to everyone
Brandon E. The ability to create a coupon for a specific CUSTOMER would
be nice
Scott S. What about promotions based on a certain order amount,
quantity, etc?
Matt G. we have offered a discount of the lowest shipping cost, so
intl, hi, ak customers get a lowered shipping rate
Brandon E. we often give them a credit, but giving them a discount would
be a great way to apologize for messing up an order, etc
Josh P. Yeah. We do a lot of "Orders of $100 get free shipping"
Josh P. of=over
Moshe G. @Brandon - how about customer group?
Matt G. @brandon the customer specific option would be great
Josh P. Well specific customer implies the customer is registered
Josh P. Right?
Josh P. If you just create a coupon and limit it to 1 use and give
that to the customer...that would work as well.
Matt G. how about automatic promotions/coupon with no code
Brandon E. @Moshe - that would be great too
Matt G. like orders over $100 for example
Scott S. Well, I've had clients who offer certain promotions to a group
of customers who are marked as a member of a certain group within the ecommerce
system, so that promotions are automatically calculated
Brandon E. promotions and coupons are different, I think
Brandon E. I perceive coupons as a code that people have to enter at
checkout to get
Brandon E. I'd love to be able to create promotions similar to coupons
Moshe G. @Brandon - it looks like coupon is just one more condition to
Nathan P. I agree with that statement (mainly). Coupons in my mind are
external promotions, other types mentioned are internal promotions.
Scott S. for instance: customer groups such as restaurants, hotels,
grocery stores (these are groups listed in the system of a food supplier)
Brandon E. also, don't see it mentioned but I think coupons should have
an expiration date
Nathan P. or.. "in-store" promotions as they're called.
Scott S. the client offers discounted prices on products as well as
other promotions
Brandon E. so maybe have a "promotions" and offer a selection to whether
it's automatic or by coupon code?
Roy R. What type of information would you expect from a coupon report
(from both a financial and marketing/conversion perspective)?
Scott S. What about promotions where there's more than one reward for
an action, such as by 3 of product X and get a discounted price AND free
Scott S. Primarily, I just want to make sure that type of functionality
works and is well tested...
Scott S. I've ran into some issues with it in the past.
Brandon E. I'd want to be able to run a report to see how many times the
coupon code was entered, and maybe a list of all customers/orders associated
with the coupon
Nathan P. From a reporting perspective, I would like to see a complete
funnel report based on an email campaign. I assume that's how users would get
the coupon code in general.
Scott S. Maybe conversion goals could be tracked for both orders with
coupons and without.
Nathan P. Otherwise, we would do most of our reporting in our financial
statement analysis and consider coupons as a deduction from gross sales.
Brandon E. I track conversion goals through Analytics, but would love to
be able to setup goals in my e-commerce software and track within
Brandon E. but that's not just coupons, it's for all conversionsx
Ryan B. I agree w/ Brandon
Scott S. I do as well.
Matt G. Kind of related... we offer packages of products (with a
discounted package price). So when someone adds all the product individually,
the ability to realize this and offer the same discount.
Brandon E. Right now I setup goals in Analytics for sales in general and
also through major channels
Roy R. @Matt - so it sounds like a virtual bundle of some kind?
Matt G. basically
Yoav K. one more question on coupons - does anybody allow multiple
coupons per order? or is it usually limited to one coupon per order?
Scott S. interesting
Josh P. @Yoav: We only allow one.
Nathan P. That's a great idea Matt!
Ryan B. What I am looking for is a very flexible coupon system -- with
the ability to add in coupon codes and define what exactly that coupon applies
to -- current ecommerce usually only offer options such as free shipping or a
percentage off -- but what if I'd like to add a few calendar for orders over
$75 for example --
Scott S. coupons, maybe just one, promotions could be many
Matt G. Yoav - we have a flag for coupons to weather it's exclusive or
Josh P. We actually only allow one coupon ever over promos. So like
you can't use your 10% off coupon AND get free shipping on your order over
Scott S. but it may be a good option when setting up a coupon to mark
that it can be used with other offer
Scott S. offers*
Ryan B. free calendar, not few -- lol
Nathan P. It would be nice to have an option to select what restrictions
Ryan B. yup
Brandon E. multiple coupons would be fine for one-product coupons if they
have multiple products -- for instance I might have a coupon for $20 off a
specific printer and $10 off a toner cartridge
Nathan P. I would like to restrict to different variables (max
promotion, min promotion, etc.)
Brandon E. they should both work if they don't conflict
Matt G. also related are miniminum advertised pricing... we have
several product that need coupon code or add to cart functionality to get the
Brandon E. but it should be an option that a coupon (like 20% off total
order) won't work with any other coupons
Moshe G. @Brandon - that sounds like multi-tier coupon discount right?
same coupon code affects different products differently
Scott S. maybe coupons marked as usable with other promotions are only
usable with other promotions marked as the same
Brandon E. @Moshe... not necessarily. Coupons can apply to one product
(or several) or the whole order. There should be a setting to whether or not
the coupon can be used with other coupons. If it is checked, if they overlap
(i.e. a product specific coupon and total order coupon used) it wont work
Brandon E. but two coupons that do not apply to one another would be okay
Brandon E. I think Staples has a pretty good coupon system actually
Brandon E. I order from them a lot and they send out a LOT of
Brandon E. you can add coupons to your cart much like you add a
Brandon E. by clicking a link in the email or website, or by entering a
Brandon E. and they work very well, as far as recognizing conflicts and
notifying the user
Scott S. that sounds like a good option
Nathan P. That makes sense to me too. So if coupon A is a subset
promotion of coupon B's promotion, there should be an option to prevent the use
of both coupon A & B.
Scott S. I like being able to visually see the promotions
Scott S. How about a "choose one" dialog when two conflicting coupons
are entered?
Nathan P. That's an interesting idea.
Scott S. Or some way to allow the user to choose which they'd
Nathan P. Something like... you can't use both, so which do you
Roy R. anyone seen this on a site before?
Scott S. not as far as I recall
Nathan P. I'm trying to envision coupon collisions in general from a
user experience perspective. You enter coupon A... the discount is applied.
Then you enter coupon B. What happens if there is a collision?
Scott S. The Staples site might do something like this if you can get
ahold of two conflicing coupons
Brandon E. Staples coupons
Brandon E. 7720 2873 2296 xxxx
Brandon E. $20 off $100 order
Scott S. Although, I'm guessing the user would rather choose the option
that get's them the cheapest order, am I right?
Brandon E. 7395 0217 2307 xxxx
Brandon E. $25 off $100 order
Brandon E. neither has been used yet
Brandon E. (please don't use 'em) wink
Scott S. are they one time use?
Scott S. is the site I use for coupon
Brandon E. Yes
Brandon E. one time use
Brandon E. Picture+2
Brandon E. Staples cart with both coupons added
Brandon E. I think it displays the conflict on checkout
Roy R. can you post a screenshot of the conflict in the
Roy R. (these screenshots are really helpful for us)
Scott S. Brandon, hope you choose something you want to buy wink
Scott S. Roy, what about a batch coupon code creation utility for use
in email campaigns? Something that can be uniquely sent to the people on your
mailing list perhaps?
Scott S. And tracked, as well.
Roy R. We thought about it, Scott. You may see that in the future
Scott S. Cool smile
Nathan P. Scott, can you explain the benefit of this?
Brandon E. Sorry, it's asking me to enter payment info...
Brandon E. Ironically
Brandon E. It took both coupons
Roy R. no problem - we'll go on, post it whenever you have it (if you
Brandon E. Ah
Brandon E. Picture+3

What are your favorite eCommerce sites?

We’re looking for the best sites across the world. eCommerce Sites that are well executed, visually appealing, easy to use, intuitive and put usability in the forefront. Any favorites? Let us know in the comments.

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!

Magento to be Distributed Under Open Software License (OSL 3.0)

Varien is committed to the open source community and in that spirit we are pleased to announce Magento will be distributed under the Open Software License (OSL 3.0), an OSI-approved open source license. You can find more information about the license in our new License/Trademarks FAQ page and on the Open Source Initiative site.

We’ve also posted information on the usage of Magento trademarks. As mentioned in the FAQ, the code is free, but the Magento trademarks, service marks and logos are not. Please review the License/Trademarks FAQ if you have any questions on what are appropriate and inappropriate uses of Magento trademarks.

Community Chat: US Market - August 2nd, 2007

The Community Chat is a new feature we are introducing in an effort to receive community feedback on various eCommerce related topics. The concept is to discuss different questions, share our experiences and discuss yours. As we continue to develop Magento we are looking to disclose our thinking behind the project and learn from the community.

Our first chat will be with the US market on August 2nd. We are looking for eCommerce developers, designers, store owners, application providers, and consultants to join us in a discussion on the following topics:


- Tax types
- Methods of calculating taxes
- Reports needed


- Authorization vs. capturing (best practices)
- Storing credit cards and PCI compliance
- CVV numbers
- Fraud issues and liability concerns
- Recurring payments
- Post dated payments


- Shipping calculation (dimensional weight, international shipping, continental shipping, Exceptions: Hawaii, Puerto Rico, Alaska, AFO, APO, PO Boxes, etc.)
- Shipping as a promotion (different types)
- Special goods (surcharges, misc)

Catalog Management

- Building SKU’s and product definition
- Categorization/Taxonomy
- Challenges with search - finding products


- Discounts and Promotions: type and methodologies
- Maintenance issues
- Reporting
- Customer incentives

The format is simple: a question will be presented and the topic will be open for anyone to respond. We’ll try to get through the complete list in a timely manner. We don’t expect a response to every question, but if you feel you can contribute in any way, we’d love to hear from you. Highlights of the Community Chat will be posted on our blog.

We’ll be having many of these community chats in the future with different markets (France, Germany, UK, etc.) and audiences.

Community Chat - US Market

August 2nd
Time: 11 AM PST
Sign Up: Interested? Contact us today.

We will restrict the participants to a max of 20 with additional Varien/Magento staff joining in.

Magento Meetup: Kiev, Ukraine

Want to meet the Magento core development team? We’ve made the long journey from Los Angeles, CA to Kiev, Ukraine to bring together our US and European development teams for an all hands Beta1, don’t stop until you drop session. If you are in Eastern (or Western) Europe and want to join us this upcoming Tuesday, drop us a line. This is a great opportunity to meet us in person and talk about Magento (you may get some inside information, wink wink).

Date: Tuesday, July 24th
Time: 9 PM
Location: Kiev, Ukraine (specific location will be announced)

We’d love to see you there.

* UPDATE: I’ve sent the location to everyone that has contacted us. If you are still interested in coming, let us know.

RSS: All Blog Posts

Get New Posts by Email

Delivered by FeedBurner