📢 Use this project, contribute to it or open issues to help evolve it using Store Discussion.

Logo

Logo is a VTEX block responsible for displaying an image logo for the store header.

logo

Configuration

  1. Import the vtex.store-component app to your theme's dependencies in the manifest.json;
 "dependencies: {
    "vtex.store-components": "3.x"
  }
  1. Add the logo block into your Header. For example:
"header.full": {
  "blocks": [
    "login",
    "minicart",
    "logo",
    "search-bar",
    "menu-link",
    "telemarketing",
    "category-menu"
  ]
},

 "logo": {
    "props": {
      "width": 132,
      "height": 32,
      "mobileWidth": 90,
      "mobileHeight": 32
    }
  }
}
Prop nameTypeDescriptionDefault value
titleString!The image alt descriptionVTEX logo
colorStringThe image fill color#F71963
showLabelBooleanSet the label visibilitytrue
widthNumberThe logo image width493
heightNumberThe logo image height177
urlStringThe image url-
hrefStringImage 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