Diseño Avanzado con Store Builder

El Store Builder de Growcart te da control total sobre el aspecto de tu tienda sin tocar código. En esta guía profundizamos en componentes, diseño responsivo, identidad visual y las técnicas que separan una tienda promedio de una memorable.

Componentes Disponibles

Cada sección de tu tienda se construye con componentes que puedes combinar libremente:

Sección Hero

Encabezado impactante con imagen o video de fondo, títulos grandes y un llamado a la acción (CTA). Es lo primero que ve tu cliente: hazlo contar.

Galería de Productos

Muestra tu catálogo con filtros, búsqueda y opciones de compra rápida. Ajusta columnas, tarjetas y orden de productos.

Testimonios

Showcase de opiniones reales con calificaciones. La prueba social aumenta la confianza y la conversión.

FAQ

Sección de preguntas frecuentes expandible que resuelve dudas y reduce el abandono.

Newsletter

Formulario para captar emails de visitantes que aún no compran. Tu lista es un activo que te pertenece.

Carrusel

Deslizable de imágenes, testimonios o productos relacionados, ideal para destacar sin ocupar mucho espacio.

Breakpoints Responsivos

Más de la mitad de tus visitas vendrán desde el móvil. Define cómo se ve tu tienda en cada dispositivo:

Dispositivo	Ancho	Prioridad
Mobile	< 640px	Máxima
Tablet	640px – 1024px	Media
Desktop	> 1024px	Alta

Para cada breakpoint puedes:

• Ajustar el tamaño del texto
• Cambiar el número de columnas
• Ocultar o mostrar elementos
• Modificar el espaciado

Regla de oro: diseña primero para móvil. Si funciona en una pantalla pequeña, funcionará en todas.

Identidad Visual

Define tu estilo una sola vez y aplícalo a todo tu sitio de forma consistente:

• Colores primarios y secundarios
• Tipografías para títulos y cuerpo
• Espaciado base
• Radio de bordes y sombras

La consistencia visual transmite profesionalismo y hace que tu marca sea reconocible.

Template Parts

Reutiliza secciones en múltiples páginas para mantener todo sincronizado:

• Header personalizado
• Footer con enlaces e información
• Sidebar de categorías
• Barra de búsqueda

Edita un template part una sola vez y el cambio se refleja automáticamente en todas las páginas donde se usa.

Jerarquía y Espacios en Blanco

El espacio en blanco no es espacio "vacío": guía la mirada y da respiro al contenido. Una buena jerarquía visual hace que el cliente sepa, sin pensar, dónde mirar y qué hacer.

Tips de Diseño

1. Mantén la jerarquía visual clara: un solo mensaje principal por sección.
2. Usa espacios en blanco con generosidad.
3. Limita la paleta a 2-3 colores principales.
4. Asegura contraste suficiente para accesibilidad.
5. Prueba en móvil constantemente, no solo al final.
6. Menos es más: cada elemento debe ganarse su lugar.