ClassicBlinders la mejor plantilla gratis para PrestaShop

La plantilla de las tiendas puede ser un gran factor diferencial para tus clientes a nivel de SEO y usabilidad en general, por eso decidimos realizar una plantilla sobre el propio diseño de la classic de PrestaShop pero mejorandolo tanto en WPO, SEO y UX

De esto nos ha salido una plantilla que a simple vista parece que es igual que la de por defecto, pero debajo lleva unas grandes mejoras.

Mejoras UX

En general PrestaShop nunca a tenido una plantilla con una gran usabilidad, y aunque ha ido mejorando en los últimos años siempre han descuidado la parte mobile, debido a que hemos realizado multiples plantillas a medida para nuestros clientes y sabemos muy bien donde estan esas carencias en las plantillas en general, decidimos hacer un gran incapié en esta usabilidad de PrestaShop.

Cabecera reordenada

Siguiendo la estructura de los grandes eCommerce y nuestra experiencia en diseños y desarrollos de plantillas, hemos realizado una pequeñas modificaciones para darle más importancia a ciertos elementos.

• Hemos destacado el buscador ya que es un elemento cada vez más usado por los clientes.
• Los iconos del carrito y la zona de clientes la hemos colocado en la zona derecha de la cabecera principal, dándole un diseño con iconos reconocibles y lo más parecido posible tanto en mobile como desktop.
• En la zona anterior también hemos metido un icono que enlaza al formulario de contacto para que en mobile también esté siempre visible y accesible.
• El menú lo hemos bajado a una posición inferior, teniendo todo el ancho de la cabecera disponible para la inserción de enlaces.
• Resumen de comentarios en la cabecera, sabemos que cada vez es más importante dar confianza a los clientes, y si ya la tenemos porque no mostrar este resumen de nuestra tienda en la parte más visible de la web.

Modal añadir al carrito

Desde la versión 1.5 de PrestaShop no se ha cambiado ni mejorado este modal que aparece cuando añades productos al carrito, antiguamente hacia un efecto de que el producto volaba hasta el carrito y se metía dentro, esto fue muy visual en sus comienzos pero al tendencia de diseño y ux cambio y decidieron cambiarlo al modal que hay actualmente.

Este modal no esta del todo mal, pero para la versión dektop, si lo vemos en la versión mobile ya nos bloquea toda la pantalla y tenemos incluso que hacer scroll para darle al botón de ir al carrito.

Este modal lo hemos cambiado tanto para desktop como mobile, ahora se despliega desde la derecha a todo lo alto, en el que mete el resumen en el que se puede interactuar (subir y bajar cantidad, eliminar productos, ir al carrito o ir al checkout directamente).

En mobile se adapta a la pantalla completa siendo visible siempre todos los botones de acción, y si tienes muchos productos en el carrito hay un scroll de solo el bloque de los productos, dejando siempre visibles los botones de ir al carrito o al checkout.

Además podemos ver el resumen del carrito, no solo del producto que estás añadiendo, así podemos pasar al checkout directo ya que le estas desglosando al cliente todos los detalles.

Icono "Mi cuenta"

El típico icono que enlaza a la sección de "mi cuenta", que hemos colocado junto al icono del carrito, hemos cambiado su funcionalidad, en vez de dirigirte directamente a la zona de cliente, hemos añadido otro modal que se despliega como el del carrito con los enlaces directos a las secciones, ayudando y mejorando la navegación de los clientes sobre esta sección.

Además podemos cerrar sesión desde el propio modal, sin necesidad de mostrar más contenido en la cabecera ni tener que ir a la url de "mi cuenta".

Carruseles de productos

En ciertos hooks o secciones de la web hemos optado por mostrar los productos en un carrusel, en vez de listados verticalmente, mostrando así secciones que el cliente puede interaccionar si quiere ver más productos o seguir viendo el resto del contenido de la web sin que le moleste demasiado.

Estos cambios están realizados directamente en los módulos de novedades, más vendidos y destacados de PrestaShop, así tanto en la home como en otras secciones de la web podrás mostrar un listado de productos amigable tanto desktop como mobile y favoreciendo el interlinking de nuestro eCommerce.

Añadir al carrito desde el listado

Por norma general de las plantillas, para añadir un producto al carrito hay que realizar desde la propia ficha de producto, que obliga al usuario a hacer otro click si tiene claro lo que quiere añadir, hemos incorporado esta funcionalidad en todos los listados de productos, tanto en categorías, marcas, carruseles, más vendidos, mejores ventas, etc

Uno de los problemas que abordamos fue el de meter la cantidad a añadir, esto empeoraba el WPO, la estética y la usabilidad mobile al estar todo muy junto. Por eso optamos que desde el propio modal de añadir al carrito se pueda ampliar y reducir la cantidad de los productos añadidos.

De esta forma sencilla y muy usable solucionamos este problema que suelen tener en general los eCommerce.

Scroll infinito

Hemos cambiado la paginación clásica por un scroll infinito incluido directamente en la plantilla, esto implica que en todos los listados de productos aparecerá este scroll infinito con en categorias, marcas, url de más vendidos, url de novedades, etc.

Hay varios tipos de scroll infinito pero hemos desarrollado el que creemos que es el más usable por los clientes, puedes ver un vídeo nuestro en el que hablamos sobre los distintos scroll infinitos y la comparación con las paginaciones

Ficha de producto

Aquí hemos rediseñado la ficha de producto completa, tanto mobile como desktop, posiblemente esta sección sea de las peores que tiene la plantilla classic.

Hemos realizado muchas mejoras pero las más destacadas y pensando siempre en mobile son:

• Separamos en dos partes la ficha de producto
• Parte superior con toda la información resumida y los call to action para una visualización rápida,
• En la sección superior lo hemos divido en 3 columnas en vez de 2 como tienen actualmente, para tener mejor repartida la información
• La columna de la izquierda a mostrar el producto en si con sus imágenes
• La columna central tenemos la información resumida del producto, la marca con un enlace a dicha marca, así como el resumen de las valoraciones y posibles bloques como los packs de productos o personalización de producto
• La de la derecha puramente de venta, con los precios, descuentos, combinaciones, ventajas y botones de acción
• Parte inferior con la información mas detallada (descripción larga, características, etc) y los módulos que incluyen contenido como las valoraciones de productos, productos relacionados,etc

Para mobile es prácticamente igual, siendo todos los bloques en vertical y destacando antes de la imagen el nombre del producto.

Checkout

Tanto la url del carrito como la url hemos hecho modificaciones estéticas y usabilidad, sobre todo en los listados de los productos añadidos y resumen de la compra.

Hemos puesto los cupones más visibles y con un nuevo diseño más amigable.

En el checkout sobre todo las mejoras son el bloque de login o registro que lo hemos rediseñado y simplificado, dándole algunos toques de diseño para aumentar la seguridad en la zona más crítica de la web.

El último gran cambio que afecta realmente a todos los formularios de la web, es el rediseño de los inputs para simplificar la visualización de los mismos y el contenido del mismo.

Zona "Mi cuenta"

Aquí nos hemos lucido, y aunque parezca que no tenemos abuela, hemos mejorado mucho esta sección.

Se puede decir que es una parte muy olvidada de PrestaShop y que lleva con el mismo diseño/ux muchos años, y realmente no hemos visto ninguna plantilla de pago o gratuita que mejorase esto, y como siempre nos tocaba hacerlo para clientes decidimos integrar estas mejoras en la plantilla.

Además del modal que hemos explicado anteriormente al pinchar sobre el icono del cliente, hemos cambiado la página general de mi cuenta poniendo una columna izquierda con una navegación sobre estas secciones sin tener que volver siempre a la página principal de "mi cuenta"

Hemos cambiado el diseño de los elementos de esta sección dando algo más de información y organizando en secciones todos estos enlaces, además hemos cambiado los iconos de los mismos.

El historial del pedido también lo hemos cambiado, dejando más claro las acciones que podemos realizar así como un resumen visual del pedido bien pensado tanto mobile como desktop.

Por último el detalle del pedido lo hemos modificado mejorando la estructura de la información y los botones de acción, así como el listado de los productos comprados con una nueva funcionalidad de volver a pedir solo un producto en concreto y no todo el pedido.

Mejoras WPO

Nos hemos obsesionado mucho con mejorar las core web vitals de esta plantilla, dando unos fantásticos resultados tanto en mobile como desktop.

• Hemos realizado muchas optimizaciones en la plantilla y los módulos generales de PrestaShop para adaptarlos a técnicas de mejoras de estas métricas, entre ellas hemos metido de forma nativa en la plantilla y módulos el lazy load de todas las imágenes que se muestran en la web.
• Hemos reducido lo máximo el DOM general de la web.
• Hemos eliminado todo rastro de recursos externos, incluso ampliando la librería de iconos a casi el doble de peso, pero con una carga local.
• Hemos ajustado el CSS y JS de la plantilla para tener solo lo necesario, aunque seguramente iremos mejorándolo en el futuro.

Con estos y otro muchos cambios tenemos unos resultados de:

• Home: mobile 98/100 y desktop 100/100
• Categorías: mobile 98/100 y desktop 100/100
• Producto: mobile 88/100 y desktop 96/100

Mejoras SEO

Rastreo e indexación:

• Canonicals bien configuradas en filtros y sistemas de orden
• Enlaces encriptados a secciones privadas para no enlazar a 3xx
• Enlaces a zonas como carrito encriptadas
• Scroll inifnito bien configurado

Semántica:

• Anchors text relevantes (texto e imagenes)
• Marcados de datos con JSON-LD
• Jerarquía semántica optimizada
• Descripciones cortas y largas en todas las tipologías de página

Autoridad interna:

• Sin pérdidas de autoridad por secciones irrelevantes
• Sin anchor text vacíos o irrelevantes
• Prioridad de autoridad a categorías y marcas principales

Módulos adicionales incluidos

Dentro de esta plantilla hemos incluido una serie de módulos también gratuitos para realizar ciertas acciones o visualizaciones en la plantilla

DB Contact Info

Este módulo muestra el teléfono de contacto en el navbar de la plantilla (zona superior izquierda) y en la cabecera del checkout para dar una mayor seguridad en la zona de compra.

Ademas añade un icono en la cabecera de forma ofuscada para enlazar a la página del formulario de contacto.

Todo esto se puede activar/desactivar y configurar desde el propio módulo

DB Home Categories

Este módulo es muy utilizado a nivel de SEO para mostrar las categorías que quieras pasar autoridad directamente en la home, no solo en el menú como es lo habitual.

Este módulo también se puede configurar las categorías que se quieran mostrar desde su propia configuración

DB Free Shipping

Este módulo está muy chulo ya que muestra en el navbar de toda la web desde cuanto tenemos el envío gratuito, pero ademas añade esta info en la ficha del producto diciéndote que cantidad te queda por añadir al carrito para que tu pedido salga gratuito.

Este módulo no configura que el envío sea realmente gratuito, es solamente informativo y hay que configurarlo en los transportistas para que realmente tenga efecto.

DB Brand Slider

Al igual que con las marcas, este módulo es muy usado a nivel de SEO para mostrar y transferir autoridad a las páginas de marcas que más te interesen.

DB Category Large Description

PrestaShop nunca ha incluido una segunda descripción en las categorías, es algo muy habitual por SEO y es algo imprescindible en cualquier tienda, con este módulo puedes añadir esta descripción larga debajo del listado de productos de las categorías.

Es configurable esta descripción desde la edición de categorías del backoffice.

DB Product Comments

Con este módulo que tira desde el básico de PrestaShop productscomments para mostrar el resumen de dichas reseñas en diferentes zonas de la web.

DB Ofuscador

Este modulo no tiene nada visual, pero es para ofuscar cualquier enlace en nuestra tienda, lo hemos usado en varios links de la plantilla para no traspasar la autoridad a zona que no queremos.

Si queremos añadir nuestros propios enlaces ofuscados tendremos que hacerlo desde el propio código del modulo o de la plantilla.

DB Rich Snippets

Hemos eliminado todo rastro de marcado de datos en el html de la plantilla, y hemos realizado este modulo para meter todos los marcados por defecto con un json-ld en el header del HTML.

Demo de ClassicBlinders

Podéis ver y trasteare la demo de la plantilla desde https://theme.devblinders.com/

También podéis ver el código y las mejoras que se van realizando desde nuestro github https://github.com/DevBlinders/classicblinders

Feedback

Queremos seguir mejorando la plantilla, y todo feedback es bienvenido, podéis hacerlo desde los propios issues de GitHub o directamente en los comentarios de este mismo post.