Product pages are an essential part of any ecommerce website, given that they are how you present your product to potential customers. The most important part of these pages is what is shown above the fold, or what customers immediately see on the screen without scrolling.

However, as with most other aspects of website design, creating an effective product page for mobile is slightly different than on desktop or other device – especially considering the small screen size. Thus, the most critical aspects of a mobile product page design one should focus on are image placement, easy to click cart buttons, and clear, easy to read titles and descriptions.

Image Placement

A product image can make or break a sale. Thus it should be front and center on any product page. The image should be high quality and easy to see in full, without needing to zoom in on the phone. Yet, it shouldn’t take up the whole page.

One great way to make use of limited space above the fold on mobile pages is to provide a side scrolling mechanism that allows the customer to quickly view other images. This may not technically count as “above the fold” (as it still requires some scrolling effort); but on a mobile device, swiping your finger left and right isn’t hard to do. The first image you show should still be the one meant to catch and keep the consumer’s attention and interest.

Buttons

Make buying for your customers as simple as possible by using clear Call-to-Actions and Buy/Add-to-Cart buttons. Any buttons should be large enough to touch without accidentally clicking something else, and should be easy to read and see. These buttons should be located above the fold and clearly legible in color. Use bright and bold colors to further attract their attention, maintaining legibility.

Target’s Add-to-Cart button is located above the fold. It’s bright, clear and large, so it’s easy to see and click.

Titles and Descriptions

You likely won’t have space to put in a full product description, but customers need to be able to see the product title and price without having to scroll down. These two elements are important, and need to be clear and large enough to easily read. If there is room, it’s also a smart idea to include product ratings above the fold (if your products have them).

You can learn more about optimizing titles and descriptions for mobile display here.

Overall, a mobile product page should be:

• Easy to read.
• Easy to interact with.
• Simple.

Put the basic and important features at the top so your customers can quickly learn what they want to know without having to scroll, and avoid cramming too much information into this area so that things don’t look cluttered.

It’s important to keep user experience in mind when designing pages for different devices. The ideal layout for mobile devices might not be ideal for desktop users. If that’s the case, consider dynamically serving pages to mobile devices. You can learn more by reading this post about dynamic serving.

If your website’s mobile experience needs some help, feel free to contact us for assistance.