...
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.
...
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 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.
...
- (if logged in) "My account" block, with links to the customer's account pages.
- 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 Viewed 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.
"My account" block
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.
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.
...
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 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 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 directly 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.
Product listing pages
Categories, tags, manufacturers, search, specials, best sellers, new products: 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:
...
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.
<<<<<<< image
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.
<<<<<<<<<<<<<<<< image!_Images^fo014-categorySort.png |border=1!
Note that listing by tags does not allow for such sorting.
...
Indeed, provided the product's information are 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.
<<<<<<<<<<<<<<<< image
Customers can compare up to 3 products at a time.
...
This is where all the information entered by the shop owner are available to the user. Depending on the theme design, a product page can be very thorough, with extension 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.
<<<<<<<<<<<<<<<<< image
Next to the image are two blocks:
...
- More info. This is where the customer will find the full description for the product, as entered by the shop owner. The content of this page is free form.
- Data sheet. This is where PrestaShop lists all the detailed featured that were entered in its database. This data is also the one that is used when comparing two products. Therefore, the content of this tab is very sparsely written: these are just raw facts, far from the free form description of the "More info" tab.
!_Images^fo017-productDatasheet.png |border=1!
The Cart page
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.
Clicking "Next" starts the check-out process.
Creating an account
Because it is one of the main source of lost customers for online shops, PrestaShop makes it really easy and straightforward to create a customer account.
...
- Create an account.
- Log in an existing account.
<<<<<<<<<<<<<<<<<<< image
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 requested to get an account:
- Personal information. Everything that can uniquely identify the customer: first name, last name, e-mail (already entered), date of birth.
- Your address. This will be the default shipping address for this customer - he can have many more, but it's better to ask for one now rather than have him create one while confirming the order, and risk losing a sale.
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.
<<<<<<<<<<<<<<<<<< image
Buying a product
Almost all the pages of an online 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.
...
- (if the visitor is not logged in) Display the authentication screen, where the visitor can either go to the account creation page, or log in.
- The address-choosing page. Two addresses are necessary for an order:
- The billing address, which should be the one that is tied to the payment method.
- The delivery address, where the order should be sent. If you need to have it sent to another address, untick the "Use the same address for billing" box and either select one address among the already listed ones, or create a new one.
- The shipping page. This is where the customer can choose among a few shipping and packaging -related options. Agree to the shop's terms of service is a must, but depending on what the shop can offer, the customer may be able to choose a recycled packaging, to gift-wrap the package (with an optional gift note), and select the carrier that most suits him.
- The payment page. The customer can choose many payment options, depending on what the shop owner has set up. Cheque and credit card/Visa card are the most usual, but PrestaShop makes it easy to offer payment through eBay, Google Checkout or other 3rd party providers. The customer clicks on the chosen method and depending on the method is either sent over to the chosen 3rd party handler or continues to one of PrestaShop's page where he can enter the needed details, such as a validation before displaying cheque or bank-wire information.
- Once the customer has validated everything, he reaches the confirmation summary page, which begins with "Your order on name of the shop is complete". Depending on the chosen mean of payment, some final information should be provided to the customer, along with a notification of the confirmation e-mail having been sent and a link to the customer support page. The customer must click on the "I confirm my order" button in order to have it validated
Finding a store
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.
<<<<<<<<<<<<<<< image
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.