fbpx Skip to content

Simplify your product details page text and layout

Simplify your product details page text and layout

Keep it simple and easy to scan. Most customers don’t want to wade through a lot of text. The customers that do want to dive deeper into the details won’t be dissuaded by clicking or tapping to reveal more info. Rather than showcasing full-length textual descriptions that fill the page, consider the following options.

 

Expandable descriptions

One way to keep the page decluttered is to only show a summary of the description (or just the first few lines) followed by a “learn more” style link. The link could either:

  • Have the full description expand in place
  • Jump to another part of the page, below the fold, where the full description is

When you provide just an initial summary, instead of the full description, you present a cleaner design that lends well to scanning. Too much info at once can be overwhelming.

Example: Kate Somerville

In this example, the summary links to the product info down below the fold of the page.

Product Information

 

Collapsible sections

You can use tabs or accordions to separate commonly themed info into smaller bite-sized sections that are more easily consumed and lets customers find what they’re interested in faster.

  • Leverage this format to include sections for other things on the page, like reviews.
  • Test different colors, shapes, fonts, etc. to see what stands out and resonates well
  • Make sure the designs are easy to interact with (e.g. bigger buttons on mobile)
Example: Sephora

In this example, Sephora uses tabs on desktop and accordions on mobile to break up the text and make it easier to scan. On mobile, they also collapse the main description, showing customers just the key info up-front and allowing them to view more info by tapping read more.

Desktop:

Collapsible Content Sections
Mobile:
Product Details Page on Mobile

 

Image focused

Another approach to consider is removing the majority of text entirely from the initial view. The page would focus on bigger product images, presented in a gallery. The majority of the visible text above the fold would consist of your Add to Cart CTA, navigation, and key info. Any other details would be hidden away from the initial view.

Any product info that you want to present could be moved:

  • Within an expandable section under a “more info” / “details” link.
  • Behind a rollover attached to the image or a CTA.
    – For instance, if a customer mouses over the element, the text would appear in an overlay.
  • Below the fold, so that it only appears when customers scroll down.
Example: Apple

Apple’s website is very visual, often taking a minimalist approach to verbiage. In a way, they rely on product images to sell the products. The iPhone 12 PDP, for instance, essentially presents you with the product image and a blue Buy CTA.

  • The initial view begins with an animation of the phones spinning.
  • After the animation ends, a product image remains with 4 CTAs at the top: Overview, Tech Specs, Buy, and offers.
  • If you scroll down, summarized product info begins to appear.
  • Customers can scroll further or click Tech Specs to dive into the product details.
Apple iPhone Product Page
Share
Share on facebook
Share on twitter
Share on linkedin
Share on email

Download our free guide to Intelligent Website Optimization.

Sign up to download our free guide to Intelligent Website Optimization and receive communications about Intellimize products and services. By entering your email you agree to the Intellimize privacy policy.

Request a Demo

So we can connect you with an Intellimize expert, what's the best work email to reach you?

We will use your work email to determine your company and connect you with your Intellimize representative. We will also send you communications about Intellimize products and services. By clicking submit you agree to Intellimize privacy policy.

How Drift Drove 322% More Leads to Sales and $1M Incremental Revenue from 1 Landing Page