Child pages
  • Browsing the front-office

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • The shop logo. A click on the logo brings the customer back to the front page, from anywhere in the shop.
  • The currency block. The customer can choose the currency in which the shop should display apps. This is great in order to compare prices with other international shops.
  • Contact and Sitemap. These two links take the customer to specific pages, out of the shopping context: contacting the shop administrators, or viewing a complete list of all the pages that are publicly accessible.
  • Bookmark. This is not a link per se, but a JavaScript action: when clicked, it will trigger the customer browser to add the shop as a bookmark. The customer can then choose to complete the action or not.
  • The search engine. Many customers prefer to look for a specific item through the search engine rather than browsing through categories after categories of products. On some online shop, this is even the only way to browser the site's content for most customers.
  • Welcome, XXX. An invitation for the customer to connect to the shop by entering their credentials. If connected, this will display "Welcome, firstname".
  • "Your account". A link to the user account, or if not connected, to the authentication/registration page.
  • "Cart: (empty)*. A quick reminder of the current status of the customer's cart. Sometimes customers select items while browsing and forget about them after a few pages. It is therefore essential to give them a way to keep these products in mind.

The header hardly ever changes throughout the whole buying experience.

The footer

The footer gives access to some of the interesting page that could be useful to a user who haven't found anything interesting to him, and thus has scrolled to the bottom of the screen.

  • Three links to products lists:
    • Specials: all the current promotions.
    • New products: recently added items.
    • Top sellers: most popular items.
  • Four links to informational pages:
    • Our stores
    • Contact us
    • Terms and Conditions
    • About us

Note that all these links can be changed by the shop owner.

The left column

The default theme's left column doesn't change much during, as it mainly serves as a handy placeholder for navigation and secondary links:

  • threee three of the default blocks help the user navigate the shop and filter content: tags, categories and manufacturers are the most common ways by which shoppers look for a given product.
  • "View products" serves as a reminder of the products previously took interest in, and gives a shortcut back to these if he wants to pick them in the end.
  • Finally, "Information" is where PrestaShop the default static pages, as written by the shop owner: delivery information, legal notices, T&C... They are not selling points, but their content is important enough that it warrants being always available.

Categories

A category is a hierarchical way of sorting items: a category can contain any number of sub-categories, this making it possible to easily browse from the more general items to the more specific ones by following a logical path.

A PrestaShop shop can have as many levels of sub-categories as needed, as well as an infinite number of categories and products in a given category level. All categories are in fact sub-categories of the root category, the "Home" one.

This is also the only product list view were the customer can compare products, by ticking their checkbox and validating his choice using the "Compare" button.

Tags

The shop owner can indicate a set of tags for each product. A tag is a non-hierarchical keyword, also described as metadata: it is displayed on the product page as it does not bring any useful information, but it can prove very useful when building thematic lists – such as a tag-cloud, where the most common tags are written in a bigger font than the rarer ones.

Manufacturers

The customers can choose to display all the products from a single manufacturer, regardless of their types or prices.

The right column

The default theme's right column hardly ever changes in the course of the shopping experience. Its main block is the "Cart" one, where the customer can glance over what he has currently chosen to buy and how much he is expected to pay for it all, and remove unwanted product at the click of the mouse.

...

The default front page gives the customer a broad overview of the shop and its possibilities.

Category pages

...

Product listing pages

Categories, tags, manufacturers, search: PrestaShop has many path to a product, but in the end the customers is given a familiar listing of products, within the chosen context.

<<<<<<<<<<<<< image

Despite the differing content, these listings designs are very similar, so as to keep it familiar to even the newcomers:

  • Thumbnail on the left
  • Name and description in the middle section
  • Price, availability, "Add to cart" button and link to the product's page on the right
Product comparison

Products listing by category or manufacturer can be further sorted (by price, name or availability). Listing by tags does not allow for such sorting.

<<<<<<<<<<<<<<<< image

Product comparison

Products within a category can be compared to each other, thanks to each item's "Select to compare" checkbox. This is the only way to compare product, which is logical since there is no sense in comparing product that do not have the same characteristics/features.

Indeed, provided the product's information are complete and consistent, the comparison page will display with a row for each comparable feature.

<<<<<<<<<<<<<<<< image

Product pages

Buying a product