Diseño Responsivo y Mobile-First

Más de la mitad de tus visitas vendrán desde el móvil. Si tu tienda no se ve bien en celular, estás perdiendo ventas. vXeller te da las herramientas para diseñar mobile-first.

Por Qué Mobile-First

Dato	Impacto
60%+ de tráfico es móvil	Si no optimizás, perdés la mayoría
Google indexa la versión móvil	SEO depende de ello
El cliente compra desde el celular	Experiencia mala = venta perdida

Breakpoints en vXeller

Los breakpoints son los puntos donde el diseño cambia según el ancho de pantalla:

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

Para cada breakpoint podés:

• Ajustar tamaño de texto — más grande en móvil para legibilidad.
• Cambiar número de columnas — 1 columna en móvil, 3-4 en desktop.
• Ocultar/mostrar elementos — ocultar sidebar en móvil, mostrar en desktop.
• Modificar espaciado — menos padding en móvil para aprovechar espacio.

Cómo Configurar Breakpoints

1. Abrí el Store Builder.
2. Seleccioná un componente.
3. En el panel de estilos, cambiá el breakpoint activo.
4. Ajustá las propiedades para ese breakpoint.
5. El cambio se aplica solo en ese rango de pantalla.

Tip: empezá diseñando para mobile y despuésexpandé a desktop. Es más fácil agrandar que achicar.

Errores Comunes en Mobile

Error	Consecuencia	Solución
Texto muy pequeño	El cliente no puede leer	Mínimo 16px en cuerpo
Botones muy pequeños	Difícil de tocar	Mínimo 44px de altura
Imágenes sin comprimir	Carga lenta	Comprimir antes de subir
Demasiadas columnas	Contenido apretado	1-2 columnas en móvil
Pop-ups que cubren todo	El cliente no puede cerrar	Evitar o hacer fácil de cerrar

Velocidad en Móvil

La velocidad importa. Cada segundo de carga extra pierde un 7% de conversiones:

• Comprimí imágenes antes de subirlas.
• No uses videos autoplay en mobile (consumen datos y lento).
• Minimizá elementos — menos es más en móvil.
• Probá la velocidad con Google PageSpeed Insights.

Consejos

1. Diseñá primero para móvil. Es la regla de oro del ecommerce moderno.
2. Probá en un celular real, no solo en la preview del editor.
3. El botón de compra siempre visible sin hacer scroll en mobile.
4. Check simplificado — en móvil, menos campos = menos fricción.
5. Imágenes responsive — que se adapten al tamaño de pantalla.