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 inside 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 is intentional, in order to be adaptable to just about any line of business: cars, photographs, antiques, or anything at all! It was designed to be easy to browse, 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.
While the shop owner can change the front-office theme at any time, 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 using another theme, can dramatically change the shopping experience.
Whether your customer arrives on the front page by typing the shop web addresses or lands on a sub-page through a search engine, he or she will always have many options to navigate through the catalog.
The header is a thin bar of content, accessible from any of the front-office pages. It contains several essential tools and links, which apply to the whole shop:
The header hardly ever changes throughout the whole buying experience.
The footer gives access to pages 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. Depending on whether the user is connected or not, there can be 4 to 5 blocks of content.
Note that all this content can be changed by the shop owner.
The default theme's left column doesn't change much during the whole browsing and buying experience, as it mainly serves as a handy placeholder for navigation and secondary links:
Once the customer is logged in, the "My account" block appears in the left column. Its sole purpose is to give a quick access to all the personal pages for this customer:
All in all, this block is a replication of the content of the "My account" page, which can be accessed from the eponymous link at the right of the header.
A category is a hierarchical way of sorting items: a category can contain any number of sub-categories, thus 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 not 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" block.
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. An image and a welcome text serve as introduction to the shop.
These are followed by the "Featured products" block, presenting 4 of the products that the shop owner chose to highlight, either for their novelty or their current price.
Most seasoned web surfers will enter a shop via a search engine, directly on a product of category page. Few stumble upon the home page, and this is why it should be tailored to new users, with a proper presentation.
Categories, tags, manufacturers, search, specials, best sellers or new products: PrestaShop has many paths to a product, but in the end the customers is given a familiar listing of products, within the chosen context.
Despite the differing content, these listings designs are very similar, so as to keep it familiar to even the newcomers:
This list view enables the customer to see at a glance the products' main information when they already know everything they need about a product, allowing for a quicker decision process.
A click on the "Add to Cart" triggers a quick animation, moving the product's thumbnail over to the Cart block.
Some categories might feature a header image, where at least two products are displayed, and with direct link to these products. One category can feature an unlimited number of image-maps, which you can scroll through with the tool below.
A "+" symbol is placed upon the products which are linked from that image. The image can feature as many links as necessary: in the default demo shop content, the iPod Nanos image-map features 9 links.
Products listing by category or manufacturer can be further sorted by price, name or availability.
Note that listing by tags does not allow for such sorting.
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 is complete and consistent, the comparison page will display with a row for each comparable feature. This is immensely useful, particularly for products with technical differences.
Customers can compare up to 3 products at a time.
This is where all the information entered by the shop owner is available to the user. Depending on the theme design, a product page can be very thorough, with extensive information, or simply present the most essential facts. The default theme is typical in that its most prominent feature is the product images, with a scrolling tool below it.
Next to the images are two blocks:
At the bottom of the product page are tabs, the two default ones being:
Clicking on the "Cart" button from the "Cart" block in the right column, or on the cart symbol in the header, brings the customer to the "Shopping cart summary" page, which is the first step in the order process, as indicated by the breadcrumb trail at the top, indicated the next steps in the process.
This page gives a succinct but complete view of the items that are in the cart: thumbnail, name, features, availability, price and ability to change the quantity of each product.
A detailed pricing is then displayed below, comprising the order's total cost with tax and shipping, and with if the case may be, an indicator of the voucher that was used. Further below, the available addresses are displayed.
Clicking "Next" starts the check-out process.
Because it is one of the main sources of lost customers for online shops, PrestaShop makes it really easy and straightforward to create a customer account.
When clicking the "Your account" or "Log in" links, the visitor is taken to the authentication page, where they have to fill one of two forms:
The first step for a new customer to create his account is to enter his e-mail address in the form and validate. This will bring him to the account creation page itself. Two blocks of information are necessary to fill in order to get an account:
Once registered, the customer is redirected to the "My account" page, where he can already see what he has access to: order history, credit slips, vouchers, and access to the previously entered information.
Almost all the pages of an online shop feature an "Add to cart" button for a given product, and display a quick summary of the cart content. This makes it easy for customer to take the first step towards an order.
The whole process of buying a product on a PrestaShop site can follow different paths, but they all reach the same conclusion, called the "conversion funnel" in the e-commerce lingo: from the moment the cart is filled and the customer starts check it out, it has to click through various validation screens until the order is validated and can be processed.
|
This is called a conversion funnel because this is where a lot of online shops lose clients because of overly long, complicated or numerous screens. Read more on Wikipedia. |
This process starts when the customer clicks on either the cart block's "Check out" button (on any page) or the cart's summary's "Next" button (on the Cart page), and always follows the same sequence of screens:
One of the great features of PrestaShop is the ability to get a geolocalized list of all the physical stores to which the online shop is tied. If available (as it is in the demo shop), a click on the "Our stores" block will bring up a map with a search form and radius selector.
On this map, stores are indicated using the shop's logo. A click on that logo brings up a small pop-up reveals the full address and phone number, as well as the opening hours for the store, as indicated by the shop owner.