Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Add To List Button
vtex.list
Version: 3.6.4
Latest version: 3.6.4

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://user-images.githubusercontent.com/67066494/190252744-5a696343-621f-4cef-8821-c9fd452b8bff.gif"}}

Configuration

  1. 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
}

  1. 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
See also
Vtex.list
VTEX IO Apps
VTEX App Store
VTEX IO Apps