Advanced Customization (PrestaShop)

Advanced Customization covers the technical customization layer: CSS variables, stable selectors, theme CSS, product-card markup, and markup-level surfaces such as Card Template and Empty Query.

If you only need to change live search mode, selector placement, Search Box settings, or the main accent color, start with Storefront Search Interface (PrestaShop) instead. That section documents the no-code UI Settings pages.

Two customization layers

Layer	Where it lives	Typical user
No-code UI settings	UI Settings -> Integration, Search Box, Theme, Card Template	Merchant/operator configuring the dashboard.
Advanced technical customization	PrestaShop theme CSS, documented --kea-* variables, data-kea-* markers, and supported template/card fields	Developer or theme integrator maintaining storefront code.

Use the no-code layer first. Use this advanced section when the dashboard settings are not enough.

How to use this section

1. Start with Technical Customization for the CSS variables, selectors, and template fields that are safe to use.
2. Use the canonical references for stable names: CSS Variables Reference and DOM Markers Reference.
3. Apply the PrestaShop-specific notes here for theme file placement, cache clearing, and storefront module integration.

Advanced customization pages

• CSS Variables (PrestaShop) - applying documented --kea-* tokens in a PrestaShop theme or child theme.
• CSS Classes and Selectors (PrestaShop) - stable runtime markers and PrestaShop module-template hooks.
• Templates and Markup Overrides (PrestaShop) - safe template/markup override patterns.
• Card Template (PrestaShop) - the product-card template editor under UI Settings -> Card Template. It belongs to UI Settings, but it is listed here too because it changes product-card markup.
• Empty Query (PrestaShop) - the empty-query panel editor under Merchandising -> Empty Query.
• Customization Workflow and Checklist (PrestaShop) - release checks for CSS/template changes.

PrestaShop storefront module hooks

The PrestaShop module exposes a small set of module-template hooks. These hooks are different from the CSS variables, card classes, and data-kea-* markers emitted by the storefront bundle.

The module templates expose:

• Classes: kea-search-form, kea-search-input, kea-search-button, kea-search-container, kea-search-results-container, kea-search-page-context, kea-killswitch-form, kea-loader, kea-pro-search-admin.
• Attributes: data-kea-context, data-kea-role, data-kea-type (with data-kea-role values search-form, search-input, search-button, search-results).

Use these module-template hooks for PrestaShop placement and kill-switch integration.

For storefront UI styling, use the documented storefront hooks: --kea-* variables, .kea-card, .kea-products, .kea-facets__group, data-kea-component, data-kea-action, and the related markers listed in the reference pages.