A shop's front-office is what customers constantly see when browsing it. It's the interface, the products, the pictures, the description, the whole transaction process, etc.
As a customer, this is all you'll see of a shop during your browsing and buying experience, from start to finish.
As a shop owner, you should know your front-office like the back of your hand, not only because you owe it to yourself to know your shop in and out, but also because you need to understand what your customers face, the number of pages and clicks they go through during a typical buying sessions, where they might get stuck and how to help them out, etc.
PrestaShop comes with a default theme, which uses shades of gray on a white background. This simple design was purposefully done in order to be adaptable to just about any line of business: cars, photography, antiques... anything! It was design to be easy to browser, ergonomic and standard-compliant. It is complete, has been heavily tested by thousands of shops, and has proven its value.
If you installed PrestaShop with its sample data, you will see Apple products.
<<<<<<<image
While the shop owner can change the front-office time anytime, thanks to the wealth of themes that are available on the PrestaShop Addons website, we will base this chapter on the default theme only.
Note that we here are describing the default theme with its default settings and modules. Activating other modules, or obviously changing theme, can dramatically change the shopping experience.
Whether he arrives on the front page by typing the shop web addresses or lands on a sub-page through a search engine, the customer will always have many options to navigate through the catalog.
<<<<<<<<<<<<<<image
The header is thin bar of content, accessible from any of the front-office pages. It contains some essential tools and links, that apply to the whole shop:
The header hardly ever changes throughout the whole buying experience.
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.
Note that all these links can be changed by the shop owner.
The default theme's left column doesn't change much during, as it mainly serves as a handy placeholder for navigation and secondary links:
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.
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.
The customers can choose to display all the products from a single manufacturer, regardless of their types or prices.
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.
It also gives a quick access to the current promotions (if any) through the "Specials" block. Finally, the customer can locate the closest store by clicking on the "Our stores" blocks.
These three blocks are always available, from any page, in the default theme.
This is where the magic happens. The middle section changes constantly to adapt to the customer's choices.
The default front page gives the customer a broad overview of the shop and its possibilities.
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:
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
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