Table of content
|Table of Contents|
Browsing the front
The front - office is what customers constantly see when browsing your shop. It is the interface, the products, the pictures, the descriptions, the whole purchase process, etc.
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.
Even though you think you know your front office by heart, it is important you should get back it from time to time,as if you were a first time visitor. Browse your website, buy a product, contact the customer service: you might make some discoveries and see a few things that you can improve!
The default theme
PrestaShop comes with a default theme, which uses shades of gray on a white white on light gray 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, standard-compliant, and adapted to all screen sizes and devices. 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 clothing 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 (http://addons.prestashop.com/), we will base this chapter on the default theme only.
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 and is seperated into two parts.
A thin container with:
top banner, presenting a 70% discount. The image and link can be completely customized through the Banner Block module.A thin container for the shop's phone number, along with:A link to the
- link to the contact page.
- The language (if more than one language is available). The customer can choose the language in which the shop should display texts.
- The currency selectors (if more than one currency is available). The customer can choose the currency in which the shop should display prices. This is great in order to compare prices with other international shops.
- A link to the
- sign-up page. When the customer is logged in, it displays his first name and last name as a link to the customer's account.
Once connected, the customers is taken to the "
- sign-up page. When the customer is logged in, it displays his first name and last name as a link to the customer's account.
Your account" page, and a "Sign out" link appears.
- Cart (0). A quick reminder of the current status of the customer's cart (by default it is "(0)" for empty). 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.
A larger container with:
- The shop logo. A click on the logo brings the customer back to the front pagehomepage, from anywhere in the shop. The default logo reads "YourLogo"Classic" (after the default theme's name): this is an incentive for you to use your own logo rather than keeping the default one (as was often the case with the previous default themes).
- The menu. By default, it displays the "Women" category, and its subcategories when you mouse hover it. To update the menu with your own categories, you should configure the "Main menu" module.
- 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. Cart: (empty). A quick reminder of the current status of the customer's cart (by default it is "(empty)"). 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.This is the module "Search bar".
The header hardly ever changes throughout the whole buying experience.
The header's essential part is the cart. By default, it is folded in order to only show the number of products it currently contains (if any). The customer can click on the text to access the shopping cart summary, from which the checkout process can be started.
The bottom of the block adds the shipping costs and the total price of the order, along with a "Check out" button leading to the shopping cart summary, from which the checkout process can be started.
The footer begins with a short container which presents two things:
- An "Enter your e-mailA "Get our latest news and special sales" form, in order for the customer to subscribe to your newsletter. Customers can register to your shop's newsletter directly using this form. Afterwards, the newsletter itself is entirely managed by you; PrestaShop does not handle the transmission of e-mails emails to the customers. The "Newsletter" module enables you to generate a .CSV file of all the registered customers and their e-mails, and you should be able to import that CSV file in any e-mailing emailing system. A "Follow us" section, from which the customer can reach your Facebook page, your Twitter account, your RSS feed or your Google+ pageThe form is handled by the "Newsletter subscription" module.
The footer gives access to pages that could be useful to your users.
- The "CategoriesProducts" block lists the various product categories on your store. It is a useful shortcut to your products.The "Information" block contains:
- Three links to products lists:
- Specials. All the current promotions.
- New products. Recently added items.
- Top sellers. Most popular items.
- Three links to products lists:
- The "Our company" block links to informational pages:
- Our stores Contact us
- Legal notice
- Terms and Conditions of use
- About us
- Secure payment
- Contact us
- Sitemap, which lists all the pages on your store.
- The "My Your account" block contains links to the main pages of the user's profile (or the authentication page):
- My orders. All past and currently processing orders. My credit . The title "Your account" is also a link to the customer account.
- Addresses. A customer can add multiple addresses for different delivery options.
- Credit slips. Received when an order has been canceled. Credit slips can be used for any future order.
- My addresses. A customer can add multiple addresses for different delivery options.
- My personal Orders. All past and currently processing orders.
- Personal info. First name, last name, e-mail address, home address, phone number, date of birth: all the necessary information about a customer.
- My vouchersVouchers. All coupons code that have not yet been used (if there are any).My favorite products.
- The customers can mark products as favorite, for later purchase (if there are any).The "Store information" block contains the address, phone number and e-mail address of your business.
Note that all this content can be changed by the shop owner from within the back - office, either through preference settings or through module configuration.
The default theme's left column only appears in on a category page, when activated from the back - office's. It mainly serves as a handy placeholder for navigation and tools.
A PrestaShop shop can have as many categories and sub-categories as needed, with an infinite number of products in a given category level. All categories are actually sub-categories of the root category, "Home."
This is also the only product list view where the customer can compare products by ticking their checkbox and selecting the "Compare" button.
"Viewed Products" block
Only displayed when the customer has viewed at least one product during the current session.
This block 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.
Customers can choose to display all the products from a single supplier, regardless of their types or prices.
Customers can choose to display all the products from a single manufacturer, regardless of their types or prices.
This is where PrestaShop lists the default static pages, as created by the shop owner: delivery information, legal notices, T&C, etc. They are not selling points, but their content is important enough that it warrants being always available.
By default, this block features a simple image with a link to PrestaShop's official website. You can change the settings of this block to turn this into an ad for a friend's website or another shop.
New products block
This block presents the latest new products, with links to their respective pages.
This block gives your customers a quick overview of the current promotions (if any), with the original price and the discount price.
"Our stores" block
The faceted navigation displays a block with different criteria available to filter the products, mostly attributes, features, and price ranges. It is very handy to help the customers easily find a product.
The central section
This is where the magic happens. The central section changes constantly in response to the customer's choices.
The default front page gives the customer a broad overview of the shop and its possibilities. An image slider serves as an introduction to the shop, along with two promotional three alterning images.
The slider is followed by the a selector enabling the customer to choose one of four lists: "New arrivals", "Popular", "Best sellers" and "Specials". They highlight a list of "Popular products" that highlights products depending on their novelty or their current pricepopularity.
Most seasoned web surfers will visit a shop via a search engine, landing directly on a product or category. Few stumble upon the home page, and this is why it should be tailored to new users.tip
Product listing pages
Categories, tags, manufacturersbrands, suppliers, search, specials page, best sellers page or new products page: PrestaShop has many paths to a product, but in the end, the customers is given are given a familiar listing of products, within the chosen context.
Despite the differing content, this these listing designs are very similar, in order to keep it familiar even for the newcomers. They all display a list of concerned products organized in a grid, with:
- Main thumbnail A thumbnail,
- Discount or state flags on the top-left .
- Name and description in the central section.
- Price, availability, "Add to cart" button and link to the product's page on the right.hand side,
- Product name
- Product price
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" Hovering over the product triggers a quick animation, sending the product's thumbnail flying into the "Cart" sectiondisplaying the different combinations and a "Quick view" link. By clicking the "Quick view" link, a pop-up window opens with the main product information and an "Add to cart" button.
Category header: image and image map
Categories can feature a header image with an introductory message, as set by the shop owner.
While this is not the case by default, you can choose to have the category image replaced by an image map. A category can feature an unlimited number of image maps, which the visitor can scroll through with the tool below it.
An image map is simply an image which has links available for some of its areas. A "+" symbol is placed upon the areas which have links. The image map can feature as many links as necessary.
Product listing by category or manufacturer brand can be further sorted by price (low to high or high to low), 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 checkbox (on the left of the thumbnail). This is the only product listing where the customer can compare products, since there is no sense in comparing products that do not have the same characteristics/features. Obviously, this means that categories should only feature products which can be compared.
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.
By default, customers can compare up to 3 products at a time, but this can be changed in the "Products" preference page in the back-office.
(A to Z or Z to A) or relevancy.
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 tool below it enabling customers to scroll between view the various available images.
Next to the images are two blocks:
- A "Short descriptionsummary" block, presenting the main facts for the current product.
- The "Add to cart" block, with the option to choose among the available combinations (as defined by the shop owner) and the quantity to be ordered.
Below the cart block you will find a reassurance block, to let your customers know about the various benefits of buying on your shop, or to be more transparent on your payment and delivery policies.
At the bottom of the product page is a tab section. The most usual ones are:
- More infoDescription. This gives the full description for the product, as entered by the shop owner.
- Data sheetProduct details. This tab only appears if the shop owner has entered data in the product's "Features" sheet. This gives all the detailed featured features that were entered into database. This data is also the one that is used when comparing two products. Therefore, the The content of this tab is very sparsely written: these are just raw facts, far from the product description in the "More info" tab.
The cart page
Clicking on the "Cart: XX products" link in the header , or on the "Check out" button in the cart interface also in the header, brings the customer to the "Shopping shopping cart summary " page, which is the first step in the order process. The breadcrumb trail at the top of the page indicates the steps in the order process:
, before entering the checkout page. It sums up the cart and shows again the reassurance block. This is where the customer makes sure that the order only contains the wanted products, no more, no less.
When clicking the "Checkout" button, the user is redirected to the one-page checkout, divided into 4 sections:
- Personnal information. Where the non-logged customer is asked to log in or create an account. This step is skipped over if the customer is already logged in. AddressHowever, it is still available if the customer wants to sign in with another account.
- Addresses. Where the customer is presented with his or her currently registered addresses in PrestaShop, and has to choose the one where the delivery is to be made.
- Shipping method. Where the customer choose chose the shipping options.
- Payment. Where the customer is presented with the final price of the order (now including the shipping price), and is asked to choose a payment method.
The customer can come back to any previous step by clicking on its title.
The standard order process takes 5 steps, and as many pages. You can choose to have all these steps on one page by going in the back-office, and in the "Orders" preference page, change the "Order process type" option from "Standard (5 steps)" to "One page check out".
The cart page gives a succinct but complete view of the items that are in the cart: thumbnail, name, features, unit price and ability to change the quantity of each product.
Detailed pricing is then displayed below, including the order's total cost with tax and shipping, and if applicable, a description of the voucher that was used. Further below, the available addresses are displayed.
Clicking "Next" starts the check-out process.
The checkout page has been voluntarily stripped of any distraction such as the left column, the footer and other links that can lead the customer away from the purchase. It is still possible to exit the checkout process by clicking on the shop logo in the header.
Creating a customer account
Because it is one of the main sources of lost customers for online shops, PrestaShop makes it simple and straightforward to create a customer account.
When clicking the "Log Sign in" link in the header, the visitor is taken to the authentication page, where he or she has to fill one of two forms:
- Create a new account.
- Log in to an existing account.
The first step for a new customer to create an account is to enter his or her e-mail address in the form and validate. This will bring up the account creation page itself. Two blocks of information are necessary to fill in order to get an account:
can sign in. If he or she needs to create a new account, the link "No account? Create one here" will redirect to the account creation form.
There are two parts to the account creation form:
- Personal information. There the customer should fill in everything that can uniquely identify the customer: first name, last name, e-mail (already entered), , password, and date of birth.
Customer data privacy. When registering to PrestaShop, the visitor has to agree to your data privacy. It is up to you write it, as it will legally bind you and your customers' data.
You can change the content of the customer data privacy warning section by changing the configuration of the "Customer data privacy block" module (from the "Modules" page). Make sure to change it for all the available languages. Info
- Subscriptions. The customer can choose to subscribe to your newsletter and to receive or not your partner offers. Make sure you only display these fields if you actually send this kind of content.
Once registered, the customer is redirected to the "My Your account" page, where many options can be accessed: order history, credit slips, vouchers, and access to the previously entered information.
Among the available links is "Add my first address". This will be the default address for this customer - there can be many more.
If the customer only has one registered address, it will be used both as the shipping and the billing address. During the order process, the customer can choose to use a different address for the billing addessaddress, and create that new address on the fly.
Buying a product
Almost every page of your shop features an "Add to cart" button for the given product, and displays a quick summary of the cart's content. This makes it easy for customers 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, which in e-commerce lingo is called the "conversion funnel": from the moment the cart is filled and the customer starts to check out, he or she has to progress through various validation screens until the order is validated and can be processed.
This process starts when the customer clicks the cart summary's "NextCheckout" button, and always follows the same sequence of screens:
- (if the visitor is not logged in) The authentication screen, where the visitor can either go to the account creation pagecreationpage, or log in.
The delivery address page. If the user account has no registered address, the customer is directly taken to the address creation form.
Two addresses are necessary for an order:
- The delivery address, where the order should be sent.
- The billing address, which should be the one that is tied to the payment method.
If the customer needs to have the order billed to an address other than the delivery one, he or she can deselect click the "Use the delivery address as the billing Billing address differs from shipping address" box link and either select an address from the currently registered ones,or create a new one.
If an address turns out to be wrong, the customer can use the "UpdateEdit" link to correct it.
- The shipping page.
This is where the customer can choose from different shipping- and packaging-related options:
- Agreeing to the shop's terms of service is a requirement.
- Depending on what the shop can offer, the customer may be able to choose recycled packaging and gift-wrapping (with an optional gift note)
- The customer MUST choose a carrier in order to reach the next step.
The payment page.
The customer can choose many payment options, depending on what the shop owner has set up. The customer clicks on the chosen method and depending on the method, is either sent over to the chosen third-party handler or continues to one of PrestaShop's pages where he or she can enter the needed details, such as a validation before displaying check or bank wire information.
Check and bank wire are installed by default, but PrestaShop makes it easy to offer payment through PayPal, Hipay or any other 3rd party providers. See the modules installed by default available in PrestaShop's back - office, or check the Addons marketplace for even more modules: http://addons.prestashop.com/.
The customer needs to agree with the shop's terms of service before completing the purchase and validation the order. Which is done by clicking on the "Order with an obligation to pay" button.
- Once the customer has validated everything, the summary page is displayed.
It begins with "Your order on (name of the shop) is completeis confirmed". Depending on the chosen method of payment, some final information should be provided to the customer, along with a notification that a confirmation e-mail email has 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
When a non-logged visitor fills the cart with product and clicks the "Check out" button, the authentication page also features two additional sections: "Instant checkout" and "Delivery address".
The idea of instant checkout (or guest checkout) is to allow visitors to buy products even if they do not wish to create an account. PrestaShop still needs essential information for delivery or payment purpose, but no password is ever requested.
You can disable the guest checkout feature by going in the back-office, in the "Orders" preference page, "Enable guest checkout" option.
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.
On this map, stores are indicated using the shop's logo. A click on that logo brings up a small pop-up, revealing the full address and phone number, as well as the business hours for the store, as indicated by the shop owner.
At the bottom of the page, a table lists the stores closest to the user's search.