Navegación por el front-office PrestaShop 1.7

 

Aquí la transcripción: 🙂

¡Hola! Te damos la bienvenida a la serie de videotutoriales de PrestaShop 1.7. Hoy hablaremos de PrestaShop 1.7, la versión más reciente del software de PrestaShop. Voy a mostrarte cómo navegar por el front-office con el tema predeterminado.

PrestaShop incluye un tema predeterminado, con elementos en blanco sobre un fondo gris claro. El propósito de este sencillo diseño es que se pueda adaptar a prácticamente cualquier línea de negocio: automóviles, fotografías, antigüedades, etc. ¡Cualquiera! Se ha diseñado de modo que navegar por él sea fácil, intuitivo, que cumpla las normativas y se adapte a cualquier tamaño de pantalla y dispositivo.

Si has instalado PrestaShop con los datos de muestra, verás el ejemplo de una tienda de ropa.

No obstante, el propietario de la tienda puede cambiar el tema del front-office cuando quiera gracias a la gran variedad de temas disponibles en el sitio web de complementos de PrestaShop (http://addons.prestashop.com/es/).

Ten en cuenta que en este vídeo describimos el tema predeterminado con su configuración y sus módulos predeterminados. Si activas otros módulos o utilizas otro tema, obviamente, la experiencia de compra cambiará drásticamente.

Primer paso: Navegación por la tienda

Con independencia de que un cliente llegue a la página principal de tu tienda porque ha escrito la dirección URL en la barra del navegador o a una página secundaria a través de un buscador, siempre dispondrá de numerosas opciones para desplazarse por el catálogo.

El encabezado

Es una fina barra de contenido a la que se accede desde cualquiera de las páginas del front-office.

Incluye varias herramientas y enlaces indispensables para toda la tienda y se divide en dos partes.

Un contenedor fino con:

• • Un enlace a la página de contacto.
  • El idioma (si hay más de uno disponible): el cliente puede cambiar el idioma del texto de la tienda.
  • La selección de moneda (si hay más de una disponible): el cliente puede cambiar la moneda de los precios de la tienda. Es una herramienta fantástica con la que comparar precios con otras tiendas de otros países.
  • Un enlace a la página de inicio de sesión: Cuando el cliente inicia sesión, se muestra su nombre y sus apellidos con un enlace a la cuenta del cliente.
  • Cuando se conecta, el cliente llega a la página «Tu cuenta» y se muestra el enlace «Cerrar sesión».
  • Carrito (0): un breve recordatorio del estado del carrito del cliente [que muestra «(0)» de forma predeterminada si está vacío]. A veces, los clientes eligen artículos mientras navegan y se olvidan de ellos unas páginas más tarde. Por tanto, es importante recordarles estos productos de algún modo.

Un contenedor grande con:

• El logotipo de la tienda: al hacer clic en el logotipo, el cliente regresa a la página de inicio desde cualquier otra parte de la tienda. El logotipo predeterminado es «Classic» (el nombre del tema predeterminado); es una forma de animarte a que utilices tu propio logotipo en lugar de conservar el que se muestra por defecto.
• El menú: de forma predeterminada, se muestra la categoría «Women» y sus subcategorías al pasar el ratón por encima. Para personalizar el menú con tus propias categorías, tienes que configurar el módulo «Menú principal».
• El buscador: son muchos los clientes que prefieren buscar un artículo determinado en el buscador en lugar de navegar por la infinidad categorías de productos. En algunas tiendas online, es incluso la única forma que tienen muchos clientes de buscar contenido en el sitio web. Este es el módulo «Barra de búsqueda».

El encabezado rara vez cambia en todo el proceso de compra.

El carrito

Es la parte esencial del encabezado. De forma predeterminada, aparece contraído para mostrar solo el número de productos que contiene. El cliente puede hacer clic en el texto para acceder al resumen del carrito de compra, desde donde puede iniciar el proceso de compra.

El pie de página

El pie de página muestra primero un contenedor pequeño con dos elementos:

• Un formulario «Infórmese de nuestras últimas noticias y ofertas especiales» para que el cliente se suscriba al boletín. El cliente se puede registrar directamente al boletín de tu tienda con este formulario, tras lo cual, serás tú quien deba gestionar por completo el boletín; PrestaShop no se encarga del envío de correos electrónicos a los clientes. Con el módulo «Boletín», puedes generar un archivo CSV de todos los clientes registrados y sus correos electrónicos, y también puedes importar ese archivo CSV en cualquier sistema de envío de correos electrónicos. El formulario lo gestiona el módulo «Suscripción a boletines».

El pie de página permite acceder a algunas páginas útiles para tus usuarios.

• El bloque «Productos» contiene:

• • Tres enlaces a las listas de productos:

• • • Especiales: todas las promociones actuales.
    • Productos nuevos: los artículos recién añadidos.
    • Más vendidos: los artículos más populares.
• El bloque «Nuestra empresa» contiene enlaces a las páginas informativas:
  • • Envío
    • Aviso legal
    • Términos y condiciones
    • Sobre nosotros
    • Pago seguro
    • Contactar
    • Mapa del sitio web, en el que figuran todas las páginas de tu tienda.
    • Tiendas
• El bloque «Tu cuenta» contiene enlaces a las páginas principales del perfil del usuario (o la página de autenticación). El título «Tu cuenta» también contiene un enlace a la cuenta del usuario.
  • Direcciones: un cliente puede indicar varias direcciones de envío.
  • Notas de crédito: se recibe una nota de crédito cuando se cancela un pedido. Se pueden utilizar en posteriores pedidos.
  • Pedidos: todos los pedidos de procesamiento pasados y en curso.
  • Información personal: nombre, apellidos, dirección de correo electrónico, dirección del domicilio, número del teléfono, fecha de nacimiento, etc.; toda la información necesaria del cliente.
  • Cupones: todos los códigos de descuento que aún no se han utilizado (si los hay).
• El bloque «Información de la tienda» contiene la dirección, el número de teléfono y la dirección de correo electrónico de tu tienda.

Ten en cuenta que todo este contenido lo puede cambiar el propietario de la tienda desde el panel de administración, tanto en las opciones de preferencias como en la configuración del módulo.

La columna izquierda

La columna izquierda del tema predeterminado se muestra en la página de las categorías cuando se activa en el panel de administración. Sirve como un espacio práctico en el que colocar enlaces de navegación y herramientas.

Bloque de categorías

Las categorías representan una forma jerárquica de categorizar artículos: cada una puede incluir un número ilimitado de subcategorías, lo que permite navegar fácilmente desde páginas de categorías más generales hasta productos más concretos siguiendo una ruta lógica.

Una tienda de PrestaShop puede contener tantas categorías y subcategorías como sean necesarias, e incluir una cantidad infinita de productos en cualquier nivel de la categoría. 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 distintos criterios con los que se pueden filtrar productos, principalmente por atributos, funcionalidades e intervalos de precios. Resulta muy práctico para ayudar a los clientes a encontrar un producto.

La sección central

Aquí es donde se crea la magia. La sección central cambia constantemente según las decisiones que el cliente va tomando.

La página de inicio

La página de inicio predeterminada proporciona al cliente un amplio resumen de la tienda y de sus posibilidades. Un carrusel de tres imágenes sirve de presentación de la tienda.

Al carrusel le sigue una lista de «Productos destacados», en la que se destacan los productos según su popularidad.

Los usuarios de Internet más experimentados llegarán a la tienda desde un buscador y directamente a la página de un producto o de una categoría. Son pocos los que verán la página de inicio; por ello la debes adaptar para los usuarios nuevos.

Páginas de listas de productos

Categorías, etiquetas, marcas, proveedores, búsquedas, y páginas de productos especiales, más vendidos o nuevos: PrestaShop dispone de varias formas de llegar a un producto, pero el cliente siempre encontrará una lista de productos que le resulte familiar en el contexto elegido.

A pesar de las distintas categorías, estos diseños de página son muy parecidos para que incluso a los recién llegados les resulten familiares. Todos ellos muestran una lista de productos relacionados organizados en cuadrículas con los siguientes elementos:

• Una imagen en miniatura
• Etiquetas de descuento o de estado en la esquina superior izquierda
• El nombre del producto
• El precio del producto

Esta presentación de lista permite a los clientes ver rápidamente la información principal de los productos cuando ya conocen todo lo necesario de un producto, lo que les permite tomar antes una decisión.

Al pasar el ratón por un producto, se muestra una breve animación en la que se presentan las distintas combinaciones y el enlace «Vista rápida». Al hacer clic en él, se abre 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

Las categorías pueden mostrar una imagen de encabezado con un mensaje de presentación que el propietario de la tienda puede redactar.

Clasificación de productos

Las páginas de productos filtrados por categoría o marca se pueden clasificar por precio (de menor a mayor o viceversa), nombre (de la A a la Z o viceversa) o relevancia.

Página de productos

Aquí es donde se muestra a los clientes toda la información que el propietario de la tienda ha proporcionado. En función del diseño del tema, una página de productos puede ser muy completa e incluir información exhaustiva o presentar simplemente los datos más básicos. El tema predeterminado es representativo porque su funcionalidad más destacada son las imágenes de los productos, e incluye una herramienta en la parte inferior que permite a los clientes ver las distintas imágenes disponibles.

Junto a las imágenes hay dos bloques:

• Un bloque de resumen con las características principales del producto seleccionado.
• El bloque «Añadir al carrito» con la opción de elegir entre las distintas combinaciones disponibles (que determina el propietario de la tienda) y la cantidad que se quiera pedir.

Debajo del bloque del carrito, encontrarás un bloque de confianza para informar a los clientes acerca de las distintas ventajas de comprar en tu tienda, o mostrar más transparencia en tus políticas de pago y envío.

En la parte inferior de la página de productos hay una sección con pestañas. Las más habituales son:

• Descripción: aquí se ofrece una descripción completa del producto que redacta el propietario de la tienda.
• Detalles del producto: esta pestaña solo se muestra si el propietario de la tienda ha introducido los datos de la hoja «Funcionalidades» del producto. Esta sección proporciona todas las funcionalidades detalladas que se incluyeron en la base de datos. El contenido de esta pestaña es muy escaso: solo se proporcionan algunos datos básicos, al contrario de lo que sucede con la descripción del producto.

La página del carrito

Al hacer clic en el enlace «Carrito: XX productos» del encabezado, el cliente llega a la página de resumen del carrito de compra, que representa el primer paso del proceso de pedido, antes de pasar a la página de finalización de la compra. Aquí se ofrece un resumen del contenido del carrito y se muestra de nuevo el bloque de confianza. El cliente también se asegura de que el pedido contiene ni más ni menos que los productos que desea.

Al hacer clic en el botón «Procesos de pedido», se redirige al usuario a la página única de finalización de compra, dividida en cuatro secciones:

1. Datos personales: donde se pide a los clientes que no han iniciado sesión que lo hagan o se creen una cuenta. Este paso se omite si el cliente ya ha iniciado sesión. No obstante, sigue disponible en caso de que el cliente prefiera iniciar sesión con otra cuenta.
2. Direcciones: donde al cliente se le muestran sus direcciones registradas en PrestaShop, de las que ha de elegir una a la que se debe enviar el pedido.
3. Forma de envío: donde el cliente elige la forma de envío.
4. Pago: donde se muestra al cliente el precio final del pedido (con el coste del envío incluido) y se le pide que elija una forma de pago.

El cliente puede volver a cualquiera de los pasos anteriores haciendo clic en el título correspondiente.

La página de finalización de compra está intencionadamente desprovista de toda distracción, como la columna de la izquierda, el pie de página y otros enlaces, que pueden impedir que el cliente efectúe la compra. Aun así, se puede salir del proceso de compra haciendo clic en el logotipo de la tienda del encabezado.

Segundo paso: Creación de una cuenta de usuario

Dado que es uno de los principales motivos por los que los clientes se pierden en las tiendas online, PrestaShop simplifica la creación de las cuentas de usuario.

Al hacer clic en el enlace «Iniciar sesión» del encabezado, el visitante llega a la página de autenticación en la que puede iniciar sesión. Si tiene que crear una cuenta, el enlace «¿No tiene una cuenta? Cree una aquí» le redirige al formulario de creación de cuentas.

El formulario de creación de cuentas consta de dos partes:

• Datos personales: el cliente debe proporcionar toda la información que permita identificarle de forma inequívoca, como el nombre, los apellidos, la dirección de correo electrónico, la contraseña y la fecha de nacimiento.
• Suscripciones: el cliente puede decidir suscribirse a tu boletín y recibir ofertas de tu socios. No olvides ofrecer estos campos si realmente envías este tipo de contenido.

Una vez registrado, se redirige al cliente a la página «Tu cuenta», en la que se puede acceder a numerosas de opciones: historial de pedidos, notas de crédito, cupones y acceder a la información previamente indicada.

Entre los enlaces disponibles se encuentra «Indicar dirección principal». Esta será la dirección predeterminada de este cliente, aunque puede tener muchas otras.

Si el cliente solo ha registrado una dirección, se utilizará como dirección tanto de envío como de facturación. Durante el proceso de pedido, el cliente puede elegir una dirección distinta para la facturación y crear otras nuevas sobre la marcha.

Tercer paso: Compra de un producto

Todo el proceso de compra de un producto en un sitio web de PrestaShop puede divergir por distintos caminos, pero todos convergen en el mismo punto, que en el argot del e-commerce se conoce como «embudo de conversión»: desde el momento en el que el carrito se llena y el cliente inicia la finalización de la compra, este debe avanzar por varias pantallas de validación hasta que el pedido se valida correctamente y se puede procesar.

Este recorrido se conoce de este modo puesto que es aquí donde muchas tiendas online pierden clientes porque les presentan demasiadas pantallas, complicadas y muy largas.

El proceso se inicia cuando el cliente hace clic en el botón «Procesos de pedido» del resumen del carrito, y siempre se repite la misma secuencia de pantallas:

1. (si el cliente no ha iniciado sesión) La pantalla de autenticación en la que el visitante puede ir a la página de creación de cuentas o iniciar sesión.
2. La página de direcciones de envío. Si en la cuenta del usuario no hay registrada ninguna dirección, se conduce al cliente directamente al formulario de creación de direcciones.
3. Se requieren dos direcciones para realizar un pedido:
   • Dirección de envío, a la que se envía el pedido.
   • Dirección de facturación, que debe ser aquella vinculada a la forma de pago.
4. Si el cliente tiene que facturar el pedido a una dirección distinta de la de envío, 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 que ya haya registrado o crear una nueva.
5. Si una dirección no es correcta, el cliente pueda hacer clic en el enlace «Modificar» para corregirla.
6. La página de envío.
7. El cliente puede elegir aquí distintas opciones relativas al envío y el embalaje:
   • Según lo que ofrezca la tienda, el cliente puede elegir embalajes reciclados y envoltorios de regalo (con una nota de regalo opcional).
   • El cliente debe elegir OBLIGATORIAMENTE un transportista para continuar al paso siguiente.
8. La página de pago.
9. El cliente puede elegir distintas opciones de pago, según lo establecido por el propietario de la tienda. Cuando el cliente hace clic en la forma de pago que prefiere, según cada cual, se envía al cliente a la página de administración de pago del proveedor externo elegido o continúa hasta una de las páginas de PrestaShop en la que puede indicar los datos necesarios, como una verificación antes de ver la información del cheque o la transferencia bancaria.
10. Las formas de pago mediante cheque y transferencia bancaria vienen instaladas de forma predeterminada, pero PrestaShop facilita la oferta de pago mediante PayPal, Hipay o cualquier otro proveedor externo. Consulta los módulos disponibles en el panel de administración de PrestaShop o echa un vistazo a la tienda virtual de complementos para descubrir aún más módulos: http://addons.prestashop.com/es/.
11. El cliente debe aceptar los términos del servicio de la tienda antes de finalizar la compra y validar el pedido, que se efectúa haciendo clic en el botón «Pedido con obligación de pago».
12. Cuando el cliente realiza la validación, se muestra la página de resumen.
13. Muestra el título «Su pedido está confirmado». Según la forma de pago elegida, se debe facilitar cierta información final al cliente junto con una notificación que indique que se le ha enviado el correo electrónico de confirmación y un enlace a la página del servicio de atención al cliente.

 

Gracias por ver este videotutorial de PrestaShop 1.7. ¡Nos vemos en el siguiente!