La guía de diseño de todo para las tiendas Shopify
Publicado: 2021-08-25¡Fuentes, colores, acción! Para los que tienen inclinaciones artísticas, diseñar su tienda Shopify puede ser un desafío emocionante. Pero para los especialistas en marketing y los empresarios que se sienten un poco pegajosos cuando se les pide que elijan entre fuentes serif y no serif, este proceso puede resultar extremadamente desalentador.
Aunque Shopify tiene numerosos recursos que facilitan el comienzo (estamos hablando de plantillas de temas prefabricadas, diseñadores expertos para contratar y mercados llenos de aplicaciones y widgets), la parálisis de decisión es una aflicción muy real. Caso en cuestión: todos quieren una tienda Shopify que sea visualmente atractiva, que llame la atención y esté optimizada para las conversiones, pero llegar allí es más fácil decirlo que hacerlo.
Dado que el cielo es prácticamente el límite cuando se trata de opciones de diseño para tu tienda Shopify, ¿por dónde empiezas? Deje las muestras de color: aquí está la guía de diseño definitiva para Shopify que siempre ha necesitado pero que no sabía que existía, con todos los consejos y trucos que necesita para personalizar, lanzar y comenzar a vender.
En este articulo:
Temas de Shopify
Fotos del producto
Personalización del tema
Estructura del menú
Encabezado de la página de inicio
3 consejos para llevar
¿Necesitas ayuda?
Temas de Shopify
El primer paso para construir tu tienda Shopify consiste en elegir un tema adecuado. Piense en ello como la columna vertebral de su sitio que determina la experiencia del usuario, la estética visual y las funcionalidades de su tienda.

Shopify Theme Store ofrece cientos de temas prefabricados que la empresa ha examinado.
La tienda de temas de Shopify, que ofrece cientos de opciones, te facilita encontrar tu pareja perfecta. Además, la mayoría de ellos ofrecen múltiples variaciones de estilo, lo que significa que puede personalizarlos para que coincidan con la apariencia de su marca en cuanto a colores, fuentes y aplicaciones.
¿Te sientes abrumado? Usa los filtros de Shopify para reducir tus opciones al:
- El tamaño de tu catálogo de productos. Si tiene numerosos productos, es posible que necesite funciones como el desplazamiento infinito o un diseño de cuadrícula.
- Tu industria. Las empresas de moda pueden requerir temas que permitan a los compradores elegir entre varios tamaños y colores, mientras que las marcas de arte y fotografía pueden necesitar espacios de imágenes de productos más grandes.
- Precio. Aunque Shopify ofrece varios temas gratuitos, los más complejos pueden costar hasta $180.
Aunque puede personalizar la tipografía y los esquemas de color más adelante, el proceso de personalización es más sencillo si elige un tema que coincida con su visión del sitio en términos de diseño y estética general.
Fotos del producto
Si bien somos grandes fanáticos del sólido mercado de temas de Shopify, existe un riesgo: tener una tienda que se parece a la de todos los demás, incluso cuando se tiene en cuenta la personalización. ¿Una solución rápida? Fotos de productos únicos.
Para distinguir su marca de la competencia, es importante tomar fotografías de productos que reflejen la identidad y la actitud de su empresa. La fotografía juega un papel muy importante en el establecimiento del estilo y el tono de su marca.
No tenga miedo de divertirse y ser un poco más audaz con las fotos de sus productos:
- Combine las fotos de sus productos con algunas fotos de estilo de vida , donde sus productos se toman en el lugar con accesorios y modelos de apoyo.
- Experimente con diferentes diseños . Por ejemplo, en lugar de fotografiar prendas siempre colocándolas sobre un fondo blanco, considera hacer una fotografía plana o contratar modelos.
- Recorta y fotografía desde ángulos interesantes en lugar de directamente. Esta es una excelente manera de agregar estilo y estilo a sus tomas.
Para obtener más consejos sobre cómo tomar imágenes increíbles de productos y estilos de vida, consulte esta guía de bricolaje.
Personalización del tema
Ahora que ha elegido su tema y tiene un carrete completo de fotos de productos para elegir, aquí viene la parte divertida: transformar el sitio en algo que es exclusivamente suyo.
Gracias a la comodidad que ofrece Shopify, la personalización no requiere ninguna codificación de su parte. En su lugar, simplemente haga clic en Configuración del tema y encontrará varias formas de ajustar el estilo visual de su tienda.

Colores
En el menú Colores, puede alternar los colores de muchos de los elementos de su tienda, incluidos el texto, los botones y los campos de formulario.

Consejo profesional: para que su llamada a la acción (CTA) se destaque, considere hacerla de un color más audaz y brillante que contraste con el resto de su página.
Tipografía
Esta sección controla la apariencia visual de todo el texto en su tienda. Puede ajustar el tipo de fuente, el peso y la escala de los encabezados frente al cuerpo del texto.

icono de favoritos
Los favicons son los iconos pequeños, generalmente un logotipo o una imagen simple asociada con una empresa, que aparecen en la pestaña de su navegador.
- ¿Tiene una imagen apropiada? Una vez cargado, Shopify lo redimensionará automáticamente a 32 x 32 px.
- ¿No tienes uno? Shopify tiene toneladas de imágenes gratuitas que puedes usar.
Elementos de pago
Su proceso de pago es sin duda la parte más importante de su sitio de comercio electrónico. Sin una experiencia de pago fantástica, corre el riesgo de que los compradores abandonen sus carritos a la mitad de la compra.
Para que su pago sea lo más fluido posible, puede personalizar:
- Los colores para acentos, botones y errores.
- Tipografía específica de pago
- El patrón, el color o la imagen de fondo para las páginas de pago y resumen del pedido.
Estructura del menú
Si bien la mayoría de los temas prefabricados de Shopify vendrán con estos elementos clave, querrá tener en cuenta estos consejos antes de lanzar su tienda:
Barra de navegación
Una barra de navegación se encuentra en la parte superior de cada página, lo que permite a los compradores pasar rápidamente de una página a otra.

La barra de navegación de Harry usa menús desplegables para mostrar subcategorías, así como para resaltar productos destacados.
Consejo profesional: Facilite que los compradores encuentren lo que necesitan sin abrumarlos. Para mantener la barra de navegación principal relativamente limpia y simple, puede agregar categorías y subcategorías como opciones desplegables que están ocultas a menos que pase el cursor sobre ellas.
barra de anuncios
¿Una venta por tiempo limitado? ¿Retrasos en el envío? ¿Nuevo horario de apertura de la tienda? Cuando necesite promocionar información esencial que todos los compradores necesitan saber, una barra de anuncios (también conocida como encabezado global) es su respuesta.


O, en el caso de Glossier, se puede usar una barra de anuncios para promocionar sus correos electrónicos de marketing.
La mayoría de los temas de Shopify vienen con barras de anuncios; solo necesitas personalizarlos y activarlos a través del editor de temas de Shopify.
Consejo profesional: asegúrese de que sus barras de anuncios estén estilizadas de la misma manera que su sitio (piense en colores de marca, fuentes y CTA).
Pies de página
Los pies de página son una de las áreas más subestimadas de su sitio. Si bien es cierto que pocos compradores se desplazarán por toda la página de inicio y llegarán al pie de página, es uno de los primeros lugares en los que buscarán cuando necesiten un acceso rápido a la información.
Para editar su pie de página, deberá ir a la página de Navegación en Tienda en línea.
Consejos profesionales:
- Su pie de página no debe ser solo una repetición de la misma información en su barra de navegación. En su lugar, agregue enlaces importantes a páginas sobre envíos, devoluciones y cambios, privacidad del sitio, oportunidades laborales y más.
- Use íconos de redes sociales como botones: reducirá la palabrería en su pie de página.
- Permita que los compradores se registren para recibir actualizaciones por correo electrónico o SMS.
- Proporcione enlaces rápidos de servicio al cliente, como líneas directas, "iniciar un chat en vivo" o ayuda por correo electrónico.
Encabezado de la página de inicio
El encabezado de su página de inicio es lo primero que ven los compradores cuando llegan a su sitio web. Dé una excelente primera impresión y buscarán más. Si no los atraes, cerrarán la pestaña. Dicho esto, el encabezado de su página de inicio debería:
- Proporcione una instantánea rápida de cuál es su marca o qué productos vende.
- Promocionar un evento de ventas.
- Demuestra la actitud e identidad de tu marca
- Muestre sus mejores productos

Purple Mattress presenta (actualmente) su oferta de verano por tiempo limitado en el encabezado de su página de inicio.
Ya sea que el encabezado de su página de inicio sea un video, un carrusel o una imagen estática, debe tratar de cambiarlo regularmente; nunca querrá que su sitio web se sienta obsoleto o desactualizado para los clientes leales.
3 consejos para llevar
Diseñar tu tienda Shopify puede ser muy divertido, pero también puede salirse de control una vez que comienzas a experimentar con fuentes, colores y widgets en lo que es esencialmente un lienzo en blanco. Para mantener el proceso de diseño de Shopify tan manejable y sin dolores de cabeza como sea posible, aquí hay algunos consejos para tener en cuenta:
1. Función sobre forma, siempre
Puede tener un sitio hermoso, pero si no fluye de manera intuitiva y ofrece un recorrido fantástico para el cliente, verá que las ventas se estancan. Nosotros recomendamos:
- Concéntrese en lo que desea lograr con su sitio antes de comenzar el proceso de diseño. Esto ayudará a reducir las herramientas o widgets que necesita y evitará la parálisis de elección que probablemente ocurrirá la primera vez que visite la tienda de aplicaciones de Shopify.
- Implementar funciones útiles, como recomendaciones y filtros sólidos para permitir a los compradores reducir rápidamente su búsqueda de productos.
- Priorizando la velocidad del sitio. Si bien es tentador agregar un montón de animaciones geniales, aplicaciones geniales e imágenes de alta resolución, cuantos más elementos incluya, mayor será el tiempo de carga de su sitio. Los estudios han encontrado que cada segundo adicional que su página tarda en cargarse puede reducir las conversiones hasta en un 7% y las visitas a la página en un 11%. Por otro lado, los sitios más rápidos son recompensados con clasificaciones más altas en Google.
- Comprimir imágenes. Las herramientas gratuitas como compressor.io pueden ayudarlo a mantener nítidas las imágenes de productos de alta calidad mientras reduce el tamaño del archivo.
- Elegir temas en la tienda de temas de Shopify en lugar de los de sitios web de terceros. Como los temas de terceros no pasan por el proceso de evaluación de Shopify, algunos pueden tener adiciones inesperadas en el back-end que pueden prolongar los tiempos de carga.
Recuerda: lanzar tu tienda Shopify no es un proceso único. Una vez que haya lanzado su sitio y comience a ver cómo aumentan las ventas, querrá optimizar continuamente cada página, desde la renovación de las imágenes del encabezado, la reescritura de la copia de SEO o la actualización de las imágenes. Confíe en nosotros: aunque es tedioso, ayudará a impulsar las conversiones, atraer nuevos compradores y mejorar la experiencia del cliente.
Consejo profesional: ¿No está seguro de cómo le está yendo a su sitio en términos de velocidad? Consulte la herramienta PageSpeed Insights de Google: simplemente ingrese su URL y le brindará información y recomendaciones sobre las mejoras en la velocidad del sitio.
2. Mantenga su sitio simple
Es tentador exhibir todos los productos, imágenes y copias de su arsenal, pero la mayoría de las veces, eso solo obstruirá la experiencia del cliente. No desea sobrecargar su sitio con demasiada información: nadie quiere examinar los productos en una versión digital de una tienda de segunda mano desordenada. En cambio, manténgalo simple, concéntrese en sus éxitos de ventas y recorte la grasa siempre que sea posible (ya sean imágenes, copias, widgets, páginas o incluso productos).
3. Prueba todo
¿Qué pasaría si le dijéramos que puede aumentar las conversiones simplemente cambiando ese botón de azul a rojo? Si bien ha lanzado su sitio con colores, imágenes y gráficos específicos, no hay manera de saber que están funcionando bien. (Nos encantaría brindarle una fórmula ganadora, pero la verdad es que las mejores prácticas dependen de los clientes, productos y nicho únicos de una marca).
Aquí es donde entran las pruebas A/B, un proceso que es crucial para determinar qué funciona mejor. (Para los nuevos especialistas en marketing, aquí hay una guía para todas las pruebas A/B). En lugar de operar solo por puro instinto, querrá probar A/B estos elementos de diseño de la tienda:
- Colores de diferentes botones.
- Ubicaciones de CTA, widgets e imágenes
- Barras de navegación
- Diseño de iconos de redes sociales
- Estilo de imagen: por ejemplo, imagen de producto frente a imagen de estilo de vida
- Imágenes de fondo o texturas
¿Necesitas ayuda?
Si bien la interfaz de Shopify facilita a los especialistas en marketing y empresarios el diseño de sus tiendas, puede convertirse en un proceso lento si eres un perfeccionista con una idea clara de cómo quieres que se vea tu tienda.
¡Qué bueno que está bien pedir ayuda! Shopify ofrece una gran cantidad de recursos y cientos de expertos en los que puedes confiar para cuidar tu tienda. A veces, es mejor aprovechar la experiencia de un diseñador profesional en lugar de caminar solo por la maleza.
En cuanto a nosotros, AdRoll lo respalda cuando se trata de proporcionar marketing de primer nivel para su tienda Shopify. Si está listo para impulsar sus ventas, consulte la integración de AdRoll para Shopify.
