Skip to content
Product Sections
Product section is at the top of the product page
This is referred to as the product section:
We want this section to be at the top of the page, because it shows the visitor all of the information they need to make a purchase decision.
Product section has an optimised, standardised template
A recognisable, well structured layout will increase trust and make it easier for customers to process information and navigate.
Here are some examples of high-converting product sections 👇🏼
Product rating is visible under the product title
Colours & Variants
Illustrate colours and variants with images in addition to text, to make it easier to visualize different versions of the product.
Notice how Larq visualizes different options and colours:
Another great example is Caraway:
Automatic variant matching
Make sure product images are connected to each variant and automatically adjust when a different variant is selected. Example 👇🏼
Call to action
There is only one type of call-to-action button, avoid stacking 2 different call-to-action buttons on top of each other within the product section. Choose one and call it either “Purchase” or “Add to cart” and use the same word throughout the entire product page.
Notice also how colours make the button more visible and clickable.
Product Benefits
Place the best product benefits and selling points for your product in bullet points above the purchase button or inside the product section. What is great about this product? How will it add value to customers life? How does it solve their problem?
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ··· in the right corner or using a keyboard shortcut (
CtrlP
) instead.