Product pages are the moment of the truth for your eCommerce site. If your sales haven't increased as expected, it’s time to look back on your current product page. Is it remarkable?

Beautiful design product page is important to appeal to your customers in the first sight. But product pages aren’t just a pretty landing page for purchasing. They’re your doorway to gaining customers. The key to creating a successful product page is to know what visual stimulus helps you attract the consumers you are targeting, and make them react the way you want them to, then convert them into leads. Many store owners spend time tweaking their product page but forget to the main purpose is make your visitors become your customers.

You may not know: Companies that design with conversion optimization in mind are 2x as likely to see a huge increase in sales.

But, 96% of people that come to your website aren’t ready to buy (according to Kissmetrics Blog)

So, it’s your job to convince them, converting website visitors into buyers and repeat buyers.

This article helps you identify top must-have elements in a product page, where to place them and give you tips how to make them win your customers. Let’s get started!

1. Product Image

Shoppers always look for products and often come to the website through images on search engines, because humans process imagery much faster than we do text, so naturally we’re drawn to visuals. It helps your visitors see the product in the most obvious way so that they will imagine how they will be if they wear the clothes you sell, or use your products. So, the more images that you have, the better, so show off your product at different angles and in different contexts. Your users want to see your product in action. That’s why it’s chosen as the first element in this post!

As the product image made up a huge part to attract your customers, it should be placed where people want to see, where they can see it first. That means it must be placed above the fold, front-and-center, to get your customers’ first impression.

These images should be prominent, appealing and compelling. Using some special effects for your product images will help them more attractive to your visitors.  Don’t forget that your images should be quick to load, zoomable and mobile-friendly - that means your visitors can see your images via any devices.  Invest in good photography up front, and be sure to highlight and provide access to multiple views and photos in the UI and you’ll make them outstanding and prominent.

Moreover, A good idea is to remove the background and let your products do the talking. Simple, white backgrounds draw attention to the product and will match any website design, so you won’t have to change your image or your image background when you change your template.

Bonus: Videos are an extremely powerful way of convincing shoppers to purchase. It’s a viral way to increase customer trust in your product.  Product videos can deliver such experience. Viewing product videos boosts confidence, engagement, and purchasing along with subsequent loyalty toward websites.

2. Product Title

How you name your product reflects how you show it as well as how its value is. It’s absolutely the wrong opinion that the name of your product shouldn’t affect the conversions because the title is the first impression made on potential buyers that raise discoverability and dictates how the product will be indexed on the website. It’s a good practice to be transparent and straightforward when creating your product titles.


There’re some discussions about where to place product title, and there is some online store use different ways to put the title. If you like to follow the rule of eye-tracking studies which say that the eyes naturally tracks from the top left to right on a page, the eye naturally flows top-down by placing the product title to the top left of the page. Alternatively, the majority of brands place the product title in the top right corner.

Men Fashion Idochino uses eye-tracking rule.

While Floyd opt to put their product title on the top-right corner.

Of course, it’s up to you and the strategy of your Marketing Team and UX Design Team. Whatever corner you choose to place the title, remember to make it clear, bold, strong and stand out.

Your title should contain the most important keywords to raises your customers' discoverability. For SEO purposes, make sure your title tags are unique for each product page. You can mention your brand, your kind of product, model, item, etc. in the enough length.

3. Product Description

Product description is an important part of the conversion process. It is a chance to build trust, create desire, and make an emotional connection with your user. Once you master the art of the product description, you’ll be soaring to new heights of conversion optimization.

Your product description should be placed directly under your product title - which is usually an <h1> element, will help search engines crawlers determine if your product page “flows well”.

A good product description should:

  • Match your company language and tone of voice
  • Be custom crafted
  • Turn features into benefits
  • Answered all frequent customer queries
  • Be persuasive
  • Include keywords
  • Be balanced in the page structure

Overall, good product description should contain the answers to these questions: What? How? Why?

  • What is it?
  • How was it made?
  • Why should they buy it? (also how it solve their problems)

It’s your job to show your product USPs, show off what makes your visitors attracted and what you will bring to them. The best product descriptions are the ones that help the shopper to envision their life being better with your product.

Product description should be long enough for customers to understand your product. Remember that the quicker they understand your products (to determine whether or not your product can fulfill their needs in some way), the more likely they will be to convert.   This is especially important with products people are not familiar with.

The best product descriptions are the ones that help the shopper to envision their life being better with your product.

4. Fit Guide/Size Selector

In addition to product description, Fit Guide is an important part that helps you build trust with your customers. It’s ideal to place it under the product description. As buying online make consumers feel hesitated -  they always tend to avoid risk ending up with an item that doesn’t fit, then Fit Guide will help them feel secure when buying your product.

Fit guide should be detailedly shown via a large photo.

Size Selector have a huge impact on your product page conversions. You can offer your customers many options so that it will help reduce their fear. Individual size buttons (S, M, L) are hard for users to navigate on mobile (people have fat fingers!) AND take up too much space. It’s much easier to use a pop-up selector, which has the added benefit of taking up far less of that precious limited mobile real estate.

It should be placed under description, near the Fit Guide because when customers choose a size they may need to ask about measurement. If there is not any guide near the size selector, the visitors may feel confused and of course, that affect negatively on your conversion rate.

5. Urgency

When you give shoppers time to think, they’ll delay in making their purchase. If this delay happens long enough, they might not make a purchase at all! Making visitors feel urgent is a trigger to keep them on your page. If they hesitate to buy, they’ll be likely to leave your page. To avoid this situation, make them feel that if they don’t buy know, they will never get to buy.

It should be placed near the CTA button. People are likely to click this button when they feel urgent and not delay anymore.


6. Art to Cart Button

This is the money button! It has a huge impact on conversions because it takes people’s attention and they’ll be likely to click.

It should be placed in the hierarchy of information about the product and it might be the final step of the funnel. Make it big, clear, contrast and stand out from the rest of the page, and don’t distract with clutter or other competing design elements, and remember to make it central (especially on mobile).

The copy is also important. It should match the actual action of the button. In product page, it may be "Add to Cart" or "Buy Now" button. Supporting information also plays a considerable role. A short statement supports or clarifies the CTA purpose of the button can make the CTA Text shorter (smaller in size than the main button and placed beside the button). 

Pointing to your call-to-action is a great way to make it stand out, and guide your prospects attention to where you want them to click.

Extra Tip: See if your button stands out is by taking the “one-second test.” Look at your product page and ask yourself: "What do my eyes focus on within the first second of looking at this page?"

When you look at a product page, you probably focus first on the product photo and then on the add to cart button. But you may even look at the button first, it's great!

Look at this product page of ShopBop and find out what makes you focus first:

7. Customer Review

Consumers place a lot of trust in one another. Product reviews are an essential part of an online store’s branding and marketing. They help build trust and loyalty and typically describe what sets your products apart from others. Your visitors read the good, the not-so-good, and the downright ugly to make an all-important decision: Should I pull out my wallet and take the plunge? Listing the reviews right on the product detail page is a highly effective conversion tactic. The more reviews you have, the more convinced a shopper will be that they’re making the right decision. They also help you boost your search engine rank. Moreover, getting customers’ reviews may give you not only great feedback, but also ideas for improvements, or even incredible marketing ideas!

The best place for this element is below all of the product photos, description or information like size, color,... and especially CTA button! If you don’t want to distract them from “add to cart” button, just place the reviews under all of the necessary elements. If visitors really want to learn more, they will scroll down.

Sometimes you may get some bad reviews, don’t be afraid! As we have mentioned above, it’s a beneficial advice for your improvement, and remember to deal with these reviews politely and enthusiastically.

8. Product Recommendations

Product Recommendations are suggested product based on the items your customers have browsed or previously purchased. It’s a good chance for additional purchase. Or if the product on the current page is not right for your customers, you at least want them to stay on your site looking for other products to avoid missing a sale. This way is also called cross-sells (related products).

9. Social Sharing Button

Social share buttons give customers the ability to display their eCommerce purchases on Facebook, Twitter, Pinterest or other platforms. You may want to integrate social media sharing buttons to give people the chance to share your products. However, according to a study from Visual Website Optimizer, social media buttons on product pages had 11.9% lower conversions than product pages without social media buttons. One of the main reasons is this can cause the visitor distrust your brand and the quality of your product.

But it still has a considerable impact on your conversions if you integrate this button on the confirmation page, right when the purchase has been completed. It’s time to encourage sharing!

10. Mobile Optimized

It’s an effective element that can boost your sales considerably!

Mobile shopping is popular and essential today. In fact, Anna Dahlström, the GeekGirl, cited that 90% of users start a task on one device and finish it on another. That means your mobile product page needs to be consistent with the desktop version, and capable of saving progress for a seamless transition from one device to the next, which is critical to users when they're making a product decision.

Google has a number of tools for testing for mobile usability and, beyond that, Search Console has a mobile usability report that details problems on a page-by-page level.


Above are some of essential elements and tips to boost your sales with product page design. However, it will never end. You need to always test and improve the results through each test. Test to convert, test to learn! Compare your product page with others which have higher conversion and find out what makes differences, and you will increase the conversion of your product page.
If these tips are supportive, don’t hesitate to share with your friends and please give us your comments or recommend more tips for the better.

 Start Now: Create Your Product Page With GemPage - The World #1 Drag And Drop Page Builder For Shopify