Table of content
| Table of Contents |
|---|
Navegando por el front-office
The Elfront 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 customer, this is all you will 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.
| Tip |
|---|
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 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. -office es lo que los clientes constantemente están viendo mientras navegan por su tienda. Es la interfaz, los productos, las imágenes, las descripciones, todo el proceso de compra, etc .
Como cliente, es todo lo que verá de una tienda durante la experiencia de navegación y compra, desde el inicio hasta la finalización de su visita.
Como propietario de una tienda, debe conocer su front-office como la palma de su mano, no sólo porque se lo debe a sí mismo para conocer su tienda por dentro y por fuera, sino porque necesita entender lo que experimentan sus clientes, el número de páginas y clics que necesitan realizar durante una típica sesión de compra, donde podrían tener algún tipo de problema y ser capaz de proporcionarle soluciones, etc.
| Tip |
|---|
Aunque piense que conoce de memoria el front-office de su tienda, es importante que lo visite de vez en cuando, como si fuera un visitante que llega por primera vez. Explorar su tienda navegando por su catálogo, comprar un producto, contactar con el servicio de atención al cliente: ¡puede descubrir algo nuevo y ver algunas cosas que debería mejorar! |
El tema predeterminado
PrestaShop viene con un tema predeterminado, el cual utiliza distintos tonos de grises bajo un fondo de color blanco. Este diseño simple es intencional, con el fin de poder adaptarse a casi cualquier tipo de negocio: coches, fotografías, antigüedades, ¡y cualquier otro que sea necesario!. Fue diseñado para ser fácilmente navegable, ergonómico, compatible con estándares, y adaptado a todos los tamaños de pantalla y dispositivos.
If you installed PrestaShop with its sample data, you will see clothing products.
...
Note that we here are describing the default theme with its default settings and modules. Activating other modules, or obviously using another theme, can dramatically change the shopping experience.
Navigating the shop
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
The header is a thin bar of content, accessible from any of the front office pages.
...
The header hardly ever changes throughout the whole buying experience.
The cart
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 footer
The footer begins with a short container which presents two things:
...
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 left column
The default theme's left column only appears on a category page, when activated from the back office. It mainly serves as a handy placeholder for navigation and tools.
Categories block
A category is a hierarchical way of sorting items: it can contain any number of sub-categories, making it possible to easily browse from the more general category listings to the more specific products by following a logical path.
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."
Faceted navigation
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 front page
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, with three alterning images.
...
| Tip |
|---|
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. |
Product listing pages
Categories, tags, brands, suppliers, search, specials page, best sellers page or new products page: PrestaShop has many paths to a product, but in the end, the customers are given a familiar listing of products, within the chosen context.
...
Hovering over the product triggers a quick animation, displaying 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.
Product sorting
Product listing by category or brand can be further sorted by price (low to high or high to low), name (A to Z or Z to A) or relevancy.
Product page
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 view the various available images.
...
- Description. This gives the full description for the product, as entered by the shop owner.
- Product details. This tab only appears if the shop owner has entered data in the product's "Features" sheet. This gives all the detailed features that were entered into database. The content of this tab is very sparsely written: these are just raw facts, far from the product description.
The cart page
Clicking on the "Cart: XX products" link in the header brings the customer to the shopping cart summary page, which is the first step 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.
...
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.
...
| Note |
|---|
Among the available links is "Add 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 address, and create that new address on the fly. |
Buying a product
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.
...