El header de una tienda online es una pieza fundamental para impulsar las ventas de tu ecommerce. Muchas veces subestimamos su importancia y su potencial para aumentar la usabilidad y la eficacia de nuestra tienda online.
Qué es el header de una tienda online
El header o la cabecera de una web o tienda online, es la franja superior que es fija y visible en todas las páginas de la web/tienda. Normalmente es donde encontraremos el logotipo de la marca, el menú y los enlaces a las páginas más importantes de la web.
Es lo primero que vemos cuando aterrizamos en una página web o una tienda online y tiene que facilitarnos encontrar lo que estamos buscando con el menor número de clicks posible. La idea es que los visitantes de tu tienda tengan a mano en el header todo lo que puedan necesitar para completar una compra con éxito y teniendo una experiencia de navegación agradable.
Elementos del header de una tienda online
Hay muchas variaciones entre tiendas online, los elementos finales dependen mucho de la amplitud y organización de tu catálogo, tus vías preferidas de atención al cliente, etc. Pero aquí tienes un listado de elementos habituales que los compradores esperan encontrar en la cabecera de tu tienda online:
- Logotipo: El logotipo de la marca recuerda a tu clientela que está dentro de tu tienda online y haciendo click en el siempre puede volver a la página principal.
- Menú principal: Es el que debe enlazar a los elementos más importantes de nuestra tienda. Normalmente encontraremos aquí enlaces a las categorías principales y secundarias de nuestros productos.
- Menú secundario: Generalmente está localizado en la parte superior de la web y enlaza a las páginas más prácticas a las que tus compradores necesitan acceder con facilidad como su cuenta, sus favoritos, el carrito. También es el lugar favorito para mostrar la información de contacto y mostrar las promociones vigentes.
- Buscador: Una tienda online necesita tener un buscador de calidad y lo más recomendable es que esté situado en la cabecera para que sea accesible desde cualquier página de la tienda.
- Carrito: El carrito debe de ser muy fácil de buscar y ser siempre visible mientras navegamos por una tienda online, por eso el header de la tienda online es el lugar perfecto para tener un link al carrito.
- Información de contacto: Dependiendo de cuáles sean tus canales de atención al cliente favoritos, te interesará incluir o no tu información de contacto en el header de tu tienda online.
- Acceso a mi cuenta: Facilitar el acceso a su perfil y sus pedidos facilitará mucho el trabajo a tus clientes.
- Acceso a favoritos: Los favoritos son la antesala de una compra y por eso interesa que sea fácil encontrarlos y pasar a comprar.
- Ofertas y promociones temporales: Si tienes un cupón de descuento temporal, envíos gratis a partir de cierto importe de compra, etc. el mejor lugar para anunciarlo es la zona de la cabecera, ya que será visible en todas las páginas y durante todo el proceso de compra.
Ejemplos de cabeceras para tiendas online
El header de Lamantika es minimalista. Se trata de una tienda con pocas categorías de producto y por lo tanto permite un diseño sencillo. En el header encontramos links a las categorías principales, al carrito, favoritos (Wishlist) y mi cuenta, además incluye la promoción más importante (Gastos de envío gratis en compras superiores a 100€).
La cabera de Tienda Bonica incluye enlaces a las categorías y subcategorías de productos, información de contacto, mi cuenta, carrito, favoritos y el blog de la tienda.
Pero en una tienda online más grande y compleja, el header también se hace más completo. Aquí en M&S podemos ver cómo en los deplegables de las categorías principales se abren muchísimas subcategorías. Pero los elementos más importantes de los que hemos hablado son los que se muestran aquí: logo, buscador, categorías, carrito, mi cuenta, favoritos, oferta principal, etc.
Consejos generales para el diseño del header de una tienda online
- No sorprendas con la ubicación de los elementos más importantes: La usabilidad de tu web mejora cuando tus visitantes encuentran lo que buscan en el lugar en el que esperan encontrarlo. No hay lugar para la originalidad aquí, se trata de facilitar el proceso de compra, no de que pierdan tiempo y se frustren buscando.
- Utiliza iconos para que hagan de ayuda visual para encontrar información relevante. El icono del carrito, el corazón para los favoritos, etc. facilitan mucho encontrar determinados elementos que te interesa destacar.
- Intenta no complicar en exceso el diseño. Demasiados elementos dispersan mucho la atención, pueden ser abrumadores y dificultar mucho la compra desde dispositivos móviles con pantallas más pequeñas. Muchas tiendas online de moda que tienen cientos de categorías hacen que la compra desde un teléfono sea una auténtica pesadilla. Esto provoca que se pierdan muchas compras impulsivas que se hacen precisamente desde los teléfonos. "Facilita, facilita, facilita", ése debe ser tu mantra.
Algunos plugins que te pueden ayudar a mejorar el header de tu tienda
Estos tres plugins te ayudarán a crear una cabecera que incluya todos los elementos de los que hemos hablado en este artículo.
- Menu icons: Permite incluir iconos en el menú, puedes usar los que vienen con el plugin o subir tus propios iconos descargados en Flaticon en formato SVG.
- Yith WooCommerce Wishlist: Para poder ofrecer a tus clientes la opción de guardar productos en sus favoritos.
- YITH WooCommerce Ajax Search: Incluye un buscador especialmente pensado para WooCommerce en tu web que mostrará los productos que coincidan con los criterios de búsqueda.
En las imágenes de este artículo se han usado iconos diseñados por Freepik descargados en www.flaticon.com