Editor visual de temas

El editor visual permite a los merchants diseñar su tienda sin tocar código. Accede a él desde Apariencia → Editor en el panel admin.

Acceso

/admin/appearance/editor

Estructura del editor

El editor tiene 3 paneles:

1. Árbol de secciones (izquierda) — Lista ordenable de secciones por tipo de página
2. Preview en vivo (centro) — iframe que muestra la tienda con ?preview=1
3. Panel de settings (derecha) — Formulario HTMX con los campos de la sección seleccionada

Tipos de página

El árbol de secciones se organiza por tipo de página:

Tipo	Secciones disponibles
Home	Hero, colecciones, productos destacados, banners…
Featured	Secciones de colecciones destacadas
Product	Template de producto, secciones del PDP
Pages	Páginas CMS
Blog	Blog listing
Cart	Carrito de compras
Search	Resultados de búsqueda

Cada tipo tiene su propio section_order — el orden de las secciones es independiente por tipo de página.

Agregar secciones

1. Clic en "+ Agregar sección" en el árbol
2. Se abre el catálogo unificado de secciones y addons (/admin/themes/picker/items)
3. El catálogo se filtra por las secciones declaradas en theme.json del tema activo
4. Al seleccionar, la sección se agrega al final del orden de la página

Configurar secciones

Al hacer clic en una sección del árbol:

1. El panel derecho carga los settings vía HTMX (/admin/themes/sections/:id/settings)
2. Los campos se renderizan según el FieldSchema de la sección
3. Los cambios se guardan en el borrador (theme_settings_draft)
4. El preview se actualiza en tiempo real

Reordenar secciones

Las secciones se reordenan con drag & drop en el árbol. El orden se guarda vía /admin/themes/sections/order.

Eliminar secciones

Clic en el ícono de eliminar junto a la sección. Se elimina del section_order pero no se borra la configuración (se puede restaurar).

Variantes

Algunas secciones (header, hero) soportan variantes — layouts predefinidos que cambian la estructura completa:

Header variants

26 variantes disponibles, seleccionables desde el dropdown variant_id:

Variante	Descripción
classic-split	Logo izq · nav centro · acciones der
centered-brand	Logo centrado, nav debajo
minimal	Logo + acciones, burger nav
search-first	Barra de búsqueda prominente
mega-menu	Categorías con mega menu
triple-stack	3 filas: utilidad · brand+search · nav
marketplace-dense	Logo · categorías · búsqueda · ubicación
dark-luxury	Premium oscuro con serif
transparent-overlay	Transparente sobre hero, sólido al scroll
drawer-mobile	Drawer de navegación a pantalla completa

Hero variants

10 variantes de hero:

Variante	Descripción
carousel	Carrusel de imágenes con dots/flechas
split-editorial	2 columnas: contenido izq, imágenes der
full-bleed	Pantalla completa con overlay de texto
typographic	Hero de solo texto gigante
diagonal	Imagen con clip-path diagonal
tri-grid	Grid de 3 cards
search-hub	Barra de búsqueda con chips de categoría
countdown	Timer con CTA
video	Video de fondo con overlay
product-feature	Producto destacado

Los campos del editor cambian según la variante seleccionada (usando group en el schema).

Presets

Los presets son layouts predefinidos que reordenan y configuran todas las secciones de la homepage de una vez:

Preset	Descripción
default	Layout estándar: hero → colecciones → destacados → valor
dark	Mismo orden que default, con estilos oscuros
minimal	Limpio: hero → destacados → texto → newsletter

Al seleccionar un preset, se sobreescribe section_order y los valores de cada sección.

Publicar

El botón "Publicar" copia el borrador (settings_draft) a la configuración en vivo (settings). Hasta que no se publique, los visitantes no ven los cambios.

settings_draft → settings

Preview

El preview en el editor usa ?preview=1 que:

• Lee theme_settings_draft en vez de settings
• Lee los overrides de draft del code editor
• Inyecta un overlay con controles para volver al editor