Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Store Components
Notification
vtex.store-components
Version: 3.175.1
Latest version: 3.175.1

The notification component displays text content in a bar style (notification.bar) or inline (notification.inline). This Component can be imported and used by any VTEX app.

{"base64":"  ","img":{"width":1888,"height":733,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":1082858,"url":"https://user-images.githubusercontent.com/67270558/147773765-0a7f00d6-69ce-44fa-98fc-4b1824faa2bf.png"}}

Configuration

  1. Import the vtex.store-components app to your theme's dependencies in the manifest.json file as in the following example:

_10
"dependencies": {
_10
"vtex.store-components": "3.x"
_10
}

  1. Add the notification block to any template of your choice. For example:

_10
"store.home": {
_10
"blocks": [
_10
+ "notification.bar",
_10
"carousel#home",
_10
"shelf#home"
_10
]
_10
},

  1. Then, declare the notification block using the props stated in the Props table.

Props

Prop nameTypeDescriptionDefault value
contentStringText to be used in the bar.''
classesCustomCSSClassesOverrides default CSS handles. To better understand how this prop works, check this document. Note that this is only helpful if you're using this block as a React component.undefined

Customization

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

CSS Handles
notificationBarContainer
notificationBarInner
notificationContent
See also
Vtex.store Components
VTEX IO Apps
VTEX App Store
VTEX IO Apps