Documentation
Feedback
Guides
VTEX IO Apps

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

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

Before you begin

Make sure you have added the search app to your theme dependencies within 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 of the following fields:

FieldDescription
ActiveIndicates if the banner is active or not.
Banner nameUnique identifier for the banner.
Type bannerSpecifies the type of banner, which can be either HTML or IMAGE.
HTML / Image URLHTML code or image to be inserted.
AreaIndicates the section of the page where the banner will be displayed. It's important when multiple banners are present on 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 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
areaStringIndicates the area. It must match the area configured in the banner.-
blockClassStringDefines a custom class to the banner div.-
horizontalAlignmentStringDefines the horizontal alignment for the banner."center"

The possible values for horizontalAlignment are:

Values
"left"
"right"
"center"

Customization

To apply CSS customizations to this and other blocks, follow the instructions in the guide Using CSS Handles for store customization.

CSS Handles
searchBanner
See also
Vtex.search
VTEX IO Apps
VTEX App Store
VTEX IO Apps