Logo by vtex

This page is about version 3.115.0 of the app, which is not the most recent version. The latest stable version is 3.178.4.

Logo is a VTEX block responsible for displaying an image logo for 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

Import the vtex.store-component app to your theme's dependencies in the manifest.json;


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

Add the logo block into your Header. For example:


_21"header.full": {
_21  "blocks": [
_21    "login",
_21    "minicart",
_21    "logo",
_21    "search-bar",
_21    "menu-link",
_21    "telemarketing",
_21    "category-menu"
_21  ]
_21},
_21
_21 "logo": {
_21    "props": {
_21      "width": 132,
_21      "height": 32,
_21      "mobileWidth": 90,
_21      "mobileHeight": 32
_21    }
_21  }
_21}

Prop name	Type	Description	Default value
`title`	`String!`	The image alt description	`VTEX logo`
`color`	`String`	The image fill color	`#F71963`
`showLabel`	`Boolean`	Set the label visibility	true
`width`	`Number`	The logo image width	`493`
`height`	`Number`	The logo image height	`177`
`url`	`String`	The image url	-
`href`	`String`	Image link	-

Customization

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.

CSS Handles
`sizeDesktop`
`sizeMobile`
`logoLink`
`logoContainer`
`logoImage`