Skip to main content

​
Bonsai Search SDK

Almost always theme="dark".The dark palette is declared on an element inside the component’s shadow root, which your page cannot reach by selector. It outranks page CSS, inline style="", !important, and the Settings API alike, so 21 colour and shadow variables are silently discarded. theme="auto" has the same effect on a visitor whose system prefers dark.Fix: set theme="light" and supply the dark palette yourself. Do not simply drop the attribute — with no theme the component adopts behavior.theme from the Settings API, which may itself be dark. The full list and a copy-pasteable block are in Dark theme.If a variable still doesn’t apply after that, check it against the reference table — --bonsai-input-padding-x, --bonsai-input-border-radius and --bonsai-search-margin are not variables the component reads.
Requests are refused unless the page’s origin is allowed for your organization, and the failed CORS preflight surfaces in the component as Failed to fetch.
  • Allowed automatically: the Bonsai dashboard, any https://*.shopifypreview.com preview, and — on non-production environments only — http://localhost:3000 / :3001 and the matching 127.0.0.1 ports.
  • Everything else is per-organization, including the localhost port you use against production. Ask your CSM which origins are registered for you, and to add the one you are developing on.
  • Files opened directly from disk (file://) send an origin of null and are never allowed. Serve the page over HTTP.
If a page works on one port and not another, that is this list — not a bug in the embed.
  • Confirm api-key is present and valid.
  • Confirm the page origin is registered (see above).
  • Inspect the browser console for network or CORS errors.
no _bonsai_s shopper identifier on this page means the Bonsai pixel is not installed. Search still works, but every event reports NOT_SET and cannot be joined to page views, orders or Concierge conversations. Install the pixel.
  • Ensure suggestions is a valid JSON array string.
  • Use single quotes around the attribute and double quotes inside the array.
  • A malformed suggestions attribute yields an empty list rather than falling back to the Settings API, and logs Invalid suggestions JSON.
  • Confirm the product image URLs are reachable from the visitor’s browser (an ad blocker or CSP img-src rule can block a CDN).
  • Use missing-image-url to supply your own fallback, or hide-missing-images to drop those results entirely.
  • Increase timeout-ms for slower networks.
  • Check ad blockers or CSP rules that might block the API domain.
Expected. The path in base-url is replaced at load time by the search version configured for your organization. Add disable-search-path-override to pin it — see base-url.

​
Support

If you encounter any issues during integration or need assistance with customization, please contact your Customer Success Manager or reach out to our support team.