Each Page of Your Ecom Store Plays a Pivotal Role in Making the Sale

Many online store owners think of their website as a whole, but it’s crucial to break your store down and optimize each page separately. Why? Because despite what you may think, not every page should be directly aimed at making the sale. Obviously, everything on your site should work together synergistically to achieve success in the end, but each step has unique and individual goals, and not having clarity about this can hurt your store’s performance tremendously.

In this article, we’ll focus on the objectives of the following store pages: homepage, category/collections, product, cart, and checkout. By implementing this content, you’ll be able to leverage your website and make the navigational flow much easier for your customers … and, in turn, make more sales!

Homepage

Goal: To build trust and provide clarity on next steps. 

When someone lands on your website, they should be able to tell exactly what you sell and know why they should buy from you. 

Unique Value Proposition

For that to happen, your UVP (unique value proposition) needs to be extremely clear and strong, as this step is your “front door.” 

Here’s a UVP format that typically works very well for our clients:

• Three to four bullet points highlighting the unique features of what’s being sold
• Why the company/product is awesome
• An image showing the company’s best-selling product (so even if someone doesn’t read the bullet points, which we know many of them won’t, they can get a general idea of what’s being sold)

Banner Images

The images on your main banner play a key role in communicating your UVP(s) to visitors. A while back, we had just started working with a new client, and while analyzing the first user tests, I noticed people were very confused about what he was selling. He sells masks, but users thought he was selling clothes or underwear. Here’s the interesting part: The mask’s features were there, and by reading them, anyone could have easily understood his business. However, once we updated his main banner images, this kind of problem never happened again, even though the copy was the same or very similar.

Clear Navigational Path

You also need to ensure you provide a clear navigational path, which means your CTA (call-to-action) buttons must be specific and descriptive. Users should never have to guess or wonder where they’ll be taken if they click a button.

For instance, a call to action like “Get Item” is too vague and could leave someone unsure if clicking will take them to a product page, or perhaps a cart page with the product already added to their cart. But, while CTAs like “Shop” and “Shop Now” are clearer, they require too much commitment from the user and should also be avoided (because when people land on your homepage, they’re still just browsing). Your sweet spot will be text that is both clear and non-committal. Try things like “See Items,” “See Collections,” or “View Product.”

Category/Collection Pages

Goal: To show a range of products.

The names of your category (aka “collection”) pages should be descriptive, consistent, and avoid industry jargon as well as brand-specific terms.

Some of the most important things on this step of the buyer’s journey are filters and sort options, especially if you sell a lot of products.

Filter and Sort Options

I highly recommend using a good filter app, like Shopify’s Product Filter & Search, to make the alternatives more prototypical and customizable.

It’s also extremely important that the filters you provide on your store are relevant. For example, I was analyzing a website that sells t-shirts, and the only filter option they offered was “Collections.” I had never heard of the brand before and was not at all familiar with the collections they released. In cases like that, filters like “Size” and “Color” would be much more relevant and helpful to shoppers. So, always make sure you’re providing filters that are relevant not only to the products you’re selling but also to your audience (both brand veterans and newcomers).

Collection Images

And don’t forget about your images! The imagery on this page helps users decide whether they want to proceed to the next step (the product page), so they need to be high quality: clear/high resolution and consistent. If the main image is the product on a white background, all the other images should follow the same pattern (i.e., not lifestyle images or the product with a colored background, for example).

Product Pages 

Goal: To provide product details and reasons to buy.

• On this page, you should focus on product descriptions, images, and reviews. 

Product Descriptions

This is the step where visitors should find out if a product fits what they are looking for, so having good descriptions is crucial. Avoid (like the plague) having walls of text in your product copy, especially on mobile. Here are some quick tips for doing that:

• Keep paragraphs to 4-5 lines maximum.
• Use bullet points to break up text.
• If a description is too long, divide it into sections with bold headings (so people can easily find the information they want to know).
• Ensure your copy is clear and straightforward. 

Product Images

Imagery is another key component of product pages. Three to five images per product is typically a good average (unless your product is more complex), and images must be high quality and show multiple different angles. It’s also ideal to include lifestyle images, which not only help people visualize using the product in real life but can also go a long way in giving them an accurate idea of the true size/dimensions of a product when shown in scale.

Reviews

The product reviews section is the final major element to consider when it comes to your product pages. In addition to being able to see a rating distribution chart (when there are five or more evaluations for a product), visitors should also be able to sort, filter (by purchase status, product variation, and even availability), and search through reviews. And don’t leave out the negative ones! Even the best products and companies out there are not “perfect.” People know it’s impossible to please everyone, so displaying only 4- and 5-star reviews looks suspicious and can damage trust in your brand. The key with bad reviews is to openly address them so users can see how you handled the situation and feel confident that you’ll resolve an issue if they should have one. Here’s a quick guide for how to respond to a negative review:

1. Reiterate the problem/issue that caused the customer to be dissatisfied.
2. Explain what your company will do with the feedback.
3. Provide contact information or reach out to the reviewer.

Cart Page 

Goal: To provide a summary of products added to cart and lead customers to checkout.

This step should be as clear and concise as possible, which means navigation buttons and any extra fields, like “Add discount code” or “Special instructions,” should be removed. Instructions can be added to the thank you page or to a confirmation email, as these are more likely places for a customer to provide instructions regarding their purchase.

You should also make sure that the “Proceed to Checkout” button is prominent and offer a link (not a button) to continue shopping. The reason for that is it’s more important to take customers to the next step—especially when they’re so close to completing a purchase—than to take them a few steps back (where you could potentially lose them).

I also recommend that you avoid using express checkout buttons, one, to minimize cognitive load, and two, so you can explore cart abandonment should it occur. If you have express checkout enabled on your store and someone leaves your site during checkout, you won’t be able to tell what their journey was after that and target them with reminders or special deals. 

Note: Keep in mind that a portion of cart abandonment rate is a natural consequence of the way people browse (comparing prices, exploring their options, saving products for later, etc.). 

Checkout Page

Goal: To secure the sale.

The checkout step should be clear, simple, and concise. No frills, no distractions.

Checkout Form

Make sure your checkout form is compact and easy to fill out. Only ask for information you actually need (e.g., if you’re not using their phone number, don’t ask for it) and remove any unnecessary fields.

Checkout Buttons

When it comes to your checkout buttons, make sure they’re prominent, have descriptive names, unique style, and consistent placement.   

Breadcrumbs

Breadcrumbs are also very important because they help customers understand exactly where they are in the checkout process. Here are the labels we recommend to our clients: Cart > Customer Information > Shipping > Payment. They should be clickable to allow users to easily return to previous steps. 

Other Considerations

I’d like to quickly touch on a few other general considerations to heed when it comes to your store. 

Search Bar

Pay extra attention to your search bar. Customers who use it tend to convert several times more than people who don’t. It should be prominent, optimized, have clear navigation, and be instantly obvious on the homepage. 

Clarity

Clarity is one of the keys to a successful ecommerce store, so make yours (navigation, copy, images, everything) as explicit, simple, and descriptive as possible.

Consistency

Another big one is consistency. The general look and feel of your website should be the same across the board. If every page your potential customers visit looks different, it can cause a lot of confusion and disconnection … which will likely translate to lost sales. So, conformity, conformity!

Conclusion

While it’s true that the ultimate objective of your ecom store is to make money, remember that each page of your website plays a unique role in achieving the end goal. Recognizing that and following the optimization guidance shared in this article will help ensure that all of your pages successfully fulfill their purpose on the way to clinching the sale.

Resources

Baymard Institute. (2014-2021). Keep Category Naming Consistent. Guideline #286. Baymard Institute. 

Baymard Institute. (2014-2021). Use Descriptive and Non-Site-Specific Category Naming. Guideline #282. Baymard Institute. 

Baymard Institute. (n.d.). Homepage. Baymard Institute.

Baymard Institute. (2014-2021). Invest in Bespoke Imagery and Design. Guideline #238. Baymard Institute. 

Baymard Institute. (2021). Always Highlight Core Product and Brand Features on the Homepage. Guideline #1707. Baymard Institute. 

Baymard Institute. (2014-2021). The Search Field Should be Immediately Obvious on the Homepage. Guideline #241. Baymard Institute. 

Baymard Institute. (n.d.). Homepage & Category Navigation. Baymard Institute. 

Baymard Institute. (2020-2021). Consider Allowing Users to Filter Reviews by Purchase Status, Product Variation, and Photo Availability. Guideline #1160. Baymard Institute. 

Baymard Institute. (2017-2021). Use Both “Bullet Lists” and “Blocks of Text” for Product Descriptions. Guideline #843. Baymard Institute. 

Baymard Institute. (2017-2021). Subdivide Long Product Descriptions with Sections and Headings. Guideline #845. Baymard Institute. 

Baymard Institute. (2017-2021). Ensure the Default Product Image Is Enticing and Visually Rich. Guideline #771. Baymard Institute. 

Baymard Institute. (2017-2021). Use Straightforward Language in Product Descriptions. Guideline #844. Baymard Institute. 

Baymard Institute. (2017-2021). Always Have at Least 3–5 Product Images for All Products. Guideline #740. Baymard Institute. 

Baymard Institute. (2017-2021). Respond to Negative User Reviews. Guideline #785. Baymard Institute. 

Baymard Institute. (2017-2021). Provide a Ratings Distribution Chart at the Top of the Review Section. Guideline #750. Baymard Institute. 

Baymard Institute. (2017-2021). Style the Primary “Add to Cart” Button to Be Unique and Prominent. Guideline #791. Baymard Institute. 

Baymard Institute. (2016-2021). Always Implement Process Steps as Links. Guideline #613. Baymard Institute. 

Baymard Institute. (2016-2021). Each Step in the Checkout Process Should Have a Corresponding Process Step. Guideline #611. Baymard Institute. 

Baymard Institute. (2016-2021). Use an “Enclosed Checkout” Design. Guideline #606. Baymard Institute. 

Baymard Institute. (n.d.). Cart & Checkout. Baymard Institute.

Baymard Institute. (2016-2021). Minimize the Number of Form Fields Users See by Default. Guideline #668. Baymard Institute. 

Baymard Institute. (2016-2021). Ensure the Primary Button Is Uniquely Styled, Consistently Placed, and Descriptively Named. Guideline #730. Baymard Institute.