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:
| Field | Description |
|---|---|
Active | Indicates if the banner is active or not. |
Banner name | Unique identifier for the banner. |
Type banner | Specifies the type of banner, which can be either HTML or IMAGE. |
HTML / Image URL | HTML code or image to be inserted. |
Area | Indicates the section of the page where the banner will be displayed. It's important when multiple banners are present on the same page. |
Terms | List of terms for this banner. |
Period | The period that this banner will be active. |
Attributes | List 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 name | Type | Description | Default value |
|---|---|---|---|
area | String | Indicates the area. It must match the area configured in the banner. | - |
blockClass | String | Defines a custom class to the banner div. | - |
horizontalAlignment | String | Defines 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 |