Personaliza Findalo a fondo.
Todo lo del panel — colores, disposiciones, presets — funciona sin escribir código. Esta sección es para cuando quieres ir más allá: theming fino con tokens CSS, estilos sobre las clases estables del widget, tu propia card de producto y reacción a los eventos del buscador desde JavaScript.
Automatización IA por MCP (agentes)
Conecta tu LLM (Claude Code, Cursor…) al buscador con una API key: descubre qué puede configurar y sus límites, y propón cambios que un humano aprueba.
Theming con tokens --fdl-*
El contrato estable de personalización visual: 27 tokens CSS versionados.
CSS avanzado y clases estables
Clases del widget con soporte garantizado para CSS custom.
Plantilla de card
HTML propio para la card de producto con variables y condicionales.
Eventos y API JavaScript
El bus findalo.on: búsquedas, clicks, carrito y métodos del API.
Contexto de navegación (FINDALO_CTX)
Una variable JS con la página, el producto, la categoría, el carrito y el cliente — igual en PrestaShop, WooCommerce, Magento y Shopware.
El contrato: qué es estable y qué no
El widget se renderiza dentro de un shadow DOM propio para no interferir con tu tienda.
Lo que documentamos aquí — los tokens --fdl-*,
las clases listadas, las variables de plantilla y los eventos — es contrato estable:
solo añadimos, nunca renombramos ni quitamos. Cualquier otra clase o variable que veas en el
inspector es interna y puede cambiar en cualquier versión sin aviso; no dependas de ella.
Dónde escribir tu código
- Desde tu propia web: declara los tokens sobre
.findalo-search-hosten cualquier hoja de estilos de tu tienda — atraviesan el shadow. - Desde el panel: Apariencia → Avanzado lleva editores de CSS y JS que se inyectan dentro del widget. El CSS ahí se escribe sobre
.kos-searchy las clases estables.
Cada página de esta sección existe también en markdown (añade .md a la URL) —
práctico para pasarla a tu asistente de código. El índice general para agentes está en
findalo.io/llms.txt.