Si has llegado hasta aquí es porqué quizás estés pensando en crear una tienda online. Diseñar una tienda online puede ser tedioso y más si es la primera vez que lo haces, por ello en este post te explico cómo podrás diseñar tu propia tienda online de forma profesional.
Debes saber que montar tu propio E-commerce y conseguir vender con una tienda online es una tarea difícil, pero perfectamente alcanzable si se hacen las cosas bien. Aunque no lo parezca el diseño de la tienda influye en la compra por parte de los usuarios, por ello te explico los factores a tener en cuenta a la hora de diseñar una tienda online.
DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES
CLAVES PARA HACER EL DISEÑO DE TU TIENDA ONLINE / ECOMMERCE
- Diseño de la home de la tienda online
- Haz un diseño de la página de categoría sencilla y eficaz
- Crea una ficha de producto lo más completa posible
- Configura un filtro de búsquedas de la tienda online
- Trabaja la experiencia de usuario en la tienda online
- Call to action en un ecommerce
- Diseña un checkout rápido y eficiente en tu tienda online
- Formulario de suscripción (Newsletter) de la tienda online
- Ayuda al usuario con respuestas a preguntas frecuentes
- Crea un apartado de información y atención al cliente
- Seguridad ecommerce
Diseño de la home de la tienda online
Diseña una buena página home. La página home o de inicio es lo primero que van a ver los visitantes de tu web, para causarles una buena impresión es importante que se vea perfecta. Tendrá que tener características como:
Menú de categorías (el catálogo): Un menú a través del cual pueden ir a las distintas categorías de producto.
Listado de productos principales o destacados: Estos son los productos que tú consideras que deberían aparecer en portada, ya sea porque son los más vendidos o porque son tu producto principal.
Barra de búsqueda: Si quieres facilitar la búsqueda de productos al usuario, una barra de búsqueda en la página home puede simplificar considerablemente la tarea de búsqueda. Es muy recomendable que la barra de búsqueda también aparezca en todas las páginas de la tienda online.
Carrito: El carrito deberá estar presente siempre en cualquier página de tu tienda, pero especialmente en la home.
👉 Curso claves para crear una tienda online de éxito
Haz un diseño de la página de categoría sencilla y eficaz
Las páginas de categorías son las que ofrecen productos de una categoría en concreto. Estas páginas pueden tener un mismo diseño para todas las categorías o puedes hacer una diferenciación entre las distintas página de categoría añadiendo colores y diseños distintos. En cualquier caso deben tener un diseño que no dificulte la compra.
Debe quedar claro en qué categoría estás y cómo volver a una categoría padre. Para que el usuario no se pierda en las categorías y productos, es conveniente crear una barra de navegación, la conocida como breadcumb. Al hacer clic sobre cualquier palabra de la barra “breadcumb” te llevará a la categoría que corresponda, evitando así perderte entre categorías y subcategorías.
👉 Texto bajo categorías Prestashop
👉 Texto bajo categorías woocommerce
Crea una ficha de producto lo más completa posible
La ficha del producto debe mostrar todo los datos que definan el producto:
Descripción corta: Es recomendable poner una breve descripción con las características principales del producto.
Descripción larga: Esta descripción es la más larga y en ella deberías escribir todas las características y peculiaridades del producto en detalle. Si el producto en concreto se caracteriza por algo, este sería el apartado en el que explicarlo.
Imágenes: Pon una imagen principal y tantas secundarias como sean necesarias para que el cliente vea el producto como si estuviera en una tienda física. Las imágenes deben ser de alta calidad y mostrando el producto desde todos los ángulos. Pero, hay que llevar también cuidado en que las imágenes no pesen demasiado, pues puede retrasar las carga de la página.
Botón de compra: Dentro de cada producto, deberás colocar en un lugar de buena visibilidad el botón “añadir al carrito”.
Cupón: horizonweb
Un ejemplo de ficha de producto sería este:
En esta ficha de producto se ven elementos como: la barra breadcumb, la descripción corta, en este caso es una tabla con las características del producto. La imagen de alta calidad no puede faltar y además deberá contener tantas imágenes como sea necesario. El botón añadir al carrito siempre en un lugar visible. Y finalmente debajo de toda esta información, convendría una descripción más en detalle del producto como he explicado antes como descripción larga.
👉 Cómo crear una ficha de producto perfecta
Configura un filtro de búsquedas de la tienda online
Además del buscador mencionado anteriormente, conviene tener la opción de filtrar la búsqueda por categoría de producto, colores, tamaño, precio, peso y otras características que consideres en función del tipo de producto. Contra más cantidad y variedad de productos tengas, más opciones de búsqueda deberías ofrecer en el filtro de búsqueda.
👉 Filtro de búsquedas Woocommerce
Trabaja la experiencia de usuario en la tienda online
– Colores: Si ya tienes identidad corporativa añade tus colores, en caso de no tener colores corporativos, deberás pensar en unos para conseguir una buena imagen. Los colores tienen cierta importancia, pero no te vuelvas loco, trabaja con 2 o 3 colores como máximo, combinar muchos colores puede resultar excesivo y distorsionar tu imagen de marca.
El cuanto al fondo, lo recomendable es color blanco, es el que usan la mayoría de tienda online y el mejor combinable. Si por razón del tipo producto o imagen de marca, consideras otro color, estaría bien también, pero utiliza una herramienta como Color Scheme Designer. Esta herramienta te permite crear las combinaciones de color adecuadas.
También puedes usar temas que incluyen multitud de plantillas con diseños profesionales, combinaciones de colores ya realizadas y que son personalizables. Ejemplo, plantillas de Divi
– Elimina distracciones: Ofrece tu producto sin obstáculos, puedes crear pop up, estos mensajes emergentes pueden servirte para ofrecer ofertas y descuentos, pero cabe señalar que no hay que abusar de ellos puesto que poner muchos de estos mensajes puede ser irritante para el usuario final. También puedes trabajar un slide-in o fly-in, que es menos intrusivo que el PopUp
– Chat: Poner un chat en una tienda online ayuda al usuario a ponerse en contacto de una forma más rápida, un chat es de utilidad siempre que haya alguien para responder en tiempo real, en caso de no poder atenderlo las 24h se puede establecer un horario y fuera de este desviar las consultas al correo electrónico.
Call to action en un ecommerce
El Call To Action (CTA) es una llamada a la acción. Consiste en unas palabras o frases con las cuales indicas a un cliente potencial cuál es la acción específica que quieres que realice en tu web.
- Comprar un producto de oferta.
- Suscribirse a tu newsletter.
- Participar en un concurso.
- Ofrecer un descuento a cambio de algo.
El Call To Action no se limita solamente a un botón para realizar una acción, sino que es una herramienta muy potente del marketing digital. Puede ser el camino para engordar tu lista de suscriptores, suscriptores que luego pueden ser potenciales clientes.
También aumenta la intención de compra ya que obligas al cliente a interactuar con acciones en la web y le ofreces recompensa a cambio.
NOTA: En este post te muestro como cambiar el color del botón de añadir al carrito en Woocommerce con CSS Hero
Diseña un checkout rápido y eficiente en tu tienda online
El checkout es el proceso de compra en la tienda online. Es decir, el proceso que ha de realizar un usuario una vez que ya ha seleccionado los productos que quiere comprar y se dispone a realizar la compra de dichos productos.
Te voy a mostrar ahora algunas claves en relación al checkout.
Evita la obligatoriedad de registro: Esto aumenta el número de ventas ya que reduce los carritos abandonados considerablemente. En la primera compra los usuarios son más reacios a registrarse, bien sea por pereza o porque creen que no volverán a comprar, por ello para evitar que salgan de tu sitio web sin terminar la compra, da la opción de que lo hagan sin registro obligatorio. Esto también se denomina comprar como «invitado».
Simplifica al máximo el proceso de compra: Limítate a poner los pasos esenciales (Relleno de datos de compra – método de envío– Pasarela de pago). Conviene además crear la opción de volver a un paso anterior mediante una barra de navegación, de esta forma pueden cambiar los datos que deseen antes de finalizar el proceso de compra.
Nota Joaquín: yo personalmente creo que los checkouts en una sola página son los más efectivos. Es decir, los checktouts donde el visitante no tiene que pasar por varias páginas
Posibilidad de cambiar cantidades: Un extra interesante sería que en el carrito pudieran aumentar o reducir el número de unidades a comprar de cada producto que aparezca en el carro. La visita al carrito sería el punto de inicio del proceso de compra o checkout.
Desglose del precio: Finalmente un desglose que diferencie precio del producto, precio de envío e impuestos. Los desgloses ayudan al usuario a entender el precio final.
Evita que se escapen tus clientes facilitándoles el acceso a una newsletter. Imagina que un cliente ha realizado una compra en tu tienda, este cliente tiene altas probabilidades de ser afín a los productos que ofreces, por ello debes procurar tener a ese cliente informado de novedades en productos. Con una newsletter podrás ofrecerle la suscripción a contenidos, de esta forma llegarán al usuario correos con las novedades de productos y descuentos y otras novedades que consideres de interés.
El formulario de registro a la Newsletter puedes colocarlo en un lugar de la página home y luego ofrecerla a modo de pop up o simplemente al finalizar el proceso de compra con una casilla siempre desmarcada para cumplir con la protección de datos.
Ayuda al usuario con respuestas a preguntas frecuentes
Puedes crear un apartado con las preguntas más comunes entre los consumidores de tus productos.
Contra más documentes este apartado mejor informados estarán tus clientes a la hora de elegir un producto, además reduces la carga de preguntas vía email, ya que como su nombre indica estas son las preguntas más frecuentes.
Crea un apartado de información y atención al cliente
Facilita a tus clientes la forma de contactar con tu tienda. Lo más útil es colocar en el pie de la página home apartados como: Envío, devoluciones, garantía, quienes somos y otras aclaraciones.
👉 Curso atención al cliente tienda online
Seguridad ecommerce
En cualquier página web circulan datos de usuarios, pero en una tienda online además de los típicos datos personales de nombre, correo, direcciones… Circulan datos de pago. Por ello debes tener ciertas medidas de seguridad.
Instala un certificado SSL. Contar con un certificado SSL, permite que los datos que se introduzcan en tu web viajen cifrados hasta su destino. De esta forma tus clientes podrán realizar compras con la certeza de que sus datos personales y bancarios son ilegibles por un tercero no deseado. El certificado puedes adquirirlo en la mayoría de hosting web y su precio va desde los que te lo ofrecen incluido en el plan de hosting a unos pocos euros en algunos casos.
Para asegurarte de que tú tienda online tiene el certificado correctamente instalado, deberá ver un candado a la izquierda de la barra de direcciones y además la URL deberá empezar por las letras “https”.
En resumen, para diseñar una tienda online hay que pensar como un cliente, si tu fueras un consumidor ¿En qué tipo de tienda online querrías comprar? ¿Querrías resolver rápidamente tus dudas? ¿Querrías una ficha de producto completa o con falta de información? Ahora que sabes la importancia del candado ¿Comprarías en un lugar sin SSL?
Hola, soy David Andreu, me dedico al diseño de sitios web, actualmente soy webmaster de Consigue Tu Web y apasionado de la informática.
