Browsing the front-office
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.
The default theme
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.
Navigating the shop
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.
The header
<<<<<<<<<<<<<<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 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.
- 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 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 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.
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.
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.
The middle section
This is where the magic happens. The middle section changes constantly to adapt to the customer's choices.
The front page
The default front page gives the customer a broad overview of the shop and its possibilities.