Logo
The logo
block displays a logo in the store header.

Configuration
- Import the
vtex.store-components
app to your theme's dependencies in themanifest.json
file as in the following example:
"dependencies": {
"vtex.store-components": "3.x"
}
- Add the
logo
block into theheader
component. For example:
"header.full": {
"blocks": [
"login",
"minicart",
+ "logo",
"search-bar",
"menu-link",
"telemarketing",
"category-menu"
]
},
- Then, declare the
logo
block using the props stated in the Props table. For example:
"logo": {
"props": {
"width": 132,
"height": 32,
"mobileWidth": 90,
"mobileHeight": 32
}
}
}
Props
Prop name | Type | Description | Default value |
---|---|---|---|
classes | CustomCSSClasses | Overrides 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 |
color | String | The image fill color. | #F71963 |
height | Number | The logo image height. | 177 |
href | String | The image hyperlink. | undefined |
showLabel | Boolean | The label visibility. | true |
title | String! | The image alt description. | VTEX logo |
url | String | The image soure URL. | undefined |
width | Number | The logo image width. | 493 |
Customization
To apply CSS customizations in this and other blocks, follow the Using CSS handles for store customization guide.
CSS Handles |
---|
logoContainer |
logoImage |
logoLink |
sizeDesktop |
sizeMobile |