Variantes de header y hero

Las variantes son layouts predefinidos dentro de una sección. Se seleccionan con variant_id en los settings y cambian la estructura completa del HTML.

Header variants

El header (_base/sections/header.html) tiene 26 variantes. Se seleccionan desde el Theme Editor con el campo variant_id.

Variants disponibles

ID	Nombre	Descripción
classic-split	Clásico dividido	Logo izq · nav centro · acciones der (default)
centered-brand	Brand centrado	Logo centrado, nav debajo
minimal	Mínimo	Logo + acciones, burger nav
minimal-sticky	Mínimo sticky	Como minimal pero siempre fijo + compact
search-first	Búsqueda primero	Barra de búsqueda prominente
mega-menu	Mega menú	Botón categorías con mega panel
mega-horizontal	Mega horizontal	Mega menu con paneles horizontales
mega-vertical	Mega vertical	Mega menu con sidebar flyout
triple-stack	Triple fila	3 filas: utility · brand+search · nav
stacked-compact	Stack compacto	2 filas compactas
marketplace-dense	Marketplace denso	Logo · categorías · búsqueda · ubicación
side-categories	Categorías lateral	Botón + nav + búsqueda overlay
full-nav-fill	Nav full-width	Barra de navegación full-width
split-actions	Acciones divididas	Acciones a ambos lados del brand
floating-pill	Pill flotante	Header flotante tipo pill
editorial-magazine	Editorial magazine	Estilo revista con número de edición + serif
dark-luxury	Lujo oscuro	Premium oscuro con serif
transparent-overlay	Transparente	Transparente sobre hero, sólido al scroll
marquee-animated	Marquesina	Marquesina animada + header estándar
announcement-countdown	Countdown + announcement	Countdown en vivo + header
seasonal-promo	Promo estacional	Barra gradiente promo + CTA
press-bar	Barra de confianza	✓ envío, ✓ seguro, ✓ devoluciones
cta-header	CTA header	Botones CTA prominentes
gradient-dark	Gradiente oscuro	Header con gradiente dark
multi-currency	Multi-moneda	Selector de idioma/moneda
drawer-mobile	Drawer mobile	Drawer de navegación a pantalla completa

Campos comunes del header

Campo	Tipo	Default	Descripción
variant_id	select	classic-split	Variante activa
brand	text	—	Nombre de la marca
announcement	text	—	Texto de la barra de anuncio
announcement_on	checkbox	true	Mostrar barra de anuncio
announcement_bg	color	#0F172A	Fondo de la barra
announcement_fg	color	#FFFFFF	Texto de la barra
bg_color	color	#FFFFFF	Fondo del header
fg_color	color	#0F172A	Texto del header
accent_color	color	#6366F1	Color de acento
sticky	checkbox	true	Fijo al scroll
show_search	checkbox	true	Mostrar barra de búsqueda
show_wishlist	checkbox	true	Mostrar icono de favoritos
logo	image	—	Logo light mode
logo_dark	image	—	Logo dark mode

Campos por variante (grouped)

Algunos campos solo aparecen cuando se selecciona una variante específica:

• mega-menu: 6 campos para columnas del mega menú
• marquee-animated: items, bg, fg colors
• marketplace-dense: ubicación, label de categorías
• editorial-magazine: texto de edición
• floating-pill: color de fondo de página
• announcement-countdown: headline, ends_at, CTA
• cta-header: texto/URL de botones primary/secondary

Hero variants

El hero (_base/sections/hero.html) tiene 10 variantes.

Variantes disponibles

ID	Nombre	Descripción
carousel	Carrusel	Imágenes con dots/flechas (default)
split-editorial	Split editorial	2 columnas: contenido izq, imágenes der
full-bleed	Full bleed	Pantalla completa con overlay de texto
typographic	Tipográfico	Solo texto gigante
diagonal	Diagonal	Imagen con clip-path diagonal
tri-grid	Tri-grid	Grid de 3 cards
search-hub	Hub de búsqueda	Barra de búsqueda + chips de categoría
countdown	Countdown	Timer con CTA
video	Video	Video de fondo con overlay
product-feature	Producto destacado	Spotlight de producto

Campos comunes del hero

Campo	Tipo	Descripción
variant_id	select	Variante activa
font_title_override	select	Override de Google Font para título
font_subtitle_override	select	Override de Google Font para subtítulo

Campos por variante

Cada variante tiene sus propios campos grouped:

carousel: slides (tipo slides), autoplay_interval (3-15s)

full-bleed: fb_eyebrow, fb_title, fb_subtitle, fb_cta, fb_image, fb_video (+ muted/autoplay/loop), fb_overlay, fb_height, fb_eyebrow_size, fb_title_size, fb_subtitle_size, fb_*_spacing

video: vi_video, vi_poster, vi_muted, vi_autoplay, vi_loop, vi_controls, vi_title, vi_cta, vi_cta_url

countdown: cd_headline, cd_subline, cd_ends_at, cd_cta, cd_accent, cd_bg, cd_fg, cd_btn_bg, cd_btn_fg, cd_headline_size, cd_subline_size

Crear una variante personalizada

Para agregar una variante a una sección existente:

1. Editar el template de la sección (_base/sections/header.html o hero.html)
2. Agregar un bloque {{if eq $variantId "nueva-variante"}}...{{end}}
3. Agregar los campos grouped en AvailableSections() en admin/handlers/themes.go
4. Agregar CSS para la variante en _base/assets/header-variants.css o hero-variants.css

<!-- En header.html, agregar al final del dispatch de variantes -->
{{ if eq $variantId "mi-variante" }}
  <header class="header header--mi-variante">
    <!-- Tu layout -->
  </header>
{{ end }}

/* En _base/assets/header-variants.css */
.header--mi-variante {
  /* Tus estilos */
}