Documentation
Feedback
Guides

Banner

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

Configuration

The banner entity is composed by the following fields:

FieldDescription
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.

Usage

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


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

Props

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"

Customization

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
searchBanner
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
+ 3 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
+ 3 contributors
On this page