Customize Findalo in depth.
Everything in the panel — colors, layouts, presets — works without writing code. This section is for when you want to go further: fine-grained theming with CSS tokens, styles on the widget's stable classes, your own product card and reacting to the search's events from JavaScript.
AI Automation over MCP (agents)
Connect your LLM (Claude Code, Cursor…) to your search with an API key: it discovers what it can configure and its limits, and proposes changes a human approves.
Theming with --fdl-* tokens
The stable visual-customization contract: 27 versioned CSS tokens.
Advanced CSS and stable classes
Widget classes with guaranteed support for custom CSS.
Card template
Your own HTML for the product card, with variables and conditionals.
Events and JavaScript API
The findalo.on bus: searches, clicks, cart, and API methods.
Contexto de navegación (FINDALO_CTX) (ES)
Una variable JS con la página, el producto, la categoría, el carrito y el cliente — igual en PrestaShop, WooCommerce, Magento y Shopware.
The contract: what is stable and what is not
The widget renders inside its own shadow DOM so it never interferes with your store.
What we document here — the --fdl-* tokens,
the listed classes, the template variables and the events — is a stable contract:
we only add, we never rename or remove. Any other class or variable you see in the
inspector is internal and can change in any release without notice; don't depend on it.
Where to write your code
- From your own site: declare the tokens on
.findalo-search-hostin any of your store's stylesheets — they pierce the shadow. - From the panel: Appearance → Advanced has CSS and JS editors that get injected inside the widget. The CSS there targets
.kos-searchand the stable classes.
Every page in this section also exists in markdown (append .md to the URL) —
handy for handing it to your coding assistant. The general index for agents lives at
findalo.io/llms.txt.