Skip to content

Logo.md

Latest commit

 

History

History
67 lines (52 loc) · 1.81 KB

Logo.md

File metadata and controls

67 lines (52 loc) · 1.81 KB

📢 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 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