The search-list block displays a search box for public lists according to the name of the owner of the list or the name of the list.

SearchListSearchList

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 search-list block to other theme block, such as the flex-layout.col. For example:
  "flex-layout.col": {
    "children": [
+     "search-list",
    ]
  }

Props

Prop NameTypeDescriptionDefault value
titlestringTitle for the search bar" Find a list "
subtitlestringSubtitle for the search bar" Find public lists by typing the name of the list or owners "
placeholderstringPlaceholder inside the search bar" Name of list or owners "
buttonbooleanAdd buttons to create list and my lists above the search barfalse

Customization

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

CSS Handles
shareListContainer
shareListIcon
shareListNotification

Did this page help you?