The user-lists block displays the lists the user has with their names and privacy information. It has as title and a subtitle and a link button to generate new lists.

imageimage

Configuration

  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"
  }
  1. Add the user-lists block to other theme block inside the list context, such as the store.list. For example:
  "store.list":{
    "children":{
      "flex-layout.row"
    }
  },
  "flex-layout.row": {
    "children": [
+     "user-lists",
    ]
  }

Props

Prop NameTypeDescriptionDefault Value
titlestringdefines the title of the section"My lists"
subTitleWithListsstringSubtitle that will appear when there are lists"Subtitle with lists"
subtitleWithoutListsstringSubtitle that will appear when there are no lists"Subtitle without lists"
useButtonbooleanOptional button to create new liststrue
nameButtonstringButton name to create new lists if used"Button name"
limitnumberLimit of lists a user can create, if useButton is true-

Customization - "user-lists"

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

CSS Handles
userListContainer
userListText

Did this page help you?