Probador de Color de Cabello

Herramienta de realidad virtual / video try-on que permite a los clientes probar diferentes colores de cabello de forma interactiva. Requiere el addon hair-tryon activado.

Configuración

Campo	Tipo	Default	Descripción
title	text	—	Título
subtitle	textarea	—	Subtítulo
font_family	select	— (fuente del tema)	Tipografía del módulo. Vacío = usa la fuente de títulos del tema
cta_text	text	—	Texto del botón CTA
show_product_card	checkbox	true	Mostrar card del producto
product_name	text	—	Nombre del producto
product_url	url	—	URL del producto
bg_color	color	#FFFFFF	Fondo light
bg_color_dark	color	#0F172A	Fondo dark mode
accent_color	color	acento del tema	Color de acento (botón, ícono). Vacío = usa el acento del tema activo (ej. olive en olive-luxe); si el tema no define acento, cae a #BE185D
swatches	shade_groups	[]	Paleta de colores disponibles
mode_selfie	checkbox	true	Modo selfie (cámara frontal)
mode_photo	checkbox	true	Modo subir foto
tagline	text	—	Tagline del widget
default_intensity	number	80	Intensidad por defecto (0–100)
enabled	checkbox	true	Activar el widget

Controles de UI (ctrl_*)

Campo	Tipo	Descripción
ctrl_show_title	checkbox	Mostrar título
ctrl_show_subtitle	checkbox	Mostrar subtítulo
ctrl_show_cta	checkbox	Mostrar CTA
ctrl_show_product_card	checkbox	Mostrar card de producto
ctrl_show_modes	checkbox	Mostrar selector de modo
ctrl_show_intensity	checkbox	Mostrar slider de intensidad

Estructura de cada swatch

Campo	Tipo	Descripción
color	color	Código hex del color
name	text	Nombre del color
image	image	Imagen de referencia

Tipografía y modo oscuro

• Tipografía: font_family permite elegir la fuente del módulo. Vacío = usa la fuente de títulos del tema activo.
• Modo oscuro: en dark, el módulo usa un fondo oscuro con texto claro legible en cualquier tema (incluidos temas light-only como olive-luxe), sin depender de que el tema invierta sus tokens.

Requisitos

• Addon hair-tryon activado en Apariencia → Addons
• Plan del tenant: enterprise (addon con gating)
• Archivos del addon en _platform/: hair-tryon-vto.js, hair-tryon.css

Ejemplo

{
  "title": "Prueba tu color ideal",
  "subtitle": "Visualiza cómo te quedaría antes de decidirte",
  "cta_text": "Comprar color",
  "product_url": "/products/tinte-profesional",
  "accent_color": "#8B5CF6",
  "default_intensity": 80,
  "swatches": [
    { "color": "#1A1A2E", "name": "Negro natural" },
    { "color": "#8B4513", "name": "Castaño oscuro" },
    { "color": "#D4A574", "name": "Rubio miel" }
  ]
}