CSS Classes and Selectors (PrestaShop)

Use this page when you need developer-level CSS selectors in a PrestaShop theme. If you only need to tell Kea which existing search button/input should open the Search Box, use Search Box -> Integration instead.

Canonical references

Keep these reference pages open while styling:

• Shared CSS Classes and Selectors
• DOM Markers Reference

The same stable classes and data-kea-* markers documented there are emitted by the storefront bundle on PrestaShop pages that mount search. This PrestaShop page adds placement and cache notes only.

Runtime selector example

/* Results page: scope by root class. */
.kea-search.kea-search--classic .kea-products[data-kea-component="products"] {
  margin-top: 12px;
}

/* Selected facet option. */
[data-kea-role="facet-option"][data-kea-selected="true"] {
  border-color: var(--kea-color-accent, #4b4efc);
}

Search Box integration selectors

The Search Box dashboard page also asks for CSS selectors, but those are not styling selectors. They are attachment selectors: they tell Kea which existing storefront elements should open or anchor the search input.

Use UI Settings -> Search Box -> Integration for those selector lists. Use this page for CSS rules that style the rendered Kea UI.

PrestaShop notes

• Keep overrides in theme files, not module bundle files.
• Load override CSS after the base theme CSS so the override specificity wins.
• Clear the PrestaShop cache and any CDN/frontend cache after updates.
• Re-test after minification or asset-combination pipeline runs.
• Prefer the documented data-kea-* markers and root classes (.kea-search, .kea-search--{mode}, .kea-search-canvas) over deep theme DOM chains.

If styles vanish after deployment, check CSS build order and cache invalidation first.