Logo

The logo block displays a logo in the store header.

Configuration

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

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

Add the logo block into the header 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`