Page Builder: Cómo Diseñar tu Tienda Online sin Programar
Aprendé a diseñar tu tienda online con el Page Builder de Commercy. Secciones drag-and-drop, variantes visuales y vista previa en tiempo real.
Diseñar una tienda online solía requerir un diseñador web, un programador y semanas de idas y vueltas. En 2026 eso ya no es necesario. Con un Page Builder podés armar, personalizar y publicar tu tienda en horas, sin escribir una sola línea de código. Esta guía explica cómo funciona el Page Builder de Commercy y cómo aprovecharlo para crear páginas que conviertan visitantes en compradores.
¿Qué es un Page Builder?
Un Page Builder es un editor visual que te permite construir páginas web arrastrando y soltando bloques de contenido — llamados secciones. Cada sección tiene un propósito específico (mostrar productos, un banner promocional, testimonios de clientes) y se configura con opciones visuales simples: textos, imágenes, colores y disposición.
La diferencia entre un Page Builder genérico (como los de WordPress) y uno especializado en e-commerce es que las secciones están diseñadas específicamente para vender: grillas de productos, carruseles de ofertas, barras de categorías, y formularios de contacto optimizados para conversión.
El Page Builder de Commercy está integrado directamente en el panel de administración. No necesitás instalar apps, plugins ni extensiones de terceros. Cualquier cambio que hagas se refleja en tu tienda online en tiempo real.
Tipos de secciones disponibles
El Page Builder de Commercy incluye más de 15 tipos de secciones, cada una con múltiples variantes visuales. Estas son las más utilizadas:
Secciones de contenido
| Sección | Descripción | Variantes |
|---|---|---|
| Hero | Banner principal con imagen, título y botón CTA | Clásico, con slider, farmacia, minimalista |
| Info Blocks | Bloques informativos con ícono y texto | Horizontal, vertical, con fondo |
| Testimonials | Reseñas de clientes | Carrusel, grilla, con foto |
| FAQ | Preguntas frecuentes con acordeón | Simple, con categorías |
| Banner | Banner promocional de ancho completo | Con imagen, solo texto, con countdown |
| Rich Text | Texto libre con formato | Centrado, con sidebar |
Secciones de productos
| Sección | Descripción | Variantes |
|---|---|---|
| Productos destacados | Grilla de productos seleccionados | Grilla, carrusel, lista |
| Nuevos ingresos | Últimos productos agregados | Grilla, carrusel |
| Ofertas | Productos con descuento | Grilla con badge de descuento, carrusel |
| Categorías | Navegación por categorías | Cards, lista, con imagen |
| Marcas | Logos de marcas disponibles | Carrusel, grilla |
Secciones de conversión
| Sección | Descripción | Uso recomendado |
|---|---|---|
| CTA (Call to Action) | Bloque con título, texto y botón | Final de página, entre secciones |
| Newsletter | Formulario de suscripción | Footer, sidebar |
| Botón flotante de WhatsApp | Todas las páginas |
Cómo agregar y configurar secciones
El flujo de trabajo en el Page Builder es directo:
- Abrí el Page Builder desde el panel de administración (Tienda → Diseño → Editar página).
- Agregá una sección haciendo clic en el botón "+" entre secciones existentes. Se abre un menú con todos los tipos disponibles.
- Arrastrá para reordenar: cada sección se puede mover hacia arriba o abajo con drag-and-drop.
- Configurá la sección: hacé clic en el ícono de engranaje para abrir el panel de configuración. Cada sección tiene opciones diferentes según su tipo.
- Guardá y publicá: los cambios se guardan como borrador automáticamente. Cuando estés conforme, hacé clic en "Publicar" para que los cambios sean visibles en tu tienda.
Todos los cambios en el Page Builder se guardan como borrador hasta que hagas clic en "Publicar". Podés experimentar sin miedo a romper tu tienda en vivo.
El sistema de variantes
Una de las funcionalidades más potentes del Page Builder es el sistema de variantes. Cada tipo de sección tiene múltiples variantes visuales — diferentes formas de mostrar la misma información. Por ejemplo, la sección de productos destacados puede mostrarse como:
- Grilla: productos en filas y columnas, ideal para catálogos grandes.
- Carrusel: productos en un slider horizontal, ideal para destacar pocos productos.
- Lista: productos en fila única con más detalle, ideal para comparativas.
Podés cambiar la variante de cualquier sección sin perder su contenido ni configuración. Si tenés una grilla de 12 productos y cambiás a carrusel, los mismos 12 productos se muestran en formato slider.
Además, Commercy incluye templates de tienda que preconfiguran las variantes de todas las secciones para un tipo de negocio específico. Si tenés una farmacia, el template "Farmacia" configura el hero con banners laterales, los productos en grilla compacta y las categorías con íconos — todo optimizado para ese rubro.
Vista previa en tiempo real
El Page Builder muestra una vista previa en vivo de tu tienda mientras editás. Cada cambio que hacés — mover una sección, cambiar un texto, seleccionar otra variante — se refleja instantáneamente en el preview sin necesidad de guardar ni recargar.
La vista previa funciona de dos maneras:
- Secciones de contenido (hero, testimonios, FAQ): se actualizan en tiempo real, sin recarga del preview.
- Secciones de productos (productos destacados, ofertas, nuevos ingresos): muestran los datos reales de tu catálogo desde el servidor.
Esto significa que siempre ves exactamente cómo va a quedar tu tienda antes de publicar, con los productos reales, los precios actualizados y el diseño final.
Tips para páginas que conviertan
Tener un Page Builder es el primer paso. Usarlo bien es lo que marca la diferencia en conversión. Estos son los patrones que mejor funcionan para tiendas online argentinas:
1. Hero claro y con un solo CTA
El hero es lo primero que ve un visitante. Debe comunicar en 3 segundos qué vendés y qué acción querés que tome. Un título corto, una imagen de calidad y un solo botón ("Ver productos", "Comprá ahora") es más efectivo que un slider con 5 banners distintos.
2. Productos destacados arriba
No hagas que el visitante scrollee para ver tus productos. Colocá una sección de productos destacados o nuevos ingresos inmediatamente después del hero. Cuanto antes vea tus productos, más probabilidades de que haga clic.
3. Prueba social temprana
Incluí una sección de testimonios o reseñas antes de la mitad de la página. La prueba social es uno de los factores de conversión más fuertes en e-commerce — especialmente para marcas nuevas o poco conocidas.
4. FAQ para eliminar objeciones
Una sección de preguntas frecuentes bien armada responde las dudas que frenan la compra: "¿Hacen envíos a mi ciudad?", "¿Puedo pagar en cuotas?", "¿Cuál es la política de devoluciones?". Cada duda respondida es una objeción eliminada.
5. CTA final con urgencia
Cerrá cada página con una sección de CTA que refuerce la propuesta de valor y genere urgencia suave: "Comprá hoy y recibí en 24hs", "Stock limitado", "Envío gratis en tu primer pedido".
6. Menos es más
Resistí la tentación de agregar demasiadas secciones. Una homepage con 5-7 secciones bien elegidas convierte mejor que una con 15 secciones que abruman al visitante. Cada sección debe tener un propósito claro.
Page Builder vs. contratar un diseñador
| Criterio | Page Builder | Diseñador web |
|---|---|---|
| Costo | $0 extra (incluido en el plan) | $500-2.000 USD por diseño |
| Tiempo | Horas | Semanas |
| Cambios futuros | Los hacés vos, al instante | Dependés del diseñador |
| Personalización | Alta (variantes, colores, contenido) | Total (pero cara) |
| Riesgo | Bajo (templates probados) | Medio (depende del diseñador) |
Para la gran mayoría de comercios, el Page Builder es la opción más inteligente: te da control total sobre el diseño sin depender de terceros ni gastar en desarrollo. Si más adelante necesitás algo 100% custom, siempre podés complementar con un diseñador.
Conclusión
El Page Builder de Commercy elimina la barrera técnica entre vos y una tienda online profesional. Con secciones especializadas para e-commerce, variantes visuales para cada rubro, y vista previa en tiempo real, podés diseñar una homepage que convierta sin escribir código ni depender de un diseñador.
Lo más importante no es tener muchas secciones — es tener las secciones correctas, bien configuradas y enfocadas en la conversión. Empezá con el hero, agregá tus productos destacados, sumá prueba social y cerrá con un CTA claro.
Explorá todas las funcionalidades de Commercy, compará los planes disponibles, o agendá una demo para ver el Page Builder en acción con tu catálogo real.