Child pages
  • Navegando por el front-office
Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 4 Next »

Table of content

Navegando por el front-office

El front-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.

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!

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 navegableergonómico, compatible con estándares, y adaptado a todos los tamaños de pantalla y dispositivos.

Si instaló PrestaShop con sus datos de ejemplo, verá productos de prendas de vestir.

Aunque el propietario de la tienda puede cambiar el tema de front-office en cualquier momento, gracias a la gran cantidad de temas disponibles en el sitio web de complementos de PrestaShop,(http://addons.prestashop.com/), en este capítulo nos basaremos tan sólo en el tema por defecto.

Tenga en cuenta que aquí estamos describiendo el tema con su configuración y módulos por defecto. La activación de otros módulos, o evidentemente el uso de otro tema, puede producir un cambio radicalmente distinto en la experiencia de compra.

Ya sea porque su cliente haya llegado a su página principal, escribiendo la dirección web de la tienda o aterrizando en una sub-página desde un motor de búsqueda, este siempre tendrá diversas opciones para navegar por el catálogo.

La cabecera es una barra fina de contenido, accesible desde cualquiera de las páginas del front-office.

It contains several essential tools and links, which apply to the whole shop and is seperated into two parts.

A thin container with:

    • A 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 "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 homepage, from anywhere in the shop. The default logo reads "Classic" (after the default theme's name): this is an incentive for you to use your own logo rather than keeping the default one.
  • 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. 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 footer begins with a short container which presents two things:

  • A "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 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 emailing system. The form is handled by the "Newsletter subscription" module.

The footer gives access to pages that could be useful to your users.

  • The "Products" block contains:
    • Three links to products lists:
      • Specials. All the current promotions.
      • New products. Recently added items.
      • Top sellers. Most popular items.
  • The "Our company" block links to informational pages:
      • Delivery
      • Legal notice
      • Terms and Conditions of use
      • About us
      • Secure payment
      • Contact us
      • Sitemap, which lists all the pages on your store.
      • Stores
  • The "Your account" block contains links to the main pages of the user's profile (or the authentication page). 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.
    • 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.
    • Vouchers. All coupons code that have not yet been used (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 on a category page, when activated from the back office. It mainly serves as a handy placeholder for navigation and tools.

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."

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.

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, with three alterning images.

The slider is followed by a list of "Popular products" that highlights products depending on their popularity.

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.

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.

Despite the differing content, 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:

  • A thumbnail,
  • Discount or state flags on the top-left 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.

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.

Categories can feature a header image with an introductory message, as set by the shop owner.

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.

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.

Next to the images are two blocks:

  • A "summary" 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:

  • Description. This gives the full description for the product, as entered by the shop owner.
  • Product detailsThis 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.

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.

When clicking the "Checkout" button, the user is redirected to the one-page checkout, divided into 4 sections:

  1. 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. However, it is still available if the customer wants to sign in with another account.
  2. 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.
  3. Shipping method. Where the customer chose the shipping options.
  4. 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 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.

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 "Sign in" link in the header, the visitor is taken to the authentication page, where he or she 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, password, and date of birth.
  • 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 "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 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.

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.

The purchase path is called a conversion funnel because this is where a lot of online shops lose clients due to overly long, complicated or numerous screens. Read more on Wikipedia: http://en.wikipedia.org/wiki/Conversion_funnel.

This process starts when the customer clicks the cart summary's "Checkout" button, and always follows the same sequence of screens:

  1. (if the visitor is not logged in) The authentication screen, where the visitor can either go to the account creationpage, or log in.
  2. 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 click the "Billing address differs from shipping address" 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 "Edit" link to correct it.

  3. The shipping page.
    This is where the customer can choose from different shipping- and packaging-related options:
    • 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.
  4. 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 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.

  5. Once the customer has validated everything, the summary page is displayed.
    It begins with "Your order is confirmed". Depending on the chosen method of payment, some final information should be provided to the customer, along with a notification that a confirmation email has been sent and a link to the customer support page.
  • No labels