A simple banner with that can configured to appear depending on the context of the search.


The banner entity is composed by the following fields:

ActiveIndicates if banner is active or not.
Banner nameField used as an id.
Type bannerIndicates the banner type. It can be HTML or IMAGE.
HTML / Image URLHtml or image to be inserted.
AreaIndicates which area the banner should appear. It is importante when there is multiple banners in the same page.
TermsList of terms for this banner.
PeriodThe period that this banner will be active.
AttributesList of selected attributes for this banner.


Add the search-banner block to the search-result-layout.desktop or search-result-layout.mobile. For example:

  "search-result-layout.desktop": {
    "children": [
  "search-banner#one": {
    "props": {
      "area": "one",
      "blockClass": "myBanner",
      "horizontalAlignment": "center"
  "flex-layout.row#banner-one": {
    "children": [


Prop nameTypeDescriptionDefault value
areaStringIdicates the area. It needs to match the area configured in the banner.-
blockClassStringDefines a custom class for the banner div.-
horizontalAlignmentStringDefines the horizontal alignment for the banner."center"

The possible values for horizontalAlignment are:
| Values |
| --------- |
| "left" |
| "right" |
| "center"|


In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.

CSS Handles

Did this page help you?