Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Basic components
Banner
vtex.search
Version: 2.17.0
Latest version: 2.17.0

Banners is the Intelligent Search feature that displays banners on the search results page of the customer, depending on the context of the search.

Before you begin

Make sure you have added the search app to your theme dependencies in the manifest.json as shown below:


_10
"dependencies": {
_10
"vtex.search": "2.x"
_10
}

Check the Search app documentation for more details on this step.

Configuration

The banner entity is composed by the following fields:

FieldDescription
ActiveIndicates if the banner is active or not.
Banner nameField used as an ID.
Type bannerIndicates the banner type, which can be HTML or IMAGE.
HTML / Image URLHTML code or image to be inserted.
AreaIndicates in which area the banner should appear. It is important when there are 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:


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

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
See also
Vtex.search
VTEX IO Apps
VTEX App Store
VTEX IO Apps