How to Design a Customer-Winning Product Page for Your eCommerce Store: Part 2
Anatomy of an Effective eCommerce Product Page Layout Design — Ready-to-use Designs You Can Copy to Instantly Improve Your Online Store
Designing an eCommerce product page layout that your customers enjoy browsing and just happens to encourage them to open up their wallets is a challenging task.
Where or how do you even start?
What designs work best for “my” customers?
How can I stand out from my competitors?
If you are stumped and are hounded by the same burning questions about how to design a winning product page for your online store, this guide will be your knight in shining armor.
We ran our own successful eCommerce store and are conversion optimization junkies who actually read analytics reports for fun.
We’re just geeks when it comes to this sort of stuff, I guess.
In this guide, we will share with you some field-tested methods that you can mimic to improve your product pages, which will help boost your business sales.
We’ve also created several ready-made eCommerce product page designs below (based on best practices) that you can adapt to your online store immediately.
If you haven’t chosen your online store builder yet, take a look at our top rated ecommerce platforms in the comparison table below:
If you haven’t read Part 1 to this guide, I suggest you read it first before progressing to this post just so you get the most out of this guide.
Guide Sections
Part 1: How to Design a Customer-Winning Product Page — 8 Must-Have Content to Supercharge Your Online Store
Part 2: [You Are Here] Anatomy of an Effective Product Page Layout Design — Ready-to-use Designs You Can Copy to Instantly Improve Your eCommerce Website
Side Note: These ready-made product page designs are based on research studies on consumer behavior. However, results could vary from website to website and from business to business. These design layouts are meant to give you the best possible starting point and you can continue to improve upon them. It is always a good practice to constantly test different methods to further optimize your online store.
On to Part 2…
Part 2: Anatomy of an Effective eCommerce Product Page Design
Designs that You Can Adopt and Use Immediately in Your eCommerce Website
Here at Website Builder Chart, we value good research & and proven methodologies, rather than intangible “stuff” like natural born design talents.
Let’s be honest, not everyone is born gifted with design and color-matching skills, so we’re not going to cram various design theories down your throat.
The 80/20 rule is to learn from successful online stores and understand what works for them and how they might work for you.
Why re-invent the wheel, right?
Here’s a recap from Part 1 where we’ve highlighted 8 elements that all successful eCommerce product page designs have.
Part 1: 8 Things You Need to Include in Your Product Page
Now, let’s get into how all these content elements fit together in a good, product page layout so you can optimize your online store.
#1 How To Prioritize Important Product Page Elements?
Some information is more important than others because they are what shoppers care most about and has the greatest impact on their purchasing decision-making process.
It is very important to identify what information matters most to your shoppers and make sure we place them in the most visible locations in your eCommerce product page design.
So how do we do that?
Basically, the layout of your product page is divided into two parts:
1. Above-The-Fold – content you can see WITHOUT scrolling down when your page loads.
2. Below-The-Fold – content you only see when you scroll down the page.
100% of your visitors will see the content Above-The-Fold, as it is the displayed on their computer screen right away.
Research has shown people tend to pay less attention to the content as they scroll down the page.
This is why it’s so important to plan which of the 8 product page items you should insert Above-The-Fold.
1. Elements Above-the-Fold
The following 6 items are arguably what your customers care the most about.
92% of customers make purchasing decisions based on these 6 items alone – so pay close attention!
- Product Images: Since we’re talking about shopping online here, your product images are the next best thing to being able to physically touch, hold and test your product before purchasing. Since this is so important to shoppers, high-quality product images must be the first thing your shoppers see when they load your product pages.
- Price: We are all sensitive to prices, whether we are buying a luxury gift to treat ourselves or just a cheaper everyday item. It doesn’t matter how much your shoppers love your products, they will not purchase them if the products were priced beyond their budgets. It is best to display your prices in an easy-to-spot location. It’s incredibly frustrating when you can’t locate the price easily.
- Product Variations (if any): If you have numerous product variations (color, pattern, etc.), displaying the actual product variations can improve your sales by 58%. Don’t just list out the color or pattern options, show them. Shoppers are visual people, so cater to that.
- Add-To-Cart Button: The #1 job of your product page is to get your shoppers to click the “add-to-cart” button. So make sure it is one of the easiest elements to spot on your product page.
- Customer Ratings: 85% of consumers read reviews before purchasing. So display your reviews prominently to show your shoppers what others think about the product.
- Address Uncertainties: 50% of customers said they didn’t buy online is because they have uncertainties — Will this product work for me? — How long will it take to get my stuff? — Are returns complicated? Make sure you address these issues head-on Above-The-Fold, such as providing a sizing chart or show a link to your shipping and return policies.
Let’s dig into more specific details about content that you should place Below-The-Fold.
Afterward, we’ll show you some eCommerce product page layout designs that you can imitate to help grow your business.
2. Elements Below-the-Fold
There are 4 content items that go Below-The-Fold that can make the difference between losing or winning a sale for you.
These 4 elements are “supporting” elements that are designed to help nudge a shopper who is on the verge of making a purchase, but needs a little bit more convincing.
- Product Descriptions: This is where you can educate your shoppers the way you want to. 79% of people are scanners, so make sure you include shorter versions of your description like the example above — “Versatile & Fast” or “Responsive Cushioning” — to give your shoppers quick snippets of reasons why and how this product can benefit them. For consumers who need more information, make sure you have a longer version of your description that describes how your product can solve their problems.
- Product Demo Videos: 31% of consumers purchase products after being convinced by product videos. This is the next best thing to having a salesperson show up at your doorsteps to show you how the product works.
- Customer Reviews: 85% of consumers read online reviews before buying. There are always uncertainties when shopping online. This is why a good collection of good and bad reviews can help nudge your shoppers into buying. When people feel they are informed after reading the pros & cons, they are more likely to take action.
- Recommended Products: This is a great way to cross-sell to your customers – just like Amazon. Recommended or similar products help your shoppers in two ways; (1) if the shoppers don’t like what they are looking at, you can show them similar products that they might actually prefer; and (2) if they like what they see, you can offer them similar or complementary products that they may also want to get. It is a win-win situation for you and your shoppers so why not include them on your product pages?
Now that you know what you should include in your eCommerce product pages, let’s explore various ways you can position these content items so you can create the best shopping experiences for your prospective customers!
#2 Effective eCommerce Product Page Layouts + Example Templates You Can Use Today
Simplicity is the key to a good product page design.
You want your shoppers to find the information they need quickly and effortlessly. So it is important to not over-design or over-crowd your product pages with unnecessary details.
As mentioned above, you don’t need to re-invent the wheel when it comes to designing eCommerce product page layouts.
There are proven-to-work designs out there already, so let’s explore what they look like and how you can use similar layout formats for your business.
We will show you:
- 3 top eCommerce product page layout designs you should use;
- How to decide which one best suits your store; and
- Where you can find these product page layout templates so you can get started right away.
Product Page Layout #1 – Universal
This layout is pretty universal so it can be used to sell pretty much any product.
People tend to read from the left to the right, so when you place your product image on the left, it immediately grabs your shoppers’ attention.
If they like what they see (first impression) they will likely stick around and read more about it.
Template Examples: Here are some free templates that have this type of product page layout design. You can click through to see them, sign up and start using them right away.
Make sure you visit their demo sites and click through to their product pages to study their layouts.
Product Page Layout #2 – Image-Focused
This product page layout emphasizes the product more than anything else.
This is an effective product page if you are selling creative or aesthetically-focused products — such as furniture, jewelry, handmade items, etc.
By placing a full-width product image across the top of the page, this guides your customers to focus on the beauty of your product.
Template Examples: Here are some templates that have this type of product page layout design. You can click through to see them, sign up and start using them right away.
Make sure you visit their demo sites and click through to their product pages to study their layouts.
Product Page Layout #3 – Feature-Focused
This is a layout that works well for products that focus on specifications and functionality rather than the aesthetics.
Some examples include software, tech devices, mechanical parts, etc.
When the visual appearances of the products are less important than the effectiveness of its functions, you want your product descriptions and specs to take center-stage.
In this situation, your product images serve only as supporting content to show your customer how it looks like, rather than enticing them to buy.
Template Examples: Here are some templates that have this type of product page layout design. You can click through to see them, sign up and start using them right away.
Make sure you visit their demo sites and click through to their product pages to study their layouts.
Don’t Know How To Best Design Your Home Page?
Let me guess – you’re not a skilled website designer, and you’re building a website and you want to make it awesome.
We’ll show you the anatomy to awesome, well-designed home pages. We’ll lay them out in simple diagrams and show you live examples so that even non-designers can understand – and copy!
Conclusion & Take Away
The first eCommerce store we’ve created went from zero sales to low 6 figures in 2 years. So, we completely understand the pain and joy of building an online store from scratch.
We’re not born with natural “eCommerce” talent, either, but after failing many times over, we figured out that to become successful, it often helps to study what’s working for others.
Optimizing your product page layout is one of the quickest ways to help boost your sales. While it is not the only thing you can do, it is one of the first places you should look at.
There is an endless list of things to test and optimize on your eCommerce website. Our advice is to not test or change 10 to 20 things on your website all at once. Instead, take care of the big things first like optimizing your product page design, craft an awesome home page design, category page, checkout page, etc.
Once you have the basics down, you can then progress onto more advanced conversion tactics. Always change only 1 or 2 things at a time so you can easily pick out what is working and what is not.
Found This Guide Helpful?
Question – Did this guide benefit you? Leave a comment below.
Do you know anyone who can benefit from this guide? Send them this page or click on the share buttons on the left.
You’ll be helping us out by spreading the word about our website, and you’ll be helping them out!
12 comments