Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Overview

Basic components












Gift List
Add New Item

The add-new-item block displays a button to direct the list owner to the search page for adding new items to their list.

{"base64":"  ","img":{"width":1416,"height":530,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":226364,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-list-addnewitem-0.gif"}}

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-new-item block to other theme block, such as the responsive-layout.desktop. For example:
"responsive-layout.desktop": { "children": [ + "add-new-item", ] }

Props

Prop NameTypeDescriptionDefault value
linkIconstringIcon for the buttonhttps://vtex.vtexassets.com/assets/vtex/assets-builder/vtex.list-theme/0.11.0/ico_plus_blue___c42684ec58c4f1545ce21a4e355211c8.svg
linkRedirectionstringPath where the user will be redirected on click.(department / category / collection)-
nameButtonstringText at the buttonAdd items
textAlignmentstringText alignment on the button (LEFT / CENTER / RIGHT)CENTER
textPositionstringText position on the button (LEFT / CENTER / RIGHT)CENTER
classesstringAdd new classes-
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Add To Cart Button
Go Back To List
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page