Technical Customization
This section documents technical customization for Kea Labs storefront search. It is for developers and theme integrators who need CSS, selectors, or template-level changes.
If you are operating a PrestaShop store and only need dashboard settings, start with Storefront Search Interface (PrestaShop).
Customization model
Section titled “Customization model”- Dashboard settings for no-code changes such as search mode, selector placement, Search Box controls, Theme colors, and Card Template options where exposed by the platform.
- CSS variables for colors, spacing, radius, shadows, and layout gaps beyond the dashboard color tokens.
- CSS selectors for block-level styling such as search box, grid, cards, and facets.
- Template overrides for product-card markup and action zones.
This section covers layers 2-4. Platform docs cover the exact dashboard entry points and file/cache behavior.
What to change where
Section titled “What to change where”| What you want to change | Where to change it | After saving |
|---|---|---|
| Main search colors | Platform Theme page first; CSS variables for deeper styling | Verify preview, then publish the updated search bundle. No catalog indexing is required. |
| Search input attachment | Platform Search Box -> Integration selectors | Verify desktop and mobile preview, then publish. No catalog indexing is required. |
| Product-card layout | Platform Card Template page, then CSS selectors if needed | Validate the template, verify preview, then publish. |
| Empty-query content | Platform Merchandising -> Empty Query page | Save updates the manual list used by the storefront on the next page load. No Card Template publish step is used. |
| Ranking | Search Management fields | Saving field changes starts or queues catalog indexing on platforms that manage indexing automatically, including PrestaShop. |
| Synonyms | Search Management synonyms | Saved synonym changes are used by new search requests immediately. No catalog indexing is required. |
| Filters | Search Management filters/facets | Presentation-only changes do not need indexing. Indexed filter changes start or queue indexing on platforms that manage indexing automatically, including PrestaShop. |
Use only the CSS variables, class names, and data-kea-* markers listed
in Reference. If a name is not documented there, do not
rely on it in production styling.
Recommended order
Section titled “Recommended order”- Use the platform dashboard settings first when they are enough.
- Start technical work with CSS Variables.
- Add block-level rules from CSS Classes and Selectors.
- If needed, edit card markup with Templates and Markup Overrides.
- Use block guides in Blocks for ready-to-use patterns.
Admin-side markup surfaces
Section titled “Admin-side markup surfaces”Beyond storefront-facing CSS and templates, the admin exposes supported markup/content surfaces:
- Card Template - product-card template surface.
- Empty Query - empty-query panel surface.
These pages explain how each surface works. The PrestaShop entry points and workflows are in Card Template (PrestaShop) and Empty Query (PrestaShop).
Reference pages
Section titled “Reference pages”One rule that prevents most regressions
Section titled “One rule that prevents most regressions”If a variable, selector, or marker is not documented in reference pages, do not rely on it in production CSS.