Diseño de tu tienda: branding, tipografías, colores e imágenes
Dejá tu tienda prolija y consistente: logo y favicon, tipografías legibles, paleta con buen contraste, imágenes optimizadas y un hero que venda.
Pasos rápidos
Subí tu logo y favicon
Apariencia → Personalizar → Identidad del sitio. Logo en PNG (fondo transparente) y favicon 512×512.
Apariencia → Personalizar → Identidad del sitio. Logo en PNG (fondo transparente) y favicon 512×512.
Elegí tipografías legibles
Usá 2 familias (títulos + texto). Tamaño base 16–18 px, interlineado 1.5–1.7.
Usá 2 familias (títulos + texto). Tamaño base 16–18 px, interlineado 1.5–1.7.
Definí la paleta
Color primario (botones/enlaces) y secundarios. Verificá contraste para accesibilidad.
Color primario (botones/enlaces) y secundarios. Verificá contraste para accesibilidad.
Diseñá el hero de inicio
Título claro (beneficio), subtítulo corto y un CTA principal. Imagen liviana y relevante.
Título claro (beneficio), subtítulo corto y un CTA principal. Imagen liviana y relevante.
Optimización de imágenes
Formato WEBP/JPG, 1200–1600 px ancho para banners, 1200×1200 px productos. Peso ideal < 250 KB.
Formato WEBP/JPG, 1200–1600 px ancho para banners, 1200×1200 px productos. Peso ideal < 250 KB.
Tip: mantené consistentes márgenes y tamaños de títulos entre páginas para transmitir orden y confianza.
Identidad de marca
- Logo: subí versiones horizontal y cuadrada (PNG transparente). Tamaño recomendado: 240–320 px de ancho.
- Favicon: 512×512 px (PNG). Asegurate de que se vea bien a 32×32 px.
- Tono visual: elegí un estilo de fotos/ilustraciones (realistas, minimalistas, fondos claros) y sostenelo.
Tipografías
- Jerarquía: Títulos (H1–H3) 26–38 px, cuerpo 16–18 px. Alineación y espacios consistentes.
- Lectura: interlineado 1.5–1.7, longitud de línea 60–75 caracteres.
- Fallbacks: definí alternativas del sistema (ej. Arial, Helvetica) por si falla la carga.
Colores y accesibilidad
- Primario: usalo en CTAs y enlaces (ajustá
--ctw-branden:root). - Contraste: buscá niveles AA (4.5:1 texto normal). Evitá texto gris muy claro.
- Estados: hover y focus visibles (subrayado/tono más intenso).
Importante: probá contraste en botones sobre imágenes; sumá una superposición suave si hace falta.
Imágenes y banners
- Productos: 1200×1200 px, fondo neutro, luz pareja. Mismo encuadre en toda la galería.
- Hero/Banners: 1600×900 px aprox., compresión WEBP/JPG, peso < 250 KB.
- Performance: activá lazyload en tu tema/plugin de optimización.
Preguntas frecuentes
¿Cuántas fuentes uso? Lo ideal: 2 (títulos + texto). Evitá mezclar más de 3.
¿Qué color primario elijo? El de tu marca; que contraste sobre blanco y funcione en botones.
¿Cómo reduzco el peso de imágenes? Exportá WEBP/JPG calidad 70–80 y mantené dimensiones realistas al contenedor.
¿Texto sobre imagen no se lee? Usá fondo oscuro 20–40% o cambiá a fondo sólido.