Tabla de contenidos

Navegando por el front-office

El front-office es lo que los clientes constantemente están viendo mientras navegan por tu tienda. Es la interfaz, los productos, las imágenes, las descripciones, todo el proceso de compra, etc.

Como cliente, es todo lo que verás de una tienda durante la experiencia de navegación y compra, desde el inicio hasta la finalización de tu visita.

Como propietario de una tienda, debes conocer el front-office como la palma de tu mano, no sólo porque te lo debes a tí mismo para conocer tu tienda por dentro y por fuera, sino porque necesitas entender lo que experimentan tus 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 proporcionarles soluciones, etc.

Aunque pienses que te conoces de memoria el front-office de tu tienda, es importante que lo visites de vez en cuando, como si fueras un visitante que llega por primera vez. Explorar tu tienda navegando por tu catálogo, comprar un producto, contactar con el servicio de atención al cliente: ¡puedes descubrir algo nuevo y ver algunas cosas que deberías 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 navegableergonómico, compatible con estándares, y adaptado a todos los tamaños de pantalla y dispositivos.

Si instalaste PrestaShop con sus datos de ejemplo, verás productos de prendas de vestir.

Aunque el propietario de la tienda puede cambiar el tema del 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.

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

Navegación por la tienda

Ya sea porque tu cliente haya llegado a tu 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

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

Ésta contiene varias herramientas y enlaces esenciales, que se aplican a toda la tienda y se separa en dos partes.

Un fino contenedor con:

Un contenedor más grande con:

La cabecera raramente cambia durante el proceso de una compra.

El carrito

La parte importante y esencial de la cabecera es el carrito. De manera predeterminada, éste se muestra plegado con el fin de mostrar tan sólo el número de productos que actualmente contiene. El cliente puede hacer clic sobre el texto para acceder al resumen del carrito de compras, desde el que puede iniciar el proceso de pago.

El pie de página

El pie de página comienza con un pequeño contenedor que presenta dos cosas:

El pie de página da acceso a páginas que podrían ser útiles para tus usuarios.

Ten en cuenta que todo el contenido puede ser modificado por el propietario de la tienda desde el propio panel de administración (back-office), ya sea a través de la configuración de preferencias o mediante la configuración del módulo.

La columna izquierda

La columna izquierda del tema predeterminado sólo aparece en páginas de categoría, cuando se activa desde el panel de administración. Ésta tiene como objetivo ser un práctico marcador de navegación y de herramientas.

Bloque Categorías

Una categoría es una manera jerárquica de organizar artículos: éste puede contener un número cualquiera de sub-categorías, por lo que esta facilita  navegar partiendo desde las categorías más generales a los productos más específicos, siguiendo un camino lógico.

Una tienda PrestaShop puede tener tantas categorías y subcategorías como sea necesariocon un número infinito de productos en cada categoría determinada. Todas las categorías son en realidad subcategorías de la categoría raíz "Inicio".

Navegación por facetas

La navegación por facetas muestra un bloque con diferentes criterios disponibles para filtrar los productos, en su mayoría atributos, características y rangos de precios. Es muy útil para ayudar a los clientes a encontrar fácilmente un producto.

La sección central

Aquí es donde ocurre la magia. La sección central cambia constantemente en respuesta a las elecciones del cliente.

La página de inicio

La página de inicio predeterminada ofrece al cliente una amplia visión general de la tienda y sus posibilidades. Un carrusel de imágenes, sirve como una introducción a la tienda, con tres imágenes que se alternan una tras otra.

El carrusel de imágenes viene seguido del bloque de “Productos Destacados”, presentando productos que el propietario de la tienda desea resaltar, ya sean por ser novedosos o por tener descuentos en sus precios.

La mayoría de los navegantes llegarán a la tienda a través de un buscador, entrando directamente en un producto o categoría. Algunos lo harán a través de la página de inicio, y este es el motivo por el cual ésta tiene que estar confeccionada para nuevos usuarios, con una presentación adecuada.

Páginas del listado de productos

Categorías, etiquetas, marcas, búsquedas, promociones, mejores ventas o nuevos productos: PrestaShop tiene muchos caminos hacia un producto, pero al final se les daa los clientes una lista conocida de los productos, en el contexto elegido.

Pese a la diferencia de contenido, estos diseños de listas son muy similares para mantener la familiaridad del contenido incluso para los usuarios recién llegados. Todos ellos muestran un listado de productos relacionados entre sí, organizados en una cuadrícula, con:

Esta presentación de la lista permite a los clientes observar de forma resumida la información principal del producto cuando ya conocen lo necesario sobre el producto, permitiendo un proceso de decisión acelerado.

Posicionar el ratón sobre el producto desencadena una animación rápida, mostrando las diferentes combinaciones y un enlace "Vista rápida". Al hacer clic en el enlace "Vista rápida", se abrirá una ventana emergente con la información principal del producto y el botón "Añadir al carrito".

Encabezado de categoría: imagen y mapa de imágenes

Algunas categorías pueden ofrecer una imagen de encabezado, con un mensaje de presentación, según lo establecido por el propietario de la tienda.

Clasificación de Productos

El listado de productos por categoría o marca puede ser ordenado por precio (de más bajo a más caro, o de más caro a más bajo), nombre (de A a Z, o de Z a A) o disponibilidad.

Página del producto

Aquí es donde toda la información introducida por el propietario de la tienda está disponible para el usuario. Dependiendo del diseño del tema, una página de producto puede ser muy minuciosa, con amplia información, o simplemente presentar los datos más esenciales. El tema predeterminado es el típico en el que lo que más llama la atención son las imágenes de los productos, con una herramienta en la parte inferior que permite a los clientes desplazarse entre las imágenes disponibles.

Junto a las imágenes hay dos bloques:

Debajo del bloque del carrito encontrarás un bloque de seguridad y para ofrecer confianza al cliente, donde podrás informar sobre las ventajas que tiene comprar en tu tienda, o para ser más transparente en tus políticas de pago y entrega.

En la parte inferior de la página del producto hay una sección que presenta varias pestañas. Los más habituales son:

La página del carrito

Al hacer clic en el "Carrito: XX productos" que aparece en la cabecerael cliente ingresará a la página de resumen del carrito de compras, la cual es el primer paso en el proceso del pedido, antes de entrar a la página de pago. En esta página se resume el contenido del carrito, y se muestra nuevamente el bloque de seguridad y confianza al cliente. Aquí es donde el cliente se asegura de que el pedido sólo contiene los productos deseados, ni más ni menos.

Al hacer clic en el botón "Tramitar pedido", el usuario es redirigido a una sola página para iniciar el proceso de pago, que está dividida en 4 secciones:

  1. Información personalDonde se pide al cliente no registrado que inicie sesión o cree una cuenta. Este paso es omitido si el cliente ya ha iniciado sesión en la tienda. Sin embargo, todavía está disponible si el cliente desea iniciar sesión con otra cuenta.
  2. Direcciones. Donde se presenta al cliente sus direcciones registradas en PrestaShop, y en la que tiene que elegir el sitio donde se realizará la entrega de su pedido.
  3. Método de envío. Donde el cliente selecciona las opciones de envío.
  4. Pago. Donde se presenta al cliente el precio final del pedido (ahora incluido el precio de envío), y se le pide que seleccione un método de pago.

El cliente puede volver a cualquier paso anterior, haciendo clic sobre su título.

La página de pago ha sido voluntariamente despojada de cualquier distracción, como la columna izquierda, el pie de página y otros enlaces que pueden llevar al cliente a alejarse de este proceso final de compra. De cualquier forma, todavía es posible salir del proceso de pago haciendo clic en el logotipo de la cabecera de la tienda.

Creación de una cuenta de cliente

Ya que esta es una de las razones principales de la pérdida de clientes en una tienda virtual, PrestaShop hace muy fácil y clara la creación de cuentas a los clientes.

Al hacer clic en el enlace "Iniciar sesión" que aparece en la cabecera de la tienda, el visitante es dirigido a la página de autenticación, donde él o ella podrá iniciar sesión. Si él o ella necesitará crear una nueva cuenta, el enlace "¿No tiene una cuenta?. Cree una aquí", le redireccionará al formulario de creación de cuenta.

Hay dos partes en el formulario de creación de cuenta:

Una vez registrado, el cliente es redireccionado a la página "Mi cuenta", donde entre otras muchas opciones ya puede acceder a su: historial de pedidos, facturas por abono, cupones de descuento y a la información previamente ingresada por éste.

Entre las opciones disponibles se encuentra "Añadir mi primera dirección". Esta será la dirección por defecto para este cliente - puede haber algunas más.

Si el cliente sólo tiene una dirección registrada, ésta será utilizada para el envío y la dirección de facturación. Durante el proceso de pedido, el cliente puede optar por utilizar una dirección diferente para la dirección de facturación, y crear esta nueva dirección sobre la marcha. 

Compra de un producto

El proceso completo para comprar un producto en un sitio PrestaShop puede tomar diferentes caminos, pero todos ellos tienen la misma meta, también conocida en el argot de comercio electrónico como "embudo de conversión": desde el momento en que el carrito está lleno y el cliente inicia la finalización / confirmación de compra, tendrá que hacer clic en varias pantallas de validación hasta que el pedido sea validado para poder ser procesado.

Este proceso de compra es denominado un embudo de conversión porque aquí es donde una gran cantidad de tiendas en línea pierden clientes debido a las exageradamente largas, numerosas o enrevesadas pantallas. Obtén más información aquí.

Este proceso se inicia cuando el cliente hace clic en el botón "Tramitar pedido" del resumen del carrito y sigue siempre la misma secuencia de pantallas:

  1. (si el visitante no ha ingresado a su cuenta) Se mostrará la pantalla de autenticación, donde el visitante puede acceder a la página de creación de cuenta o ingresar a esta.
  2. La página de la dirección de entrega. Si la cuenta del usuario no tiene registrada ninguna dirección de entrega, el cliente es dirigido directamente al formulario de creación de la dirección.

    Dos direcciones son necesarias para un pedido:

    • La dirección de entrega, donde se enviará el pedido.
    • La dirección de facturación, la cual está ligada al método de pago.

    Si el cliente necesita que el pedido se facture a una dirección distinta a la de entrega, puede hacer clic en el enlace "Información de facturación diferente de la dirección de envío", y seleccionar una dirección de las registradas previamente o crear una nueva.

    Si la información de una dirección está incorrecta, el cliente puede utilizar el enlace "Modificar" para corregirla.

  3. La página de envío.
    Aquí es donde el cliente puede elegir entre diferentes opciones de envíos y embalajes:
  4. La página de pago.
    El cliente puede escoger entre muchas opciones de pago, dependiendo de las que el propietario de la tienda haya establecido. El cliente hará clic en el método elegido, y en función del métodoserá enviado hacia el controlador de terceros seleccionado o continuará en una de las páginas de PrestaShop donde puede introducir los detalles necesarios como validación, antes de que se le muestre la información para el cheque, o la transferencia bancaria.

    Cheque y transferencia bancaria son instalados por defecto, pero PrestaShop facilita ofrecer pagos a través de eBay, Hipay u otros métodos de pago de terceros. Consulta los módulos instalados por defecto en el back-office de PrestaShop, o visita el marketplace PrestaShop Addons para obtener más módulos: http://addons.prestashop.com/.

    El cliente debe estar de acuerdo con los términos de servicio de la tienda antes de completar la compra y validar el pedido. Lo que se realiza haciendo clic en el botón "Pedido con obligación de pago".

  5. Una vez que el cliente ha validado la información introducida, se muestra la página de resumen de la compra.
    Ésta se titula "Tu pedido está confirmado". Dependiendo del método de pago elegido, se debe proporcionar alguna información final al cliente, junto con una notificación de que se le ha enviado un correo electrónico de confirmación junto con un enlace a la página de soporte al cliente.