Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Store Components
Logo
vtex.store-components
Version: 3.172.2
Latest version: 3.172.2

The logo block displays a logo in the store header.

{"base64":"  ","img":{"width":2850,"height":1576,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":1352672,"url":"https://user-images.githubusercontent.com/52087100/70247921-f1d43a80-1758-11ea-853e-065dfed06c73.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 logo block into the header component. For example:

_11
"header.full": {
_11
"blocks": [
_11
"login",
_11
"minicart",
_11
+ "logo",
_11
"search-bar",
_11
"menu-link",
_11
"telemarketing",
_11
"category-menu"
_11
]
_11
},

  1. Then, declare the logo block using the props stated in the Props table. For example:

_10
"logo": {
_10
"props": {
_10
"width": 132,
_10
"height": 32,
_10
"mobileWidth": 90,
_10
"mobileHeight": 32
_10
}
_10
}
_10
}

Props

Prop nameTypeDescriptionDefault value
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
colorStringThe image fill color.#F71963
heightNumberThe logo image height.177
hrefStringThe image hyperlink.undefined
showLabelBooleanThe label visibility.true
titleString!The image alt description.VTEX logo
urlStringThe image soure URL.undefined
widthNumberThe 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
See also
Vtex.store Components
VTEX IO Apps
VTEX App Store
VTEX IO Apps