Diseño tienda online WooCommerce

Diseño tienda online WooCommerce

Ya hemos explicado que Woocommerce es un plugin que te permite convertir tu Wordpress en una tienda virtual segura, confiable y de aspecto profesional con la que podrás vender en internet tus productos o servicios. Puedes verlo en el post que le dedicamos

En este post vamos a explicarte todos los aspectos que debes tener en cuenta para diseñar un ecommerce atractivo, confiable y de calidad con WooCommerce.

¿Quieres ayuda para subir tu negocio a internet con seguridad?

tienda online woocommerce

Diseño de la tienda online

Vamos a darle el aspecto apropiado a tu tienda virtual para que transmita profesionalidad, agrade al cliente, le dé seguridad a la hora de comprar tus productos o servicios, lo incite a comprar y compre.

El diseño de tu tienda online es fundamental para el éxito de tu empresa ya que será tu carta de presentación de cara al público y causará un impacto (bueno o malo) en tus posibles clientes.

El diseño y la funcionalidad de tu tienda deben compaginarse además con unos productos o servicios de calidad.

Contar con un buen diseño es imprescindible para que la tienda funcione. 

Un comercio electrónico bien diseñado proporcionará al usuario una experiencia de compra agradable, le facilitará navegar por el mismo, a buscar y elegir los productos que necesita y a comprarlos con facilidad.

Antes de comenzar a diseñar debes tener muy claro cómo quieres que sea tu ecommerce.

En primer lugar, debes pensar detenidamente en la estructura que va a tener, es decir, en las diferentes páginas que vas a crear.

Debes decidir el número de páginas que deseas y cómo vas a enlazar unas con otras.

También debes definir los diferentes menús y su ubicación para que resulte fácil al visitante navegar por ella y encontrar lo que busca.

En segundo lugar, debes determinar la composición de estas páginas. Debes decidir cómo las vas a estructurar, dónde irán los textos, imágenes y vídeos.

Por último, debes definir el contenido. Tienes que redactar los textos y definir las imágenes, iconos y vídeos concretos que compondrán cada uno de los apartados de tu tienda virtual.

El diseño de tu tienda virtual debe ser uniforme ya que, si mezclas y combinas estilos, confundirás a los usuarios y tu tienda tendrá un aspecto poco profesional.

Vamos a definir lo que tienes que hacer para diseñar tu tienda virtual correctamente.

diseño ecommerce

Estructura de tu tienda virtual

Utiliza el buscador de Google, mete palabras clave relacionadas con tu negocio (productos, servicios, tiendas de la competencia…), revisa las tiendas de la competencia y define la estructura de la tuya.

Mira otras tiendas que no sean de la competencia para obtener ideas válidas para tu ecommerce.

Tras este estudio define:

  • Páginas que va a tener la tienda.
  • Menús y ubicación de los mismos para enlazarlas.

El objetivo es conseguir una navegación agradable e intuitiva para que los usuarios encuentren lo que necesiten y lo compren rápidamente.

Debes tener un buen menú que facilite la navegación por tu tienda. Debe contener entre 3 y 7 elementos como máximo. 

Las páginas “quienes somos”, “legal”, etc. deben estar fuera del menú. El mejor lugar es el pie de página, donde los usuarios están más acostumbrados a encontrarlas.

Utiliza iconos para facilitar el acceso a las diferentes secciones de tu tienda online. Utiliza diferentes iconos que a simple vista den información y permitan a tus clientes acceder a las distintas secciones.

Introduce una barra de búsqueda en tu tienda online para ofrecer aún más facilidades en las búsquedas de tus clientes.

Añade opciones de filtrado. Normalmente se utilizan en las páginas de categoría y producto, pero también se pueden utilizar en la página de inicio.

Utiliza filtros por precio, tallas, tamaños, colores, etc. para que tu cliente encuentre lo que está buscando cómodamente.

Por último, los productos deben estar bien organizados por categorías, sobre todo si cuentas con un inventario grande.

Woocommerce te facilita la estructuración de tu tienda online.

Composición de tu tienda online

Ahora se trata de que definas cómo vas a estructurar cada una de las páginas, es decir, determinar dónde van a ir los textos, imágenes y vídeos.

Diseña cada página para que muestre de la mejor manera posible tus productos o servicios.

Al igual que antes revisa otras tiendas para inspirarte y compón un diseño propio.

Algunos factores a tener en cuenta dentro de la composición son los siguientes:

Colores de tu ecommerce

La elección y cantidad de colores que utilices en tu tienda influirán decisivamente a la hora de conectar con tu cliente.

En función del tipo de producto o servicio que utilices encajarán mejor unos colores que otros.

No es lo mismo una tienda de productos ecológicos que un sex shop.

En el primer caso lo aconsejable sería utilizar tonos suaves del verdes, marrones y blancos, para un sex shop es más apropiado usar combinaciones de negro y rojo con tonos potentes y llamativos.

Cada color transmite una serie de valores y sensaciones en las personas, por ello debes decidir a qué público objetivo te vas a dirigir y elegir los colores que te permitan conectar con él de la mejor manera posible.

colores para ecommerce

Otro aspecto que debes tener presente es la cantidad de colores que vas a utilizar.

Una de las causas principales de que una web no tenga un aspecto profesional es la utilización de demasiados colores.

Una web con muchos colores es confusa, pierde la coherencia y distrae al usuario evitando que se fije en los elementos más importantes.

Por ello lo recomendable es utilizar la menor cantidad de colores posibles.

Como norma general debes utilizar tres o cuatro colores de tal manera que tengas:

  • Un color predominante para utilizarlo como fondo, en la cabecera, etc.
  • Uno o dos colores secundarios para utilizar en distintas secciones, enlaces, textos…
  • Un color, el más llamativo o potente, para para botones o elementos de alto valor estratégico.

Es muy importante que utilices tus colores corporativos para crear una imagen de marca coherente que permita al cliente reconocerte.

Tipografía para tu tienda virtual WooCommerce

Las tipografías son un elemento que influye en la estética de tu página, pero su labor principal no es decorar sino facilitar la lectura a tus clientes. Por ello, no antepongas la estética a la usabilidad.

Lo recomendable es elegir una tipografía clara, que destaque del fondo y que se vea bien a diferentes tamaños.

En función de tus productos o servicios y de tu cliente ideal escoge el tipo de letra que mejor encaje.

Respecto al tamaño lo más usual es utilizar los siguientes:

  • H1 a 36px.
  • H2 a 30px.
  • H3 a 24px.
  • H4 a 18px.
  • Cuerpo a 16px.

Estos tamaños pueden variar en función del tipo de fuente. No olvides comprobar cómo se ven los tamaños que has elegido en los dispositivos portátiles (móviles y tablets).

Podrás utilizar varias tipografías, pero como norma general te recomiendo que utilices dos familias, una para los encabezados (H1, H2, H3, H4 y los títulos de los widgets) y otra para el cuerpo.

Si tienes un logotipo, formularios de suscripción, banners publicitarios u otros elementos que incorporen texto, intenta mantener la identidad visual utilizando las mismas fuentes.

¿Quieres ayuda para subir tu negocio a internet con seguridad?

tienda online woocommerce

Imágenes de tu tienda virtual

Para que tu sitio tenga una apariencia profesional necesitas cuidar las fotografías que publicas.

La buena calidad de las fotografías de tus productos es uno de los factores más determinantes a la hora de conseguir una apariencia que atraiga y seduzca a tus potenciales clientes.

Las imágenes deben ser de calidad, pero no pesar mucho, es decir, deben estar optimizadas.

Para optimizar el peso de tus fotografías puedes utilizar programas como fileminimizer.

Vídeos

Imprescindibles para conectar con el cliente.

El vídeo es un elemento poderoso para mostrar tus productos o servicios, a ti mismo o a tu empresa.

Debes plantearte insertar vídeos en áreas claves de tu tienda para generar interés y confianza a tus clientes.

Para ello tendrás que documentarte y dedicarle tiempo o contratar los servicios de un profesional o empresa.

Lo hagas como lo hagas tus vídeos deben ser de calidad ya que un mal vídeo produce un efecto nefasto en las ventas y proyecta una pobre imagen de tu empresa, tus productos y servicios.

videos tienda online

Contenido para el diseño de tu ecoommerce

El contenido de tu tienda es fundamental para que funcione.

El contenido provoca acciones en tus clientes, ayuda a construir imagen de marca, facilita que se compartan tus productos en las redes sociales y mejora tu visibilidad online.

El contenido está compuesto de texto, imágenes y vídeos.

De los dos últimos ya hemos hablado, ahora voy a explicarte cómo deben ser tus textos.

Antes de ponerte a redactar debes hacer una búsqueda de palabras clave que debes insertar tanto en las url de tus páginas, productos y servicios como en el cuerpo de los mismos con el objetivo de facilitar el SEO (posicionamiento en las búsquedas de Google).

Debes hacer igual que cuando elegiste tu dominio y validaste tu idea.

En primer lugar, tendrás que hacer un estudio de las posibles palabras clave que vas a utilizar para saber cuáles son las más adecuadas.

Para ello utiliza el planificador de palabras clave de Google AdWords.

Busca palabras por las que quieres posicionar tu tienda. Palabras que metan las personas en Google cuando busquen los productos o servicios que tu vendas.

Siempre deben ser palabras que tengan un buen volumen de búsquedas, con una tendencia al alza y una competencia intermedia o, a ser posible, baja.

palabras clave ecommerce

Con Google Trends busca la tendencia de búsquedas de esas palabras clave, seleccionando aquellas cuya tendencia sea creciente (dentro de lo posible).

google trends

Una vez hayas finalizado este estudio debes tener una lista de palabras que introducir en tus urls, páginas, productos o servicios.

Puedes mirar la guía SEO para ecommerce para saber de SEO en profundidad.

Texto para urls y páginas de tu tienda online woocommerce

Los textos de tu tienda estos deben ser claros y directos, además de estar optimizados para los motores de búsqueda.

Tu intención debe ser que el mensaje sea comprendido por la persona que lo reciba y provocar una acción en ella (en su caso).

Por ello, define en primer lugar a la persona o personas que van a leerlo, a tu cliente objetivo.

Para ello recapacita sobre:

  • ¿A quién va dirigido tu texto?
  • ¿Qué lenguaje utilizar (formal, coloquial, técnico…)?
  • ¿Qué se espera del receptor?
  • ¿Qué dimensión es la correcta?
  • ¿Qué formato debes utilizar (informar, vender, recomendar…)?

La persona que lea tus textos tiene que comprenderlos. Además, debes tratar con ellos lograr tus objetivos (vender, informar, generar confianza…).

Una vez que conoces el propósito de tu texto, la persona a la que va dirigido y la respuesta que deseas de ella, crea una especie de guion en el que definas las ideas que quieres comunicar y su distribución en diferentes páginas de tu sitio.

Las diferentes partes en las que se dividirá tu mensaje pueden variar en función del texto que vayas a redactar y de la finalidad de éste.

Fíjate en otras tiendas a la hora de estructurarlo y redactarlo.

También trata de seguir las siguientes normas:

  • Buena presentación.
  • Sin faltas de ortografía.
  • Con un lenguaje sencillo, entendible y cortés.
  • El mensaje debe ser claro y ordenado.
  • Debes usar frases cortas (no excedas de los 6 o 7 párrafos).
  • Cada párrafo debe desarrollar una sola idea.
  • Utilizar las palabras que mejor expresen las ideas que quieres transmitir.
  • Trata de ser directo.

Texto para productos de tu tienda online woocommerce

La información que aparece en cada ficha de tus productos tiene que ser única.

No copies el contenido de tu descripción de la página de tu proveedor o de la competencia ya que se considerará contenido duplicado y Google penalizará su posicionamiento.

Debes crear descripciones de productos de calidad, largas (200 o 300 palabras) y originales, que contengan palabras clave relacionadas y el nombre del producto.

La finalidad de tu ficha de producto tiene que ser captar la atención del visitante e impulsarle a comprar.

Para escribir una ficha de producto perfecta tienes que conocer a la perfección tu cliente ideal para entender sus problemas, cumplir con sus expectativas y responder a sus dudas.

Tu ficha de producto no debe ser únicamente un listado de características del mismo, sino que además debes mostrar los beneficios que el cliente consigue al comprarlo.

Debes pensar en cuáles son las motivaciones y las necesidades de compra de tu cliente ideal y redactar un texto que muestre que el producto las satisface.

Además, tu descripción debe contestar todas las preguntas que el cliente pueda tener y resolver todas las dudas (frustraciones, miedos) que podrían frenarlo a la hora de comprar.

¿Quieres ayuda para encontrar una idea de negocio que llevar a la práctica?

curso creación empresa

Debe cumplir con los siguientes puntos:

  • Diseño global limpio, claro y estructurado.
  • El nombre del producto debe ser atractivo y concreto que incluya la palabra clave de lo que vendes.
  • En la descripción corta define el problema que soluciona o la necesidad que satisface tu producto.
  • En la descripción larga explica perfectamente qué es el producto, cuáles son sus características y los beneficios que el cliente obtiene al comprarlo. Introduce las características que lo diferencian de la competencia.
  • Utiliza imágenes de calidad y poco peso como hemos visto.  Recuerda que tu cliente no puede tocar el producto ni probarlo y que es la foto la que le va a dar esa información que tendría si lo tuviera delante.
  • El precio del producto con IVA incluido.
  • Los botones de añadir al carrito bien visibles y diferenciados.
  • Incluye un apartado de contacto visible y fácilmente accesible para solucionar dudas de los clientes.
  • Introduce vídeos. Los videos como hemos visto son un aliado de las ventas.
  • Indica al cliente coste, plazo de envío y política de devolución. No debe quedarle ninguna duda acerca de la compra que va a realizar.
  • Añadir siempre testimonios y valoraciones de anteriores compradores. Es muy importante ya que tienen una gran influencia en la decisión de compra.
  • Incluye botones de compartir en redes sociales en un mismo color y discretos.

Trata de evitar:

  • Incluir distracciones innecesarias. No debes poner nada que pueda desviar la atención de tu visitante (fuera banners, pop up, colores demasiados fuertes…)
  • Esconder el teléfono o el email de contacto. Es muy frustrante tener que buscar el número para contactar con la tienda y no encontrarlo con facilidad.
  • Copiar y pegar la descripción del fabricante.
  • Fichas de productos iguales. Recuerda: contenidos propios, originales y únicos para cada producto. Nada de textos estándares.
  • Usar palabras y expresiones que quitan credibilidad del tipo: “la mejor calidad”, “el mejor producto”, “el precio más barato”, “un producto excepcional, fabuloso…). ¿Qué vas a decir tú de tu producto? Especifica mejor qué es lo que le diferencia de los demás productos de tu competencia y qué es lo que le hace tan especial para que tu cliente llegue solo a esta conclusión.
  • Usar palabras demasiado técnicas. Habla a tu cliente de forma sencilla y cercana. Cuando haga falta introducir detalles técnicos por la naturaleza del producto hazlo.
  • No pensar en el SEO. Piensa siempre en Google sin desviarte de tu producto. Repasa la construcción de la url, title (título de tu producto en google) y snippet (descripción resumida de tu producto en google). Tienes más información en la lección 6 del próximo módulo.

Manos a la obra

Teniendo claros y definidos todos los elementos que influyen en el diseño de tu tienda online WooCommerce el siguiente paso consistirá en escoger un buen tema de Wordpress y un maquetador visual y plasmar todo lo que hemos visto en este post.

El tema que te recomiendo es GeneratePress por su buena programación, estabilidad, rapidez y alta configuración.

Respecto al maquetador visual te recomiendo Elementor. Una pasada de maquetador que te permitirá diseñar exactamente todo lo planificado en el papel.

Dale caña a tu tienda!!

Deja un comentario

error: