Aprende cómo personalizar la apariencia de tu tienda para que refleje tu marca.

Panel de Diseño

Acceso

1. Iniciar sesión: En tu cuenta de vendedor
2. Panel de control: dashboard.tutienda.acanomas.app
3. Configuración: Hacer clic en "Configuración"
4. Diseño: Seleccionar "Diseño"

Secciones Disponibles

• Colores: Paleta de colores
• Tipografías: Fuentes y estilos
• Logo: Imagen de marca
• Banner: Imagen principal
• Layout: Organización de elementos

Personalización de Colores

Paleta Principal

• Color primario: Color principal de tu marca
• Color secundario: Color complementario
• Color de fondo: Fondo de la tienda
• Color de texto: Texto principal

Aplicación

• Botones: Color primario
• Enlaces: Color secundario
• Encabezados: Color primario
• Elementos destacados: Color secundario

Consejos de Color

• Contraste: Asegurar legibilidad
• Consistencia: Usar la misma paleta
• Accesibilidad: Considerar daltonismo
• Marca: Reflejar identidad visual

Tipografías

Fuentes Disponibles

• Sans-serif: Modernas y limpias
• Serif: Clásicas y elegantes
• Display: Decorativas y llamativas
• Monospace: Técnicas y precisas

Configuración

• Título principal: Fuente para H1
• Subtítulos: Fuente para H2-H6
• Texto del cuerpo: Fuente para párrafos
• Botones: Fuente para acciones

Tamaños

• Responsive: Se adaptan al dispositivo
• Jerarquía: Diferentes tamaños
• Legibilidad: Fácil de leer
• Consistencia: Misma escala

Logo y Marca

Logo Principal

• Formato: PNG con fondo transparente
• Tamaño: Mínimo 200x200 píxeles
• Calidad: Alta resolución
• Posición: Esquina superior izquierda

Favicon

• Formato: ICO, PNG
• Tamaño: 16x16, 32x32 píxeles
• Uso: Pestaña del navegador
• Marca: Versión simplificada del logo

Banner Principal

• Dimensiones: 1200x400 píxeles
• Formato: JPG, PNG, WebP
• Contenido: Mensaje principal
• Calidad: Alta resolución

Layout y Estructura

Organización

• Header: Logo, navegación, búsqueda
• Sidebar: Filtros, categorías
• Contenido principal: Productos, información
• Footer: Enlaces, información legal

Elementos Personalizables

• Navegación: Menú principal
• Breadcrumbs: Navegación secundaria
• Filtros: Búsqueda y filtros
• Paginación: Navegación de páginas

Responsive Design

• Móvil: Adaptación automática
• Tablet: Layout intermedio
• Desktop: Vista completa
• Consistencia: Misma experiencia

Imágenes y Multimedia

Galería de Productos

• Formato: JPG, PNG, WebP
• Tamaño: Mínimo 800x800 píxeles
• Cantidad: 3-8 imágenes por producto
• Calidad: Alta resolución

Imágenes de Categorías

• Representativas: Mostrar productos
• Consistentes: Mismo estilo
• Optimizadas: Para carga rápida
• Descriptivas: Que expliquen la categoría

Videos

• Formato: MP4, WebM
• Duración: Máximo 2 minutos
• Calidad: HD recomendado
• Hosting: YouTube, Vimeo

Configuración Avanzada

CSS Personalizado

• Acceso: Panel de configuración
• Editor: Interfaz de código
• Validación: Verificación automática
• Backup: Guardar versiones

JavaScript

• Funcionalidades: Comportamientos personalizados
• Integraciones: APIs externas
• Analytics: Seguimiento personalizado
• Optimización: Rendimiento

SEO

• Meta tags: Títulos y descripciones
• Structured data: Datos estructurados
• Sitemap: Mapa del sitio
• Robots.txt: Instrucciones para buscadores

Temas Predefinidos

Temas Disponibles

• Minimalista: Diseño limpio y simple
• Moderno: Estilo contemporáneo
• Clásico: Diseño tradicional
• Colorido: Paleta vibrante

Personalización

• Base: Elegir tema inicial
• Modificaciones: Cambiar elementos
• Guardado: Versiones personalizadas
• Restauración: Volver al original

Mejores Prácticas

Diseño

• Simplicidad: Menos es más
• Consistencia: Misma identidad visual
• Legibilidad: Fácil de leer
• Navegación: Intuitiva y clara

Rendimiento

• Optimización: Imágenes comprimidas
• Carga rápida: Tiempo de respuesta
• Cache: Almacenamiento temporal
• CDN: Distribución de contenido

Accesibilidad

• Contraste: Colores legibles
• Tamaños: Fuentes accesibles
• Navegación: Teclado y mouse
• Alt text: Descripciones de imágenes

SEO

• Títulos: Descriptivos y únicos
• URLs: Amigables para buscadores
• Contenido: Relevante y actualizado
• Velocidad: Tiempo de carga optimizado

Solución de Problemas

Imágenes No Se Ven

• Formato: Verificar JPG, PNG, WebP
• Tamaño: Máximo 5MB
• URL: Enlace válido
• Permisos: Acceso público

Colores No Aplican

• Cache: Limpiar caché del navegador
• Guardado: Confirmar cambios
• Formato: Códigos hexadecimales válidos
• Sincronización: Esperar actualización

Layout Roto

• Responsive: Verificar en diferentes dispositivos
• CSS: Revisar código personalizado
• Elementos: Verificar que no falten
• Navegador: Probar en diferentes navegadores

Carga Lenta

• Imágenes: Optimizar tamaño
• Código: Revisar JavaScript
• Hosting: Verificar servidor
• CDN: Configurar distribución

Próximos Pasos

Después de Personalizar

1. Probar en diferentes dispositivos: Verificar responsive
2. Optimizar imágenes: Comprimir y redimensionar
3. Configurar SEO: Meta tags y descripciones
4. Probar velocidad: Herramientas de análisis
5. Solicitar feedback: Opiniones de usuarios

Recursos Adicionales

• Optimización de Imágenes
• Configuración SEO
• Analytics y Métricas
• Integración de Redes Sociales

¡Crea una tienda única que refleje tu marca y atraiga a tus clientes!