Tema
Page Builder
El Page Builder es un editor visual donde diseñas las páginas de tu tienda. Funciona como un lienzo de arrastrar y soltar: agregas bloques de contenido (llamados secciones), personalizas la apariencia de tu barra de navegación y los colores del tema, y ves una vista previa en vivo del resultado antes de publicar.
Cada tienda comienza con una página de Inicio. También puedes crear páginas personalizadas (por ejemplo, Sobre Nosotros, Contacto, Promociones) que obtienen su propia URL en tu tienda.
Gestión de páginas
Abre Pages en la barra lateral del admin para ver todas las páginas de tu tienda. La página de Inicio siempre aparece primero.
| Columna | Descripción |
|---|---|
| Name | El título de la página mostrado en el admin |
| Slug | La ruta URL en tu tienda (por ejemplo, /about) |
| Status | Active (visible en la tienda) o Inactive |
| Created At | Fecha de creación de la página |
Desde esta pantalla puedes:
- Crear una página — haz clic en New Page en la esquina superior derecha. Esto abre el builder con una página en blanco.
- Editar una página — haz clic en el nombre de la página o elige Edit en el menú de acciones. Esto abre el builder con esa página cargada.
- Activar / Desactivar — cambia la visibilidad desde el menú de acciones o usa las casillas de selección masiva.
- Eliminar — elimina una página desde el menú de acciones o de forma masiva.
Importante: La página de Inicio no se puede eliminar ni renombrar desde esta pantalla. Sus metadatos se gestionan en la configuración de la tienda.
Abrir el builder
Cuando haces clic en New Page o Edit, el Page Builder se abre en un diseño de pantalla completa:
El builder tiene tres áreas principales:
| Área | Descripción |
|---|---|
| Barra lateral primaria | Una barra estrecha de iconos en el extremo izquierdo con cuatro botones de panel (de arriba a abajo): Metadata, Sections, Navbar, Theme |
| Barra lateral secundaria | Los controles del panel activo, donde editas contenido, configuración o estilos |
| Vista previa en vivo | Un iframe que muestra tu página exactamente como la verán los clientes. Se actualiza en tiempo real a medida que haces cambios |
La barra superior contiene:
| Control | Descripción |
|---|---|
| Back | Regresa a la lista de páginas (advierte si tienes cambios sin guardar) |
| Selector de página | Desplegable para cambiar entre páginas sin salir del builder |
| Cambio de viewport | Alterna entre tamaños de vista previa Desktop, Tablet y Mobile |
| Discard | Revierte todos los cambios no guardados al instante |
| Save | Abre un diálogo de confirmación y luego guarda todo en la base de datos |
Metadatos de la página
Haz clic en el icono de documento (primer icono en la barra lateral primaria) para abrir el panel de metadatos. Para páginas nuevas, este panel se abre automáticamente.
| Campo | Descripción |
|---|---|
| Name | El título de la página (obligatorio). Al crear una nueva página, cambiar el nombre genera automáticamente un slug |
| Slug | La ruta URL de la página (obligatorio). Solo se permiten letras minúsculas, números y guiones |
| Description | Una descripción opcional para propósitos de SEO. También puedes usar el botón AI Generate si las integraciones de IA están habilitadas |
| Published | Activa o desactiva para hacer la página visible en la tienda |
Consejo: La vista previa del slug debajo del campo muestra la ruta URL completa (por ejemplo,
/about-us). Una vez que editas manualmente el slug, deja de generarse automáticamente a partir del nombre.
Para la página de Inicio, el panel de metadatos muestra un aviso de solo lectura: el nombre y la descripción de la página de inicio se gestionan desde la configuración general de la tienda.
Trabajar con secciones
Haz clic en el icono de capas (segundo icono en la barra lateral primaria) para abrir el panel de secciones. Aquí es donde agregas y organizas los bloques de contenido.
Cada sección en la lista muestra su icono de tipo y etiqueta. Puedes:
- Agregar una sección — haz clic en Add Section y elige del menú desplegable
- Reordenar — arrastra las secciones hacia arriba o abajo usando el control de agarre a la izquierda
- Expandir / Contraer — haz clic en el nombre de una sección para revelar su configuración
- Alternar visibilidad — usa el interruptor para mostrar u ocultar una sección sin eliminarla
- Eliminar — haz clic en el icono de papelera (requiere confirmación)
Hay seis tipos de sección disponibles:
| Tipo | Ideal para |
|---|---|
| Slideshow | Banners principales, promociones, contenido destacado |
| Product List | Mostrar productos específicos |
| Collection | Destacar una colección de productos |
| Image with Text | Narrativa, mensajes de marca, características |
| Text | Anuncios, descripciones, políticas |
| Space | Espacio visual entre secciones |
Personalizar la barra de navegación
Haz clic en el icono de panel superior (tercer icono en la barra lateral primaria) para abrir el panel de personalización de la barra de navegación.
Importante: Los cambios en la barra de navegación se aplican globalmente a todas las páginas, no solo a la que estás editando actualmente.
| Configuración | Descripción |
|---|---|
| Show Logo | Activa o desactiva el logo de la tienda en la barra de navegación |
| Show Store Name | Activa o desactiva el texto del nombre de la tienda junto al logo |
| Logo Size | Elige entre sm, md, lg, xl o 2xl |
| Text Style | Configura el tamaño de fuente del nombre de la tienda, negrita y cursiva |
| Position | Alinea el logo y el nombre de la tienda a la izquierda, centro o derecha |
Personalizar el tema
Haz clic en el icono de paleta (cuarto icono en la barra lateral primaria) para abrir el panel de personalización del tema.
Importante: Los cambios del tema se aplican globalmente a todas las páginas, no solo a la que estás editando actualmente.
Controles de modo:
| Configuración | Descripción |
|---|---|
| Light Mode | Habilitar o deshabilitar el esquema de color claro |
| Dark Mode | Habilitar o deshabilitar el esquema de color oscuro |
Al menos un modo debe permanecer habilitado en todo momento.
Campos de color (10 por modo):
| Color | Qué controla |
|---|---|
| Primary Color | Botones, enlaces y elementos de acento |
| Secondary Color | Elementos secundarios de la interfaz |
| Tertiary Color | Color de acento adicional |
| Background Color | Fondo de la página |
| Menu Bar Color | Fondo de la barra de navegación |
| Menu Bar Text Color | Texto de la barra de navegación |
| Input Background | Campos de entrada de formularios |
| Text Color | Texto principal del cuerpo |
| Banner Background | Fondo de la barra de banner promocional |
| Banner Text Color | Texto de la barra de banner promocional |
Fuente:
| Configuración | Descripción |
|---|---|
| Font Family | Elige una fuente global de las fuentes del sistema y Google Fonts disponibles |
Guardar y publicar
Cuando estés satisfecho con tus cambios, haz clic en Save en la esquina superior derecha. Aparece un diálogo de confirmación:
- Si la página está publicada (activa), el diálogo confirma que estás publicando cambios en vivo.
- Si la página es un borrador (inactiva), el diálogo confirma que estás guardando sin hacer la página pública.
El proceso de guardado sube todas las imágenes pendientes, crea la página (si es nueva) y guarda las secciones, la configuración de la barra de navegación, la configuración del tema y los metadatos de la página, todo de una vez.
Haz clic en Discard en cualquier momento para revertir todos los cambios no guardados al último estado guardado.
Cómo aparecen las páginas en la tienda
Página de Inicio
La página de inicio es lo primero que ven los visitantes. Renderiza todas las secciones activas en el orden que definiste en el builder.
Páginas personalizadas
Las páginas personalizadas son accesibles en su URL de slug (por ejemplo, tutienda.com/about). Se renderizan de la misma manera que la página de inicio: cada sección activa aparece en orden.
Solo las páginas activas con el interruptor Published habilitado son visibles en la tienda. Las páginas inactivas devuelven un error 404.
Las páginas personalizadas también aparecen en el menú de navegación móvil y en el pie de página de la tienda, haciéndolas fáciles de encontrar para los clientes.