Product Page Design Best Practices - Make your pages sell themselves

Warning: Undefined array key "type" in Drupal\dxpr_builder\Service\DxprBuilderService->loadCmsElement() (line 612 of modules/contrib/dxpr_builder/src/Service/DxprBuilderService.php).

Drupal\dxpr_builder\Service\DxprBuilderService->loadCmsElement(Array, '', Array, Object) (Line: 1250)
Drupal\dxpr_builder\Service\DxprBuilderService->parseDocumentForCmsElements(Object, Array) (Line: 1085)
Drupal\dxpr_builder\Service\DxprBuilderService->parseForContent(Array, ) (Line: 333)
Drupal\dxpr_builder\Service\DxprBuilderService->updateHtml('<a data-cke-saved-href="/search" href="/search"></a><a class="az-button-content btn btn-primary btn-block" draggable="false" data-cke-saved-href="/contact-us" href="/contact-us" role="button">Let's Talk </a><ul class="language-switcher-language-url"><li><a draggable="false" data-cke-saved-href="/en-UKI" href="/en-UKI">United Kingdom</a></li><li><a draggable="false" data-cke-saved-href="/de" href="/de">DACH</a></li></ul>', ) (Line: 466)
Drupal\dxpr_builder\Plugin\Field\FieldFormatter\DxprBuilderFormatter->viewElements(Object, 'en') (Line: 91)
Drupal\Core\Field\FormatterBase->view(Object, 'en') (Line: 268)
Drupal\Core\Entity\Entity\EntityViewDisplay->buildMultiple(Array) (Line: 339)
Drupal\Core\Entity\EntityViewBuilder->buildComponents(Array, Array, Array, 'full') (Line: 281)
Drupal\Core\Entity\EntityViewBuilder->buildMultiple(Array) (Line: 36)
Drupal\block_content\BlockContentViewBuilder->viewMultiple(Array, 'full', NULL) (Line: 24)
Drupal\block_content\BlockContentViewBuilder->view(Object, 'full') (Line: 189)
Drupal\block_content\Plugin\Block\BlockContentBlock->build() (Line: 171)
Drupal\block\BlockViewBuilder::preRender(Array)
call_user_func_array('Drupal\block\BlockViewBuilder::preRender', Array) (Line: 111)
Drupal\Core\Render\Renderer->doTrustedCallback('Drupal\block\BlockViewBuilder::preRender', Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 859)
Drupal\Core\Render\Renderer->doCallback('#pre_render', 'Drupal\block\BlockViewBuilder::preRender', Array) (Line: 421)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 493)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 240)
Drupal\Core\Render\Renderer->render(Array) (Line: 475)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 92)
__TwigTemplate_bd317ee531f8f4d48918a95a47930c87->doDisplay(Array, Array) (Line: 394)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 367)
Twig\Template->display(Array) (Line: 379)
Twig\Template->render(Array) (Line: 38)
Twig\TemplateWrapper->render(Array) (Line: 39)
twig_render_template('themes/custom/visionet/templates/page.html.twig', Array) (Line: 348)
Drupal\Core\Theme\ThemeManager->render('page', Array) (Line: 480)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 240)
Drupal\Core\Render\Renderer->render(Array) (Line: 475)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 124)
__TwigTemplate_14a01c6ebb3394160545ed3d8d84ecaf->doDisplay(Array, Array) (Line: 394)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 367)
Twig\Template->display(Array) (Line: 379)
Twig\Template->render(Array) (Line: 38)
Twig\TemplateWrapper->render(Array) (Line: 39)
twig_render_template('themes/custom/visionet/templates/layout/html.html.twig', Array) (Line: 348)
Drupal\Core\Theme\ThemeManager->render('html', Array) (Line: 480)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 240)
Drupal\Core\Render\Renderer->render(Array) (Line: 158)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 627)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 153)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 111)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 186)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 76)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 28)
Drupal\Core\StackMiddleware\ContentLength->handle(Object, 1, 1) (Line: 32)
Drupal\big_pipe\StackMiddleware\ContentLength->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 36)
Drupal\Core\StackMiddleware\AjaxPageState->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\StackedHttpKernel->handle(Object, 1, 1) (Line: 704)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)

Warning: Undefined array key "type" in Drupal\dxpr_builder\Service\DxprBuilderService->loadCmsElement() (line 617 of modules/contrib/dxpr_builder/src/Service/DxprBuilderService.php).

Drupal\dxpr_builder\Service\DxprBuilderService->loadCmsElement(Array, '', Array, Object) (Line: 1250)
Drupal\dxpr_builder\Service\DxprBuilderService->parseDocumentForCmsElements(Object, Array) (Line: 1085)
Drupal\dxpr_builder\Service\DxprBuilderService->parseForContent(Array, ) (Line: 333)
Drupal\dxpr_builder\Service\DxprBuilderService->updateHtml('<a data-cke-saved-href="/search" href="/search"></a><a class="az-button-content btn btn-primary btn-block" draggable="false" data-cke-saved-href="/contact-us" href="/contact-us" role="button">Let's Talk </a><ul class="language-switcher-language-url"><li><a draggable="false" data-cke-saved-href="/en-UKI" href="/en-UKI">United Kingdom</a></li><li><a draggable="false" data-cke-saved-href="/de" href="/de">DACH</a></li></ul>', ) (Line: 466)
Drupal\dxpr_builder\Plugin\Field\FieldFormatter\DxprBuilderFormatter->viewElements(Object, 'en') (Line: 91)
Drupal\Core\Field\FormatterBase->view(Object, 'en') (Line: 268)
Drupal\Core\Entity\Entity\EntityViewDisplay->buildMultiple(Array) (Line: 339)
Drupal\Core\Entity\EntityViewBuilder->buildComponents(Array, Array, Array, 'full') (Line: 281)
Drupal\Core\Entity\EntityViewBuilder->buildMultiple(Array) (Line: 36)
Drupal\block_content\BlockContentViewBuilder->viewMultiple(Array, 'full', NULL) (Line: 24)
Drupal\block_content\BlockContentViewBuilder->view(Object, 'full') (Line: 189)
Drupal\block_content\Plugin\Block\BlockContentBlock->build() (Line: 171)
Drupal\block\BlockViewBuilder::preRender(Array)
call_user_func_array('Drupal\block\BlockViewBuilder::preRender', Array) (Line: 111)
Drupal\Core\Render\Renderer->doTrustedCallback('Drupal\block\BlockViewBuilder::preRender', Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 859)
Drupal\Core\Render\Renderer->doCallback('#pre_render', 'Drupal\block\BlockViewBuilder::preRender', Array) (Line: 421)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 493)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 240)
Drupal\Core\Render\Renderer->render(Array) (Line: 475)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 92)
__TwigTemplate_bd317ee531f8f4d48918a95a47930c87->doDisplay(Array, Array) (Line: 394)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 367)
Twig\Template->display(Array) (Line: 379)
Twig\Template->render(Array) (Line: 38)
Twig\TemplateWrapper->render(Array) (Line: 39)
twig_render_template('themes/custom/visionet/templates/page.html.twig', Array) (Line: 348)
Drupal\Core\Theme\ThemeManager->render('page', Array) (Line: 480)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 240)
Drupal\Core\Render\Renderer->render(Array) (Line: 475)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 124)
__TwigTemplate_14a01c6ebb3394160545ed3d8d84ecaf->doDisplay(Array, Array) (Line: 394)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 367)
Twig\Template->display(Array) (Line: 379)
Twig\Template->render(Array) (Line: 38)
Twig\TemplateWrapper->render(Array) (Line: 39)
twig_render_template('themes/custom/visionet/templates/layout/html.html.twig', Array) (Line: 348)
Drupal\Core\Theme\ThemeManager->render('html', Array) (Line: 480)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 240)
Drupal\Core\Render\Renderer->render(Array) (Line: 158)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 627)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 153)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 111)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 186)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 76)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 28)
Drupal\Core\StackMiddleware\ContentLength->handle(Object, 1, 1) (Line: 32)
Drupal\big_pipe\StackMiddleware\ContentLength->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 36)
Drupal\Core\StackMiddleware\AjaxPageState->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\StackedHttpKernel->handle(Object, 1, 1) (Line: 704)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)

Featured Image

Listen to this blog

Written by Jocelyn Lin, Creative Director & AJ Leale, Sr. Director eCommerce
The global eCommerce revenue growth came near $3 trillion in 2018 and continued to grow steadily in 2019 – but not for everyone!
Sometimes, there isn’t much of a difference between a success story and a fail; the Devil is in the details, and some of those could be found on your product page. Go through our Product page design checklist and make sure you’re doing everything you can to provide a spotless user experience!

Product page Design – overall page styling

Modern, clean and simple product page layout with recognizable branding is all you need. Prioritize quick loading over redundant details!

What should a Product page contain?

When you think about a perfect product page design and content-imagine the info you would like to obtain, and then add some more, in accordance with your target audience research.
A pretty universal list for product page includes:

Product Images with Titles
Demo Video (if possible)
Price (with discounts visibly shown)
Short description
Variations in design and color (if available)
Availability (in or out of stock) / Sizing
CTA buttons: Add to bag / Add to wishlist / Share
Shipping options
Additional details
What it’s worn with (other items in the picture, if any)
Social proof
Reviews / Rating / Questions buttons
Related / Similar /Recommended products

Prioritizing product page design elements

The product page layout consists of two parts – the one you see without scrolling (above the fold), and the one you need to scroll to see (below the fold). The key elements that determine purchase decisions are placed above the fold; if customers want to know more, they can scroll below the fold.

Elements Above the Fold

Since more and more online shopping takes place via mobile phones, make sure these elements are instantly visible when the page loads.

Product Images

The next best thing to seeing the product in person, so it’s crucial they’re top-notch!
You need high-quality photos that showcase the items at their best, from different angles, with zooming options to see the details.
Context is important too – let the customers see how the clothes look like on different bodies; weight, height and skin tone vary, and a couple of additional photos can make a huge difference.

Add-to-bag button

Being the most important one, the Add-to-cart button comes first – place it right next to the product image.

Pricing

No matter how much people like your product, the price determines whether they’ll buy, so it only makes sense to display it visibly.

RELATED: Best Practices for eCommerce Checkout That Are Guaranteed To Help Boost Sales and Increase Conversions

Product Variations

Customers need to know if their size is available (you can describe the measurements later!) and if there are other colors and design options.
Provide full images of different styles, if possible on different looking models; you can place them in the slideshow, or create small sample boxes customers can hover to reveal the photos.

Availability

Tell people whether the desired item is in or out of stock; a good idea is to add another CTA button in this section – customers can subscribe to the newsletter, and be notified when the item is back in stock right away!

Rating

Everybody resorts to reviews in order to make the decision; you can show the average star rating above the fold, and place the user reviews below.

Elements Below the Fold

These might come second, but it doesn’t make them any less important! This is the place where people who are still making up their minds decide whether to buy.

Detailed description

A compelling product description should be highly informative, well-structured and witty.
The inverted pyramid rule works here too: important details first, background info later. The description should be scannable – bulleted text divided into short, logical paragraphs. Add a witty remark or a joke (don’t overdo it!) to engage with your target customers better.

Want to know more about eCommerce UX? Read these 9 Most Important UX Principles for eCommerce Success

Product Demo Videos

A good quality demo can serve not only as a tutorial but also as a hype-generating teaser.
The shorter, the sweeter is a general rule, thanks to our decreasing attention span, but optimal video length depends on the type of product. Aim for videos lasting no longer than a minute, although a well-made 90-second video can hold the attention long enough.
Just don’t make it boring and pay attention to the first visible frame and the first seconds of the vid.

Related products

Here you can show some similar products that people would prefer – or buy in addition to their first option!
Some more elements you should include below the fold are:

FAQ and question form
Shipping and Returns Policy
Sizing and measurements guide
Social Proofs (Instagram photos slideshow and praising reviews, especially from the influencers or celebrities)

We managed to design the product pages for our clients exceptionally – you can check out our success stories with Vitamin World and Rebecca Taylor.
Want something like this for yourself? Feel free to contact us!

Similar Posts

Listen to this blog

Product page Design – overall page styling

What should a Product page contain?

Prioritizing product page design elements

Elements Above the Fold

Product Images

Add-to-bag button

Pricing

Product Variations

Availability

Rating

Elements Below the Fold

Detailed description

Product Demo Videos

Related products

Services

Products

Quick Links

Contact

Product Page Design Best Practices – Make your pages sell themselves!

Similar Posts

Listen to this blog

Product page Design – overall page styling

What should a Product page contain?

Prioritizing product page design elements

Elements Above the Fold

Product Images

Add-to-bag button

Pricing

Product Variations

Availability

Rating

Elements Below the Fold

Detailed description

Product Demo Videos

Related products

Services

Products

Quick Links

Contact