%20--%3e%3csvg%20version='1.1'%20id='Calque_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20x='0px'%20y='0px'%20viewBox='0%200%20173%2019'%20style='enable-background:new%200%200%20173%2019;'%20xml:space='preserve'%3e%3cpath%20d='M4.9,13.1h2.9c1.4,0,2.6-0.3,3.7-0.8S13.4,11,14,10s0.9-2.1,0.9-3.4S14.6,4.2,14,3.2c-0.6-1-1.4-1.7-2.5-2.3%20c-1.1-0.5-2.3-0.8-3.7-0.8H0v18.7h4.9V13.1z%20M4.9,4.2h2.5c0.8,0,1.4,0.2,1.9,0.7c0.5,0.4,0.7,1,0.7,1.8S9.7,8,9.3,8.4%20S8.2,9.1,7.4,9.1l0,0H4.9V4.2z'/%3e%3cpath%20d='M31.4,9.7c0.5-0.9,0.8-1.9,0.8-3c0-1.3-0.3-2.4-0.9-3.4S29.8,1.6,28.8,1l0,0c-1.1-0.5-2.3-0.8-3.8-0.8h-8v18.7h5v-5.8h2.6%20l2.8,5.8h5.4l-3.4-7C30.2,11.3,30.9,10.6,31.4,9.7z%20M26.4,8.4c-0.5,0.4-1.1,0.7-1.9,0.7l0,0H22V4.2h2.6c0.8,0,1.4,0.2,1.9,0.7%20c0.5,0.4,0.7,1,0.7,1.8S26.9,8,26.4,8.4z'/%3e%3cpolygon%20points='40,11.4%2046.4,11.4%2046.4,7.5%2040,7.5%2040,4.3%2048,4.3%2048,0.2%2035.1,0.2%2035.1,18.8%2048.3,18.8%2048.3,14.7%2040,14.7%20'/%3e%3cpath%20d='M64.6,16c0.7-0.9,1-2,1-3.1c0-1.2-0.3-2.1-0.8-2.9c-0.5-0.7-1.2-1.3-2-1.6C62,8,61,7.7,59.7,7.5C58.4,7.2,57.5,7,57,6.9%20c-0.6-0.2-1-0.3-1.2-0.5c-0.3-0.2-0.4-0.5-0.4-0.9c0-0.6,0.2-1,0.7-1.3c0.4-0.3,1-0.4,1.7-0.4c0.8,0,1.4,0.2,1.9,0.6%20s0.7,0.9,0.8,1.6h4.8c0-1.1-0.3-2.1-1-3.1c-0.6-0.9-1.5-1.6-2.7-2.1S59.1,0,57.7,0c-1.4,0-2.6,0.3-3.7,0.8c-1.1,0.5-2,1.2-2.6,2.1%20s-0.9,1.9-0.9,3c0,1.2,0.3,2.2,0.8,3c0.5,0.7,1.2,1.3,2,1.7s1.9,0.7,3.1,0.9c1.3,0.3,2.2,0.5,2.8,0.6c0.6,0.2,1,0.3,1.2,0.5%20c0.3,0.2,0.4,0.5,0.4,0.9c0,0.6-0.2,1-0.7,1.3s-1.1,0.5-1.9,0.5c-1,0-1.8-0.2-2.3-0.7l0,0c-0.6-0.5-0.9-1-0.9-1.8l-5-0.1%20c0,1.2,0.3,2.3,1,3.2c0.7,1,1.6,1.7,2.9,2.3c1.2,0.6,2.6,0.8,4.1,0.8c1.4,0,2.7-0.3,3.9-0.8C63.1,17.7,64,16.9,64.6,16z'/%3e%3cpolygon%20points='81.7,0.2%2066.6,0.2%2066.6,4.3%2071.7,4.3%2071.7,18.8%2076.6,18.8%2076.6,4.3%2081.7,4.3%20'/%3e%3cpath%20d='M86.7,0.2L80,18.9h5.1l1.1-3.5h6.5l1.2,3.5h5.3L92.7,0.2H86.7z%20M87.6,11.4l2-6.1l2,6.1H87.6z'/%3e%3cpath%20d='M114.4,16c0.7-0.9,1-2,1-3.1c0-1.2-0.3-2.1-0.8-2.9c-0.5-0.7-1.2-1.3-2-1.6s-1.9-0.7-3.2-0.9c-1.2-0.2-2.1-0.4-2.7-0.6%20s-1-0.3-1.2-0.5c-0.3-0.2-0.4-0.5-0.4-0.9c0-0.6,0.2-1,0.7-1.3c0.4-0.3,1-0.4,1.7-0.4c0.8,0,1.4,0.2,1.9,0.6s0.7,0.9,0.8,1.6h4.8%20c0-1.1-0.3-2.1-1-3.1c-0.6-0.9-1.5-1.6-2.7-2.1c-1.1-0.5-2.4-0.8-3.8-0.8s-2.6,0.3-3.7,0.8s-2,1.2-2.6,2.1s-0.9,1.9-0.9,3%20c0,1.2,0.3,2.2,0.8,3c0.5,0.7,1.2,1.3,2,1.7s1.9,0.7,3.1,0.9c1.3,0.3,2.2,0.5,2.8,0.6c0.6,0.2,1,0.3,1.2,0.5%20c0.3,0.2,0.4,0.5,0.4,0.9c0,0.6-0.2,1-0.7,1.3s-1.1,0.5-1.9,0.5c-1,0-1.8-0.2-2.3-0.7l0,0c-0.6-0.5-0.9-1-0.9-1.8l-4.8-0.1%20c0,1.2,0.3,2.3,1,3.2c0.7,1,1.6,1.7,2.9,2.3s2.6,0.8,4.1,0.8s2.7-0.3,3.9-0.8C112.8,17.7,113.7,16.9,114.4,16z'/%3e%3cpolygon%20points='129.1,7.3%20122.9,7.3%20122.9,0.2%20118,0.2%20118,18.8%20122.9,18.8%20122.9,11.5%20129.1,11.5%20129.1,18.8%20134,18.8%20134,0.2%20129.1,0.2%20'/%3e%3cpath%20d='M154.3,14.4c0.8-1.4,1.2-3.1,1.2-4.9s-0.4-3.4-1.2-4.9c-0.8-1.4-1.9-2.6-3.3-3.4c-1.5-0.8-3.1-1.2-5-1.2s-3.5,0.4-4.9,1.2%20s-2.5,2-3.3,3.4s-1.2,3.1-1.2,4.9s0.4,3.4,1.2,4.9c0.8,1.4,1.9,2.6,3.3,3.4c1.4,0.8,3.1,1.2,4.9,1.2c1.9,0,3.5-0.4,4.9-1.2%20C152.4,16.9,153.5,15.8,154.3,14.4z%20M149.3,13.4c-0.8,1-1.9,1.5-3.2,1.5s-2.4-0.5-3.2-1.5s-1.2-2.3-1.2-3.9s0.4-2.9,1.2-3.9%20s1.9-1.5,3.2-1.5s2.4,0.5,3.2,1.5s1.2,2.3,1.2,3.9S150.1,12.4,149.3,13.4z'/%3e%3cpath%20d='M169.6,1c-1.1-0.5-2.3-0.8-3.7-0.8H158v18.7h4.9v-5.8h2.9c1.4,0,2.6-0.3,3.7-0.8c1.1-0.5,1.9-1.3,2.5-2.3s0.9-2.1,0.9-3.4%20s-0.3-2.4-0.9-3.4S170.7,1.5,169.6,1z%20M167.3,8.4c-0.5,0.4-1.1,0.7-1.9,0.7l0,0H163V4.2h2.5c0.8,0,1.4,0.2,1.9,0.7%20c0.5,0.4,0.7,1,0.7,1.8S167.8,8,167.3,8.4z'/%3e%3c/svg%3e)
%20--%3e%3csvg%20version='1.1'%20id='Calque_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20x='0px'%20y='0px'%20viewBox='0%200%20173%2019'%20style='enable-background:new%200%200%20173%2019;'%20xml:space='preserve'%3e%3cstyle%20type='text/css'%3e%20.st0{fill:%23FFFFFF;}%20%3c/style%3e%3cpath%20class='st0'%20d='M4.9,13.1h2.9c1.4,0,2.6-0.3,3.7-0.8S13.4,11,14,10s0.9-2.1,0.9-3.4S14.6,4.2,14,3.2c-0.6-1-1.4-1.7-2.5-2.3%20c-1.1-0.5-2.3-0.8-3.7-0.8H0v18.7h4.9V13.1z%20M4.9,4.2h2.5c0.8,0,1.4,0.2,1.9,0.7c0.5,0.4,0.7,1,0.7,1.8S9.7,8,9.3,8.4%20S8.2,9.1,7.4,9.1l0,0H4.9V4.2z'/%3e%3cpath%20class='st0'%20d='M31.4,9.7c0.5-0.9,0.8-1.9,0.8-3c0-1.3-0.3-2.4-0.9-3.4S29.8,1.6,28.8,1l0,0c-1.1-0.5-2.3-0.8-3.8-0.8h-8v18.7%20h5v-5.8h2.6l2.8,5.8h5.4l-3.4-7C30.2,11.3,30.9,10.6,31.4,9.7z%20M26.4,8.4c-0.5,0.4-1.1,0.7-1.9,0.7l0,0H22V4.2h2.6%20c0.8,0,1.4,0.2,1.9,0.7c0.5,0.4,0.7,1,0.7,1.8S26.9,8,26.4,8.4z'/%3e%3cpolygon%20class='st0'%20points='40,11.4%2046.4,11.4%2046.4,7.5%2040,7.5%2040,4.3%2048,4.3%2048,0.2%2035.1,0.2%2035.1,18.8%2048.3,18.8%2048.3,14.7%2040,14.7%20'/%3e%3cpath%20class='st0'%20d='M64.6,16c0.7-0.9,1-2,1-3.1c0-1.2-0.3-2.1-0.8-2.9c-0.5-0.7-1.2-1.3-2-1.6C62,8,61,7.7,59.7,7.5%20C58.4,7.2,57.5,7,57,6.9c-0.6-0.2-1-0.3-1.2-0.5c-0.3-0.2-0.4-0.5-0.4-0.9c0-0.6,0.2-1,0.7-1.3c0.4-0.3,1-0.4,1.7-0.4%20c0.8,0,1.4,0.2,1.9,0.6s0.7,0.9,0.8,1.6h4.8c0-1.1-0.3-2.1-1-3.1c-0.6-0.9-1.5-1.6-2.7-2.1S59.1,0,57.7,0c-1.4,0-2.6,0.3-3.7,0.8%20c-1.1,0.5-2,1.2-2.6,2.1s-0.9,1.9-0.9,3c0,1.2,0.3,2.2,0.8,3c0.5,0.7,1.2,1.3,2,1.7s1.9,0.7,3.1,0.9c1.3,0.3,2.2,0.5,2.8,0.6%20c0.6,0.2,1,0.3,1.2,0.5c0.3,0.2,0.4,0.5,0.4,0.9c0,0.6-0.2,1-0.7,1.3s-1.1,0.5-1.9,0.5c-1,0-1.8-0.2-2.3-0.7l0,0%20c-0.6-0.5-0.9-1-0.9-1.8l-5-0.1c0,1.2,0.3,2.3,1,3.2c0.7,1,1.6,1.7,2.9,2.3c1.2,0.6,2.6,0.8,4.1,0.8c1.4,0,2.7-0.3,3.9-0.8%20C63.1,17.7,64,16.9,64.6,16z'/%3e%3cpolygon%20class='st0'%20points='81.7,0.2%2066.6,0.2%2066.6,4.3%2071.7,4.3%2071.7,18.8%2076.6,18.8%2076.6,4.3%2081.7,4.3%20'/%3e%3cpath%20class='st0'%20d='M86.7,0.2L80,18.9h5.1l1.1-3.5h6.5l1.2,3.5h5.3L92.7,0.2H86.7z%20M87.6,11.4l2-6.1l2,6.1H87.6z'/%3e%3cpath%20class='st0'%20d='M114.4,16c0.7-0.9,1-2,1-3.1c0-1.2-0.3-2.1-0.8-2.9c-0.5-0.7-1.2-1.3-2-1.6s-1.9-0.7-3.2-0.9%20c-1.2-0.2-2.1-0.4-2.7-0.6s-1-0.3-1.2-0.5c-0.3-0.2-0.4-0.5-0.4-0.9c0-0.6,0.2-1,0.7-1.3c0.4-0.3,1-0.4,1.7-0.4%20c0.8,0,1.4,0.2,1.9,0.6s0.7,0.9,0.8,1.6h4.8c0-1.1-0.3-2.1-1-3.1c-0.6-0.9-1.5-1.6-2.7-2.1c-1.1-0.5-2.4-0.8-3.8-0.8%20s-2.6,0.3-3.7,0.8s-2,1.2-2.6,2.1s-0.9,1.9-0.9,3c0,1.2,0.3,2.2,0.8,3c0.5,0.7,1.2,1.3,2,1.7s1.9,0.7,3.1,0.9%20c1.3,0.3,2.2,0.5,2.8,0.6c0.6,0.2,1,0.3,1.2,0.5c0.3,0.2,0.4,0.5,0.4,0.9c0,0.6-0.2,1-0.7,1.3s-1.1,0.5-1.9,0.5%20c-1,0-1.8-0.2-2.3-0.7l0,0c-0.6-0.5-0.9-1-0.9-1.8l-4.8-0.1c0,1.2,0.3,2.3,1,3.2c0.7,1,1.6,1.7,2.9,2.3s2.6,0.8,4.1,0.8%20s2.7-0.3,3.9-0.8C112.8,17.7,113.7,16.9,114.4,16z'/%3e%3cpolygon%20class='st0'%20points='129.1,7.3%20122.9,7.3%20122.9,0.2%20118,0.2%20118,18.8%20122.9,18.8%20122.9,11.5%20129.1,11.5%20129.1,18.8%20134,18.8%20134,0.2%20129.1,0.2%20'/%3e%3cpath%20class='st0'%20d='M154.3,14.4c0.8-1.4,1.2-3.1,1.2-4.9s-0.4-3.4-1.2-4.9c-0.8-1.4-1.9-2.6-3.3-3.4c-1.5-0.8-3.1-1.2-5-1.2%20s-3.5,0.4-4.9,1.2s-2.5,2-3.3,3.4s-1.2,3.1-1.2,4.9s0.4,3.4,1.2,4.9c0.8,1.4,1.9,2.6,3.3,3.4c1.4,0.8,3.1,1.2,4.9,1.2%20c1.9,0,3.5-0.4,4.9-1.2C152.4,16.9,153.5,15.8,154.3,14.4z%20M149.3,13.4c-0.8,1-1.9,1.5-3.2,1.5s-2.4-0.5-3.2-1.5s-1.2-2.3-1.2-3.9%20s0.4-2.9,1.2-3.9s1.9-1.5,3.2-1.5s2.4,0.5,3.2,1.5s1.2,2.3,1.2,3.9S150.1,12.4,149.3,13.4z'/%3e%3cpath%20class='st0'%20d='M169.6,1c-1.1-0.5-2.3-0.8-3.7-0.8H158v18.7h4.9v-5.8h2.9c1.4,0,2.6-0.3,3.7-0.8c1.1-0.5,1.9-1.3,2.5-2.3%20s0.9-2.1,0.9-3.4s-0.3-2.4-0.9-3.4S170.7,1.5,169.6,1z%20M167.3,8.4c-0.5,0.4-1.1,0.7-1.9,0.7l0,0H163V4.2h2.5c0.8,0,1.4,0.2,1.9,0.7%20c0.5,0.4,0.7,1,0.7,1.8S167.8,8,167.3,8.4z'/%3e%3c/svg%3e)
Diseño web de una tienda online: La estructura de tu home page
Renovar el diseño de tu tienda online es más fácil de lo que crees. Antes de decidir colores, fuentes e imágenes debes tener clara la estructura. Para ello puedes hacerte las siguientes preguntas:
- ¿Qué elementos son indispensables para mis clientes?
- ¿Dónde y cómo puedo posicionar esos elementos?
El orden de los elementos en la página en muchos casos depende de la importancia de éstos y del uso que tus usuarios harán de ellos. Para conocer mejor a tus clientes, define antes el perfil de tu cliente ideal. En este post listamos los elementos indispensables para la portada de cualquier tienda online. Adáptalos a tus necesidades y consigue una home que genere un gran número de ventas y refuerce a la vez tu imagen de marca.
Barra de búsqueda
Facilita la búsqueda de tus productos con una barra de búsqueda bien visible en el centro o en la esquina izquierda superior de tu página. Muchos de tus clientes ya saben lo que necesitan, así que dales la oportunidad de encontrarlo rápidamente. En la versión móvil de la web, intenta mostrar la barra de búsqueda lo más alto posible en tu página. Justo después del logo e idealmente junto al icono menú. Bonus: La página de resultados puede ofrecer la posibilidad de añadir el producto directamente al carrito de la compra.
Carrito o cesta de la compra
Añadir objetos al carrito puede ser divertido, ¡incluso adictivo! Utiliza las técnicas de diseño emocional y transforma la experiencia de compra en algo agradable e incluso divertido. Una experiencia agradable hará que tus clientes te recuerden más y mejor. Si tu imagen de marca lo permite, adapta el tono y los términos en tu carrito de la compra y en tus botones y llamadas a la acción según la categoría de tus productos, épocas del año, campañas, etc. Usa el sentido del humor siempre que puedas en barras de estado y notificaciones. Es importante que uses el sentido del humor en el texto, pero no olvides mantener un diseño consistente de botones y links para no despistar a tus clientes. Bonus: Gamification: incita a añadir más productos al carrito, por ejemplo, indicando en una barra de progreso de cuánto falta para obtener los gastos de envío gratis, o desbloqueando “niveles” según los productos que se vayan añadiendo (Ej: aficionado, manitas, experto).
Slider:
Debe incluir como máximo 3 diapositivas. Idealmente sólo 1 diapositiva fija. Úsala siempre para poner promociones temporales, novedades y selecciones de productos. O mejor aún, selecciones de productos en promoción adaptados a una campaña temporal (día del padre, madre, navidad, vuelta al cole, etc.) Siempre debe quedar claro en el slider qué es lo que vendes en tu sitio web. Muestra tus productos en situación con una bonita imagen de fondo que ocupe toda la superficie y con un texto y llamada a la acción interesantes y adaptados al contenido y espíritu de la promoción. Bonus: Encuentra algunos de los mejores ejemplos de imágenes de slider a pantalla completa en nuestro artículo 5 tendencias de diseño Ecommerce para el 2015.
Menú
El menú es lo primero que va a ver tu usuario al llegar a tu web. O no. Si aterriza con un teléfono móvil, mejor ofrécele la opción de buscar y guarda tu menú en un bonito botón desplegable. En pantallas más grandes es más fácil navegar, y el espacio además permite mostrar todos los elementos del menú. Pero no te dejes llevar y no abarrotes el menú: Idealmente, debe contener 3 y como máximo 7 elementos. Céntrate en mostrar los grupos jerárquicos más grandes de tu producto: ej. HOMBRE, MUJER, NIÑO. Si detectas que mucho tráfico llega a tu tienda por un producto en concreto, no dudes en añadirlo ahí: ZAPATOS, BUFANDAS o BOLSOS son ejemplos de subcategorías que te puede interesar usar en el menú principal. REGALOS, VACACIONES o NOCHEVIEJA pueden ser perfectamente elementos de tu menú dependiendo de la época del año. También el nombre de tu campaña o colección actual. Intenta mantener los elementos del menú lo más cortos posibles. Si puedes decirlo en una palabra, mejor que en dos. Si tienes un blog, quizá también sea interesante ponerlo en el menú. En la versión de PrestaShop 1.6 puedes configurar submenús desplegables enriquecidos, en los que mostrar los productos incluidos en la categoría y mostrar además banners promocionales. Bonus: Las páginas “quienes somos”, “empresa”, “historia”, etc. deben estar fuera del menú. El mejor lugar es el pie de página, además, es donde los usuarios están más acostumbrados a encontrarlas.
Para más información, puedes leer estos artículos:
- 6 mejores módulos para crear un menú - PrestaShop 1.7
- ¿Qué es un banner y qué beneficios aporta a tu eCommerce?
Opciones de filtrado
Normalmente se utilizan en las páginas de categoría y producto, pero también se pueden utilizar en la home. Filtros por tallas, tamaños, paleta de colores, estaciones del año, ocasiones, diferentes usos, formas de cocinar, etc. Añade todos los filtros que se te ocurran para tu producto. A veces es mejor hacer referencia al uso que al objeto en sí. Sartenes -> para freír Ollas -> para hervir Escucha a tus usuarios para conseguir los filtros más optimizados para tu producto. En cuanto a su posición. Idealmente desplegable. Si la pantalla es muy grande, puedes mostrarlos permanentemente en el margen derecho de la pantalla, a modo navegación. Bonus: Muestra por defecto un filtro en la home cuando la pantalla de tu usuario sea superior a 1280px de ancho.
Productos en la home
Muestra tus productos más interesantes en la home siempre que haya un motivo para hacerlo. Son una buena estrategia para conseguir una doble entrada (desde el menú o desde la home) a tus páginas de producto. Es importante dejar claro con un pequeño título o etiqueta porqué el producto aparece en la home. Algunos buenos ejemplos de etiquetas son: novedades, mejores ventas, descuentos, últimas unidades en stock, etc. Especifica siempre la exclusividad o tiempo limitado del grupo de productos. Bonus: Muestra 10 productos como máximo y activa la opción “vista rápida de producto” para facilitar la navegación de tu cliente entre productos sin tener que hacer demasiados clics. ¡Los añadirá a su carrito casi sin darse cuenta!
Categorías
Siguiendo con la estrategia de la doble entrada, incluye un bloque que ilustre tus categorías con imágenes o iconos. Bonus: Selecciona tus categorías o subcategorías más importantes y siempre que puedas actualízalo con promociones o selecciones de productos.
Social Media
Antes del pie de página, incluye una sección o varias donde tus clientes puedan comprobar que eres de confianza. Qué mejor forma de hacerlo que leyendo y viendo lo que otros clientes dicen de ti. Incluye imágenes de redes sociales, historias o artículos generados por tus clientes. Por ejemplo, una sección que muestra las fotos con el hashtag de tu última campaña mezcladas con las fotos del book oficial de la marca, o fotos de las recetas que propones en tu blog cocinadas por tus usuarios usando tus electrodomésticos. Aprovecha todo lo que se te ocurra para mostrar que tienes un público y que te adoran.
Pie de página
Incluye aquí las opciones de contacto, junto con los enlaces a tus redes sociales. Este espacio debe contener bien visibles todas las condiciones de tu web, especialmente las relacionadas con envíos y devoluciones. No dudes en incluir un campo Newsletter para que tus usuarios reciban tus noticias en su correo y si es posible especifica la frecuencia de envío. Aprovecha este espacio también para indicar tus sistemas de seguridad y confianza de forma discreta. Si es posible incluye insignias en blanco y negro para no despistar demasiado.
Plantillas PrestaShop
Y por último, la elección del diseño de tu tienda refleja tu marca y tus valores. Escoger una plantilla adaptada a tu tienda online y a tu sector, permitirá que los usuarios entiendan una vez que aterricen en tu página de inicio lo que vendes. Por eso debes elegirlo con cuidado. Aquí tienes una lista de plantillas para elegir según su sector de actividad:
-
8 plantillas para catálogo de productos - tienda de lencería online
-
7 mejores plantillas PrestaShop para una tienda de moda online
-
5 mejores plantillas para vender ropa de bebé online
-
8 mejores plantillas para una tienda de animales online
-
5 mejores plantillas para vender relojes online
-
10 mejores plantillas para un taller de coches online
-
7 Mejores plantillas para vendre ordenadores online
-
Bebidas de dibujo - 5plantillas para vender bebidas online
Conclusión
Tus clientes se formarán una primera impresión de tu web y de tu marca gracias al diseño y la organización de tu home. Presta atención a presentar una web de aspecto cuidado y profesional, puesto que es una oportunidad muy importante para ganar notoriedad, transmitir confianza y reducir tu tasa de rebote. Si optas por hacerlo tú mismo, sigue esta guía. En el próximo artículo podrás aprender más sobre diseño de una tienda online: la estructura de las páginas de categorías y páginas de producto. También puedes revisar algunos de las plantillas disponibles para PrestaShop, y si ninguno se adapta a tu negocio, nuestras agencias de diseño web asociadas estarán encantadas de ayudarte.
