Add To List Button

The add-to-list-button block displays a button that allows owners of the list to add products and remove products inside their list.

{"base64":" ","img":{"width":1416,"height":530,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":278444,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-list-addtolistbutton-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 the add-to-list-button block to other theme block using the product context, such as the product-summary.shelf. For example:


_10  "product-summary.shelf": {
_10    "children": [
_10      "product-summary-image",
_10      "flex-layout.row",
_10      "flex-layout.col",
_10+     "add-to-list-button",
_10      "gifted-button"
_10    ]
_10  }

Customization

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

CSS Handles
`addToListButtonText`
`addToListButtonContainer`