Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Product Brand
vtex.store-components
Version: 3.119.6
Latest version: 3.178.1

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

The ProductBrand is a VTEX block that displays either the name or the logo of a product's brand.

{"base64":"  ","img":{"width":2854,"height":1578,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":661337,"url":"https://user-images.githubusercontent.com/52087100/70259346-bb081f80-176c-11ea-84db-5785c45829ce.png"}}

Configuration

  1. Import the vtex.product-summary app to your theme's dependencies in the manifest.json, for example:

_10
"dependencies: {
_10
"vtex.product-summary": "2.x"
_10
}

  1. Add the product-brand block to any block below store.product(Product template). For example:

_15
"store.product": {
_15
"children": [
_15
"flex-layout.row#product",
_15
]
_15
},
_15
"flex-layout.row#product": {
_15
"children": [
_15
"product-brand"
_15
]
_15
},
_15
"product-brand": {
_15
"props": {
_15
"displayMode": "text"
_15
}
_15
},

Configuration

Prop nameTypeDescription
displayModeStringYou should choose between logo or text. This will define if the product brand will be displayed by name or logo.
fallbackToTextBooleanThis prop should only be used when displayMode is set to logo. It defines what should be done when the Product Brand was set to display a brand logo but no image was registered in the VTEX admin's Catalog. This prop is set as true by default, allowing the logo to be replaced with the brand name in those scenarios. When set as false, the store will not show the brand name instead of the brand logo.
heightNumberIt sets the logo height. It should only be used when displayMode is set to logo.
excludeBrandsArrayThe brand names or brand IDs listed in the array will never be displayed by the Brand component. It is usually useful to hide default or test brand names/logos on the store front.
logoWithLinkbooleanIf the brand logo will have a link that leads to the store's brand page (true) ou not (false)
brandNameStringThe brand name. If this value is not passed, it will be obtained through the product context.
brandIdNumberThe brand id. If this value is not passed, it will be obtained through the product context.

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.

See also
Vtex.store Components
VTEX IO Apps
VTEX App Store
VTEX IO Apps