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

Configuration
- Import the
vtex.list
app to your theme's peer dependencies in themanifest.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 theproduct-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 |