Templates and Markup Overrides

Template customization is currently focused on product-card markup.

Scope

Use template overrides when CSS is not enough and you need to change card structure.

Note: Product card templates are edited through the merchant card template editor that ships with the product. The runtime template renderer applies those templates using the field catalog and sanitizer allowlist documented in the help panel inside the editor.

Keep these markers intact on card roots and action zones:

.kea-card (with .kea-card--{standard|horizontal|simple|custom|...} variant),
data-kea-template-card="true" on template-rendered cards,
data-kea-role (when the template sets it),
data-kea-action on interactive zones (see allowed values below).

Allowed action values

product.open
product.add_to_cart
visual.similar
visual.search_from_product (emitted by simple-card variants)

Safe template pattern (schematic)

The snippet below shows the recommended class and marker layout. Use the Card Template editor help panel for the exact fields available in your shop. Keep the class names and data-kea-action markers from this example when you adapt the markup.

<div class="kea-card__media" data-kea-action="product.open">
  <img class="kea-card__image" src="{{ product.image_url }}" alt="{{ product.title }}">
  <button class="kea-card__similar-btn" data-kea-action="visual.similar" type="button">
    {{ labels.find_similar }}
  </button>
</div>
<div class="kea-card__body" data-kea-action="product.open">
  <div class="kea-card__title">{{ product.title }}</div>
  <div class="kea-card__price-row">
    <span class="kea-card__price">{{ product.price_text }}</span>
  </div>
</div>
{{#product.can_add_to_cart}}
  <button class="kea-card__cart-btn" data-kea-action="product.add_to_cart" type="button">
    {{ labels.add_to_cart }}
  </button>
{{/product.can_add_to_cart}}

Practical checks after template edits

Click zones still work.
Card actions still dispatch expected behavior.
Desktop and mobile card variants still render correctly.

If styles do not apply after a template edit

The card root lost the .kea-card class — the runtime no longer recognises it as a search result card. Restore .kea-card (with the variant modifier your layout uses).
A data-kea-action value was added that is not in the allowed list above. Replace it with one of the documented values.
The change is in the wrong template layer. Re-check that you are editing the merchant-side template (the one the card template editor surfaces) and not a generated/vendor file.