E-Commerce Checklist

Explore

Product Pages

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?

Visitors want to spend as little time as possible, looking for the information they need. And if they don’t find it fast enough, they will leave. So summarizing key information and giving it to them early will make sure as many visitors as possible actually know the benefits of your product, and allow them to make a purchase decision faster.

Here’s a great example from DB 👇🏼

⁠

⁠

Another great example is Caraway:

⁠

Place_the_best_product_benefits_and_selling_points_for_your_product_in_bullet_points_above_the_purchase_button._Visitors_want_to_spend_as_little_time_as_possible_looking_for_the_information_.png

⁠

Another great example is Larq:

⁠

⁠

Image of payment solutions

Customers like to plan how they will pay before adding products to cart, so add an image of available payment solutions to increase conversion rate. Make sure that all payment solutions are showing.

Example from Icon:

⁠