Ecommerce Product Page Design: Best Practices & Tips For Web Designers

It takes some careful attention to detail to design a usable ecommerce site. There’s so many moving parts from the checkout process to the user page and product pages.

You can browse through various ecomm designs for inspiration but even those may leave you looking for more.

That’s why I wrote this guide dedicated to ecommerce product page design. I’ll share tips and trends for creating usable product pages that encourage visitors to browse and stick around on your site long enough to buy.

Add a Strong Call to Action (CTA)

This is probably the most important part of any ecommerce product page.

A page’s CTA, short for call to action, is the element that draws interest and coaxes action from the user.

On a product page this should be your “add to cart” button.

It’s the one thing that’ll get people moving through your funnel to actually convert. That is the main goal of a ecommerce site, after all.

Take a look at the sample product page above from Hayneedle. They feature a pretty simple design and the clear-as-day CTA button is colored bright orange.

This immediately grabs attention and stands out. That’s what you want for all your CTAs.

You want to ideally find a color that grabs attention and has not been used anywhere else on the page. Yet at the same time you want that color to blend into your layout and feel natural. Not an easy thing to do.

But that’s why it’s useful to study other examples to see what designers are doing and how they structure product page CTAs.

You can find another example on the Penguin Publishing website.

Again this relies on bright orange for the CTA, however that color is used many times throughout the page. It’s one of the reasons I actually recommend testing other colors just so your buttons stand out.

For example Lowes has a bright green CTA and that color isn’t found anywhere else on the website.

This really does stand out against the rest of the content and it’s a clear indicator of driving visitors to take action.

Ultimately your website’s color scheme, the page layout, and how you handle space on the page will affect your CTA design. The main goal is to have one CTA per page and make sure it’s built around the “add to cart” feature.

You want a color and button style that’ll be easy for visitors find. This is the single action they’ll wanna take to purchase something so don’t make it hard to find!

Once they see the “add to cart” button they know how to make a purchase. And that’s typically the average visitor’s goal when browsing an ecommerce site.

That’s also why I recommend testing a lot of colors until you find something that pops off the page yet doesn’t contrast with your existing design.

If you aren’t sure where to start I recommend our color theory guide for designers.

This won’t teach you everything but it’ll help to clarify the UI/UX process of crafting a usable and highly-converting CTA.

Clear Breadcrumb Trail

Here’s another popular feature that many ecommerce product pages have.

You can add breadcrumbs into any page with ease and they don’t require a lot of space. In fact, they often take up empty space you never used.

The benefit of a breadcrumb is the increased user engagement with relevant links to top-level parent categories for each product.

For example the Saltwater Fish website uses a very simple breadcrumb navbar with bolded text and forward slashes for dividers.

When you look over the site at a glance this breadcrumb bar feels like a natural part of the layout.

Your goal should be to design similar breadcrumb-style navbars. But keep in mind that usability is key to everything.

Your links should be easy to read and the breadcrumb categories should make sense.

After all, that’s what gets people clicking.

The Playmobil website has another example that actually stands out a bit more.

At the very center of each product page you’ll find a breadcrumb detailing all the categories and sub-categories used for organizing all this content.

This gives visitors a chance to quickly access the home page, the main shop page, or any product category page with one click. Definitely a valuable asset for any ecommerce site.

Add a Visible Price

The single biggest barrier to entry for most customers is the price of a product.

Someone may love what you’re selling and truly want to purchase one. But if it’s too pricey then it’s just not an option.

Some designers think it makes sense to hide the price so users won’t notice.

This is a terrible idea.

Instead you want your price to be clearly visible and accessible at a glance. Give visitors the info right away so they aren’t wasting time looking at a product they can’t afford or just wouldn’t buy.

I’m a huge fan of Wayfair’s design since they do pretty much everything right.

Awesome breadcrumb navbar, clear product photos, strong purple CTA and a large price tag in bright red text.

One look at this page and you’ll immediately feel comfortable using it. And that’s the goal you should be aiming for: comfort & familiarity.

You don’t need big red text for your product pricing but it should be clearly visible at a glance. The best color and positioning for your site will depend how your layout is structured.

Take another example from the online pet store Chewy.com which sells a whole bunch of cool stuff.

On their product pages they segment a specific part of the page for the price. This displays the total product price along with the potential discount for an autoship order.

Whenever you have deals or bulk discounts it’s a good idea to show this in clear view next to the original price. Your discount may be enough to get someone to make that final purchase.

Also have a look at this example from The Home Depot’s website.

On this page it features a much larger price in bolder text displaying the discounted rate. The original rate is much smaller with strikethrough text.

This may seem like a very small addition to the page but it can radically increase conversions for the right products. Not to mention the small graphic “new lower price” is meant to stand out and grab attention right away.

You want to create a price that gets attention and makes visitors think “hmm, not bad!”

Granted you as the designer cannot affect the item’s price or the user’s reaction to it. But you can design typography that makes it super easy to check the price within a second of the page loading on screen.

Keep Information Short & Skimmable

I can’t tell you how many ecommerce shops I’ve seen with heavily detailed product pages.

Some feel like dissertations and reading through the information is just unpleasant. As a web designer you should know that people skim content and look for what they need fast.

So why not provide information in that style?

Design product pages with crucial information organized into page sections. Make it easily visible and easy to read with clear language and very few obstructive page elements.

I think the Sleepy’s website does an excellent job of this.

You can quickly skim underneath the “features” header to find everything in a nice organized list. This is super easy to consume and the content is organized even further on the page in the section “overview & specs”.

Use this as a basic template if you aren’t sure how to plan your product features. Hint: bullet points work really well.

You could also follow a design like Haier with a list of features using bolder text for the key points.

These work like mini headlines where the content is dark, bolded, and super easy to read. A great design choice that places attention on the consumer’s needs.

In fact, your goal should always be to focus on the consumer first.

If you do this you’ll have far fewer troubles with confusing UX or returned items from unhappy purchases.

At first glance the Maybelline product page is pretty simple. And it doesn’t have too much info above the fold.

If you scroll down a little you’ll find a section with features under “why you’ll love it”.

This content changes for each product and it offers a clear overview based on customer preferences. It is perhaps the best style for less complex products that typically solve simple problems.

But you have to decide how you want to organize information based on what you’re selling. Use these examples as guides and combine them with your own ideas too.

User Reviews & Ratings

Nothing helps to sell a product faster than social proof.

Product reviews are incredibly valuable and most ecommerce platforms support this feature. You should highly encourage user reviews and push these towards the front of the product page whenever you can.

Most ecommerce sites rely on a star-based rating system which does work well. This gives a visual indicator of what most buyer’s think of the product.

And if curious consumers want to learn more they can always click to read the reviews in detail.

Take for example the IKEA product page.

This outlines a pretty clear 1-5 star rating system with a number in parentheses next to the graphic. Visitors can quickly skim the star rating and then see how many total people have left reviews for this.

If you only see 2 or 3 reviews then you know the star rating isn’t super reliable. However 30+ reviews means there’s a good basis to gauge the product’s value.

We can find this on plenty of ecommerce sites including Amazon, the king of modern Internet retail.

Everyone knows Amazon’s page design so they know where to look for user ratings.

The same can be said for most other big-name stores like Walmart or Target. People are conditioned to skim the page until they see a star rating system for reviews.

Use this to your advantage and design review sections that are easy to read! These really can swing people who are on the fence about buying.

On the Bath & Body Works website you can see they increase the size of their stars.

This makes it even easier to find them at-a-glance and quickly see how other users have rated the products. Think of this like an improved design choice for accessibility which makes the user ratings super easy to access.

You can even hover the star rating numbers and see a breakdown of who voted for which rating.

Talk about giving value to the user.

Moving Forward

If you’ve never designed a product page before it can feel like a daunting task.

But I recommend planning your ideas on paper first and sketching quick wireframes to get an idea of what you want. From there it’ll be so much easier to figure out which features blend nicely into your layout and which ones you simply don’t need.

Also keep in mind that product pages should be designed to encourage user action. So keep them free of clutter and try to place focus on the important areas: the product, the price, and the call to action.

And if you’re just getting into ecommerce then have a look at our comparison piece reviewing the various options for online ecommerce platforms.