Skip to content

Before You Publish Styling Changes

Use this page before publishing CSS, selector, or template changes to the storefront.

Use only the CSS variables, class names, and data-kea-* markers documented in CSS Variables Reference and DOM Markers Reference. If a selector is not listed there, do not build production styling on it.

Put CSS in your theme or override stylesheet. Do not patch generated bundle files or vendor files directly; those files can be replaced by the next build or module update.

For template changes, use the product’s template editor or the platform’s approved override layer. Keep required data-kea-action, data-kea-role, and card root markers in the HTML.

After saving dashboard settings or changing theme files, open storefront preview and check the blocks you touched:

  • search input and autocomplete dropdown;
  • results page layout;
  • product cards and card actions;
  • facets, selected values, and clear/reset behavior;
  • empty-query panel if you changed its styling or content.

Run the same checks on desktop and mobile. If your store has more than one language or shop, test at least the non-default one too.

If the storefront still shows old styling after a save or theme-file change, clear the platform storefront cache, clear any CDN/reverse-proxy cache in front of the store, then hard reload the preview tab.

Publish only after the journey still works

Section titled “Publish only after the journey still works”

Do not publish a styling change just because one block looks correct. Before publishing, run one full search journey:

  1. Focus the search input.
  2. Type a query and inspect the dropdown.
  3. Submit the query and inspect the results page.
  4. Apply and clear a filter.
  5. Click a product card.

If any step breaks, fix it in preview before publishing. If a critical issue reaches production, restore the last known-good theme/template change first, then investigate the failed styling change in preview.