CSS Variables (PrestaShop)

Use CSS variables when the dashboard Theme page is not enough. For a normal brand-color adjustment, start with Theme (PrestaShop) and change Accent color (main_accent) first.

Use the core token names from CSS Variables Reference, then apply them in your PrestaShop theme stylesheet.

The 24 --kea-* tokens are the same supported token set on every platform. PrestaShop does not introduce PrestaShop-specific token names. The storefront runtime that ships with the Kea Labs Search Pro module emits them on the page.

Typical placement

Use one controlled file such as:

• themes/<active-theme>/assets/css/custom.css
• or a child-theme equivalent.

Example

#search_widget,
.page-search {
  --kea-color-accent: #1d4ed8;
  --kea-color-border: #d1d5db;
  --kea-radius-md: 12px;
  --kea-products-gap: 18px;
}

PrestaShop notes

• Load override CSS after the base theme CSS so the override specificity wins.
• Clear the PrestaShop cache after updates and also clear any CDN/frontend-cache layer.
• Re-test the templates where the search widget and results page are mounted, such as the header, category page, product page, and search results controller.
• If a token does not visibly change anything, the active template likely hardcodes a value or the selector scope does not cover that surface. Check the rendered HTML first.

If only some pages are styled, your scope selector likely does not cover all templates.