Things To Keep In Mind While Designing An E-commerce Product Page

By Mohit Surati ECommerce, Shopify, WooCommerce March 11, 2019 13 min read 721 Views

According to a survey conducted by statista, retail e-commerce worldwide sales in 2017 was 2.3 trillion US dollars and it is expected that this figure will reach 4.88 trillion US dollars in 2021.

According to another research conducted by statista, the customer satisfaction index for the U.S. in 2017 was 74.3 index points.

According to a study carried out by statista, the online shopping cart abandonment rate worldwide in 2017 was 69.23%.

Now, if you sum up all the above statistics, then you can conclude the following things:

[1.] E-commerce sales are increasing day-by-day & it will keep on rising every year.

[2.] Despite so much awareness about e-commerce business, customer satisfaction rate is average and at the same time, the cart abandonment rate is very high.

From this analysis, you can be pretty sure that there something not right in the way e-commerce websites are being set up. Now, the most important page in any e-commerce website is the product page. The reason for that is, it is the one which attracts the visitors & brings the business.

Therefore, you should be very careful while designing the product page for your e-commerce website. Today, we’re going to provide you with a checklist which will help you to design the e-commerce product page in an effective manner.

So, fasten your seatbelts and get ready to ride on a rollercoaster where you will get to touch upon various aspects of the product page design.

1.  Amazing Product Images

As there is a famous saying that:

“A picture is worth a thousand words.”

The same applies to the case of an e-commerce product page, where product images matter a lot. Selling to your customers is all about presentation. Attractive product images make your product look better and more desirable.

Amazing-Product-ImagesAccording to a survey conducted by PoweredBySearch, 92.6% of the consumers say that visuals are the top influential factor which affects the purchasing decision. So, it is very clear that the quality of your product images directly affects your sales.

Therefore, having an amazing product image on your website should be your topmost priority.

Below are some of the golden rules for designing amazing product images:

Rule-1: Always Prefer High-Quality & Custom Images

You should always use high-quality images which are not too funny neither too small. If possible, always opt for custom images as it reflects your brand and helps you to stand out from the rest. In addition to that, each of your images should be of same size as well as style.


Rule-2: 360 Degree Views or Views From All Angels

Missing information and uncertainty is one of the primary reasons why people don’t buy a product from a particular e-commerce site. For that matter, you can provide the 360 views of your product which solves all the doubts of your customers.


As shown in the figure, Nike gives its customers every possible view of the shoes which takes away the uncertainty factor from them.

Rule-3: Product Variation Images

58%Increase in sales when there are multiple product views.

From these statistics, you can learn that the more product variation images (in terms of color, size, etc.,) present on your site, the more chances of increasing the sales.

If a buyer is looking to buy a product on your website and he/she can’t find any product variation images on your site, then he/she will feel frustrated by it and will leave your site.

Therefore, you should make sure that different variations of the products images are present on your website, as it will help the customers.


Amazon does this thing beautifully. As you can see from the figure that, there is an image of a different size as well as different colors. So, the customer will get an exact idea of what he/she will receive after the purchase.

Rule-4: Detailed Views

According to a survey by Forrester & UPS, 55% of the people don’t buy online as they prefer to examine the item in person.

Now, to solve that issue what you can do is provide a detailed & zoomable image which is the next best thing after the physical touch & feel.

Your products images should be such that the shoppers don’t need to go to a store and look for the actual product in person.


COLE HAAN does a great job of providing a detailed and zoomable view of their products, which helps them in increasing the sales for their e-commerce site.

Rule-5: Images With Context

“Will this dress look good on me?”
“Maybe, this looks on a 6’ model, but will it suit a 5’4” height women?”
These are some of the questions which Images With Context can answer. When you show your customers, how your products can be used in real-time, it helps them immensely.


As you can see in the pictures that, Handgraft display Images With Context in a beautiful manner. To show how Overhead Hold Bag works in a real-time scenario, they have displayed two images with a man using the bag at different places. It will help your shoppers.

2.  Helpful & Interesting Product Description

The product description is the second most important thing on your product page after product images. It helps your customer to know about your products in detail which eventually helps them in the purchasing decision. Therefore, you should give prime importance to this aspect.


eBay which is one most popular e-commerce website does this thing wonderfully well. As you can see in the screenshot that, they’ve provided the detail description of the HP Pavillion laptop. So, after reading this description, all the doubts of the customer will vanish.

What Makes A Good Product Description?

  • Try to be helpful, Not “Salesy”: You should always write a product description which helps customers to understand the product in a better way. Make sure you never over-promise, otherwise there will be a chance of negative reviews.
  • Only include information that shoppers care about: When you’re writing the description of your product, you should never write the technical specification that you get from the manufacturer. Write in a way which your shoppers could understand.
  • For example: If you’re selling an iPhone, then 16GB or 32 GB will tell the customer about the storage space, but it doesn’t tell them how much storage is enough for them. Instead of that, you can write like 16 GB iPhone can store up to 3,000 songs or 250 apps and 32 GB iPhone can store up to 7,00 songs or 400 apps.
  • Provide a short & long version of your description: Most of the people scan the product description rather than reading it and therefore, it’s important that you create a short and long version of your description. So, the people who want to scan can read the short version and the one who wants in-depth knowledge can read the longer version.

Read also: 4 Easy Hacks to Double Up Your E-commerce Sales without spending a penny

How To Write A Good Product Description?

  • Avoid Long Sentences
  • Avoid Cliches
  • Avoid Complex Vocabulary

3.  Product Demo Videos

Product Images are excellent, but the Product Videos are even better.!

31%consumers bought products after being convinced by the product videos.

Therefore, it becomes essential for you to have a good product demo video on your e-commerce product page. A good product video not only provides a touch of personalization to your shoppers but also becomes your primary source of traffic generation through YouTube.

Just by looking at the product video, a person can get the feel of how the product is in the real-time which is the next best thing after visiting a store & talking to a salesperson.


As you see show the screenshot that, Skiphop does a very good at displaying the demo videos of any product on their product page. For the moms who are wondering about how they can use the Zig Zag Zebra bag in an effective way, this video can be of real help.

You can Hire WooCommerce Developer to know more about how to embed a product video on your E-Commerce website.

4.  Clear Placement Of Price

Price is the most important for any of your shoppers and therefore, you need to display it in a prominent way. If your shoppers can’t find the price tag on your product page, then he/she will surely get frustrated by that and will leave your site.

How To Display Your Price Clearly On Product Page?

  • Use a large font size: You should display the price with the largest font size on the product page.
  • Use contrasting tone: Always use a color for the price which makes it stand out from the rest of the product page.
  • Place it near the Buy Button or Title: Placement of the price is also the key to your successful product page and therefore, you should place your price near the buy button or title. The reason for that is, they are ones who grab a lot of attention from the people.

Real-Time Example Of Good Price Placement

Amazon, one of the leaders of the e-commerce business does this thing well. They have displayed the price in a different color from the rest of the product page. In addition to that, they have placed the price just below the title which grabs a lot of attention.

5.  Clear Add-To-Cart Buttons

The primary goal for the product page is to make your customer click on “Add-To-Cart” button, as it will bring the business to your website. Therefore, your “Add-To-Cart” button should be the most dominating element on your product page.

A great “Add-To-Cart” button helps your customers to know what the next step if they want to purchase any product and gives them the right direction.

What Should Be Your Ideal Add-To-Cart Button?

  • It should have a contrasting color: Studies have shown that the orange and green color button gets the maximum clicks. However, it all depends on your product page design, but you should choose such a color which stands out from the rest of the page.
  • Use a sizable button & text: Make sure that your button is large enough, but not too large. Your visitors should be able to find the “Add-To-Cart” button within 3 seconds.

Real-Time Example Of Good Add-To-Cart Button

Good-Add-To-Cart-Button, which is a trendy sports brand does an excellent job of displaying an excellent Add-To-Cart button. They have chosen the green color for the button which makes it stand out from the rest.

6.  Displaying Customer Reviews & Ratings

According to research, 85% of the customers read online reviews and ratings before making a purchasing decision. Therefore, you should start collecting reviews from your customers on your product page.


Most of the companies don’t like to display reviews on their product page, as they fear that one bad review may affect the impression of the company.

As there is a famous saying by great Sachin Tendulkar that:
“When people throw stones at you, turn them into milestones.”
The same applies to the case of negative reviews where if you can handle them with care, then that could help you establish the trust among your customers. You should always answer your negative reviews with professionalism and courtesy. Always try to think from the customer’s perspective and provide them with a good solution.

7.  Address Uncertainties

  • “Is this website safe?”
  • “How long it will take to get my stuff?”
  • “What is the product return policy?”

These are some of the questions that shoppers have in mind when they’re thinking of purchasing a product from your site. Therefore, you need to address all these uncertainties and take away the fear factor from your customers. Once you do that, then people will purchase from your store.

Following are some of the most common uncertainties and ways to address them:

Security Concerns: To address this issue, you should add trustworthy credit card logos on your product pages.

Fit Issue: Add a sizing chart next to the size options.

Shipping Cost Issue: Add your shipping policy near the product description.

Return Concerns: Add your return policy near the product description.

The bottom line is that you should provide answers to all the concerns of your customers, as it will create an opportunity for you to increase your business.

8.  Show Related & Recommended Products

Are you someone who regularly does online shopping? Then, you may have seen the recommended products on the product page. Related and recommended products are the best way cross-sell to a customer.

For those who don’t know, Cross-Selling means you’re offering similar products that the shoppers might like as well. For example: If someone is looking to buy a Punjabi Recipe book, you can also provide them a Dessert Recipe book.

Amazon is someone who masters in cross-selling. They seem to have an uncanny way of predicting what each customer will like and based on that; they place a recommendation for each person. By implementing this concept, they have been able to grow their business.

As shown in the screenshot above, when I’m looking to buy an MRF cricket bat, Amazon will offer me plenty of other cricket bats as a recommendation. It is known as cross-selling.

There are two significant things that you should remember while implementing Cross-Selling:

  • Offer your shoppers more products that they might love.
  • Offer them similar, but different selection if the products they’re looking for is not right.


Designing a right product page is critical to the success of your e-commerce business. There are so many factors which affect the design of the product page and remembering them would be quite a task for any business owner.

If you ask any WooCommerce Development Company about the most critical part of E-Commerce website development, then they will surely tell you to focus on product page design.

In this blog, we have provided the checklist for designing a excellent e-commerce product page which will make your job much more comfortable.

What are your thoughts on this article? Is there any suggestion that you want to give us or any question that you may want to ask? Then, leave your thoughts in our comment section.

We will try to answer each of your queries to the best of our abilities. Thank you.!

Disclaimer: We at eSparkBiz Technologies have created this blog with all the consideration and utmost care. We always strive for excellence in each of our blog posts and for that purpose, we ensure that all the information written in the blog is complete, correct, comprehensible, accurate and up-to-date. However, we can’t always guarantee that the information written in the blog correct, accurate or up-to-date. Therefore, we always advise our valuable readers not to take any kind of decisions based on the information as well as the views shared by our authors. The readers should always conduct an in-depth research before making the final decision. In addition to these, all the logos, 3rd part trademarks and screenshots of websites & mobile apps are the property of the individual owners. We’re not associated with any of them.

Mohit Surati

Mohit Surati

A post-graduate in Computer Engineering. Passionate about innovative writing & Content Marketing. A rich vein of experience in writing articles related to WordPress right from plugins, themes, customization, security, WooCommerce & Gutenberg. Pens down his thoughts for eSparkBiz @Custom WordPress Development Company where you can Hire WordPress Developer as per your requirements.


Follow us

Subscribe Newsletter

Call us Today


Got any Questions?
call us Today!

+1 408 850 1488 [email protected]

Our Guides

Related Post

15 Best Shopify Plus Apps of 2020 to Run Your Storefront

15 Best Shopify Plus Apps of 2020 to Run Your Storefront

Shopify has created a great marketplace for everyone who wishes to sell their products online. Shopify Plus has added a charm to this platform. Today,…

Things To Remember For Choosing a Payment Gateway For Website

Things To Remember For Choosing a Payment Gateway For Website

For any business, it is imperative to choose the best Online Payment Gateway. eCommerce Marketplace is growing exponentially and it's holding immense potential. There’s a…

1 Share
14 Reasons Why SMBs Choose Shopify Plus As Their E-Commerce Platform

14 Reasons Why SMBs Choose Shopify Plus As Their E-Commerce Platform

The above quote is good enough to understand the importance of E-Commerce in today’s day & age and how it has impacted the daily lives…

Share via
Copy link
Powered by Social Snap