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

AddToListButtonAddToListButton

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 add-to-list-button block to other theme block using the product context, such as the product-summary.shelf. For example:
  "product-summary.shelf": {
    "children": [
      "product-summary-image",
      "flex-layout.row",
      "flex-layout.col",
+     "add-to-list-button",
      "gifted-button"
    ]
  }

Customization

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

CSS Handles
addToListButtonText
addToListButtonContainer

Did this page help you?