The anatomy of an online store
The crucial components of an e-commerce site

In this first part of a series deconstructing e-commerce, we are going right back to basics: The anatomy of an online store.

If for no other reason than to ensure we are all “on the same page” we’ll identify the key pages and functions before later delving deeper into what makes a successful e-commerce property.

online store anatomy apptus

The anatomy

The key pages are:

  1. Home page
  2. Search page
  3. Category page
  4. Campaign landing page
  5. Product details page
  6. Shopping bag
  7. Checkout

The checkout is less of a page and more of a process required to complete and order.

1. Home page

For many, the starting point in the shopping journey is the Home Page. It is here that brand awareness, messaging and imagery starts. If the store can imprint the start page into the minds of its customers, they are more likely to return directly rather than via paid traffic acquisition.

The home page is much about brand marketing. The home page should also reinforce messages for returning customers and reiterate messages found in the company’s advertising. It is the shop window for the store and this is where you display the most exciting pieces in the store along with the most enticing offers. The home page has many roles.

adlibris_page

2. Campaign landing page

A landing page is the first page a visitor interacts with. This will not necessarily be the home page - in essence a landing page is any page that acts as the starting point for a user session. When certain traffic acquisition campaigns are executed a specific campaign landing page will be created.

This allows the messaging to be congruent with the messaging that sent the visitor to the landing page in the first place - for example, an article on an influencer site might mention that influencer in the landing page text, there might be a specific collection of products that tie back to the referring site or advert, or it may contain an offer to a certain segment of the market.

These pages will often feature well in search engine results for long tail keywords having been search engine optimised.

A landing page can also be an internal search engine results page or a Product Listing Page (see below).

3. Search page

The search page is not really a page, it’s more of a concept. The interface of the start page is the search box, which is situated on every page in the store.

It leads to a results page that, depending on the underlying technology, presents a list of relevant products to the search phrase.

On many sites, once the search box is activated a set of help systems kicks in. We call this subsystem the search as-you-type.

search

search-results

Search as-you-type helps the customer formulate a decent search queries - search queries that have a strong likelihood to deliver highly relevant results and, therefore, are more likely to help convert the customer. Search assistants typically employ of a combination of ‘autocomplete’, ‘did you mean?’, ‘auto correct’, and ‘product suggestion’ type features to deliver this experience.

4. Category or product listing page (PLP)

These pages can be landing pages or the result of navigation drill-down. There may be several subsets, for example: Furniture > Outdoor Furniture > Garden Furniture > Garden Tables.

categories

Website products are organised into a database, called a product catalogue. The products in the product catalogue are organised into a product taxonomy. This taxonomy makes it easier to browse through the catalogue to find the products of interest.

There may be a deep taxonomy, as in the example above, or a shallow one instead: Shop > Face Oils.

5. Product details page (PDP)

Product details pages are becoming the most common landing pages because of the way search engines index landing pages and in response to the way shoppers use services like Google to begin a shopping process. That is, if you search Google for a particular product the chances are a Google Shopping listing, an advert or organic listing will lead you straight to one of these pages.

The product page is the place where the store exposes a given product. There is one product page per product. Almost all product pages have the same structure. That is, there is a handful of templates used to represent the product pages.

Lyko---Product-page

The aim here is to convert to a sale. For that reason extraneous marketing material is kept to a minimum with the focus on the product and all the information required for the customer to make a purchasing decision. The page may include opportunities to upsell and cross sell.

The conversion process must be slick. Any friction on the start page may send off the customer in a fruitless direction that decreases the likelihood of a conversion. This is something dreaded by the store keepers, since they have paid hard money to get the customer there in the first place. This is the page from which the checkout process most typically begins.

The checkout process must be frictionless too. Today there are expert companies that handle the checkout process for the site, and that take care about payment methods etc. The design is carefully validated. Every click is examined to see if it is possible to remove an action to improve the checkout process.