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.

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

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

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

  "store.guest": {
    "blocks":[
      "flex-layout.row#breadcrumbs-guest",
      "responsive-layout.desktop#guest",
      "responsive-layout.mobile#guest",
      "flex-layout.col"
    ]
  }

  "flex-layout.col": {
    "children": [
+     "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

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

CSS Handles
eventDateContainer
eventDateText

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