User Lists

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.

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 the user-lists block to other theme block inside the list context, such as the store.list. For example:


_10  "store.list":{
_10    "children":{
_10      "flex-layout.row"
_10    }
_10  },
_10  "flex-layout.row": {
_10    "children": [
_10+     "user-lists",
_10    ]
_10  }

Props

Prop Name	Type	Description	Default Value
title	string	defines the title of the section	"My lists"
subTitleWithLists	string	Subtitle that will appear when there are lists	"Subtitle with lists"
subtitleWithoutLists	string	Subtitle that will appear when there are no lists	"Subtitle without lists"
useButton	boolean	Optional button to create new lists	true
nameButton	string	Button name to create new lists if used	"Button name"
limit	number	Limit 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`
`listActive`