List Info

The list information is made up of three blocks list-info.name , list-info.event-date and list-info.owner and each one represents a type of information associated with the list, which are the name of the list, date of the event and name of the owner of the list respectively.

{"base64":" ","img":{"width":1712,"height":666,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":85975,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-list-listinfo-0.gif"}}

Configuration

Import the vtex.list app to your theme's peer dependencies in the manifest.json file as in the following example:


_10  "peerDependencies": {
_10    "vtex.list": "3.x"
_10  }

Add any list-info block to other theme block using a list context, such as the store.guest. For example:


_14  "store.guest": {
_14    "blocks":[
_14      "flex-layout.row#breadcrumbs-guest",
_14      "responsive-layout.desktop#guest",
_14      "responsive-layout.mobile#guest",
_14      "flex-layout.col"
_14    ]
_14  }
_14
_14  "flex-layout.col": {
_14    "children": [
_14+     "list-info.name",
_14    ]
_14  }

Customization - "list-info.name"

To apply CSS customizations in this and other blocks, follow the Using CSS handles for store customization guide.

CSS Handles
`listName`
`listNameText`

Customization - "list-info.event-date"

To apply CSS customizations in this and other blocks, follow the Using CSS handles for store customization guide.

CSS Handles
`eventDateContainer`
`eventDateText`

Customization - "list-info.owner"

To apply CSS customizations in this and other blocks, follow the Using CSS handles for store customization guide.

CSS Handles
`ownersContainer`
`ownersParagraph`
`ownerNameText`
`divisorText`
`otherNameText`