Pricing should not be a mystery. Posting clear, understandable prices for the products that your online store sells should be an important part of the site’s user experience design.

In fact, few, in any, shoppers will actually make an online purchase without knowing how much that purchase will ultimately cost. And almost no ecommerce merchant forgets to include a price somewhere in a product detail page layout.

While price is simple and obvious, your online store should not overlook how a product’s price is displayed on your site’s product detail pages. Something as necessary and important as price deserves consideration in an ecommerce design. This includes following broadly accepted user experience best practices as you build price into your product detail design.

You’ll want to:

  • Clearly display and update price to make it easy for your visitors to shop.
  • Place price and its supporting elements in high visibility areas whether your shopper is using a desktop computer or a mobile device.
  • Ensure the text used for the price is readable and accessible, featuring high-contrast colors.

What follows are five tips for your product price design. In particular, these recommendations deal with where to place product price and how product price relates to other elements.

Each of these recommendations comes from widely held ecommerce price-display conventions. But A/B test your layouts to discover what converts best for your business.

Clearly Display the Product Price

Many, if not most, online retail stores either display the product price near the product title or near the add-to-cart button or similar call to action.

It is a common convention to place a product's price immediately following the product's title. This layout prioritizes price.
It is a common convention to place a product’s price immediately following the product’s title. This layout prioritizes price.

Designs that display the price adjacent to the title may prioritize price, showing it to shoppers at about the earliest possible moment in the layout, so that the shopper will see the primary product image, the product title, and the product price.

Other ecommerce product page designs place the price relatively near the call to action, which is typically an add-to-cart button.

Placing the product's price near the call to action creates a sort of call-to-action section or component.
Placing the product’s price near the call to action creates a sort of call-to-action section or component.

Here the aim is to create a sort of call-to-action component that includes all of the information the shopper needs to take the next step toward a purchase.

Some sites will even show the price multiple times, placing it relatively near both of these important elements.

The product's price can be repeated several times...