Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Gallery List Items
vtex.list
Version: 3.6.4
Latest version: 3.6.4

The gallery.list-items block displays the gallery with the products contained in a list.

{"base64":"  ","img":{"width":1712,"height":666,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":247596,"url":"https://user-images.githubusercontent.com/67066494/190452468-67390e5d-424a-4c3e-85d3-d25439ae9094.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 gallery.list-items block to other theme block inside the list context, such as the store.list. For example:

_11
"store.list":{
_11
"children":{
_11
"flex-layout.row"
_11
}
_11
},
_11
_11
"flex-layout.row": {
_11
"children": [
_11
+ "gallery.list-items",
_11
]
_11
}

Props

Prop NameTypeDescriptionDefault value
emptyListIconstringName for the button-
emptyListTextstringText for empty lists" Your list is empty \n Add items right now "
buttonEmptyListbooleanIf set to true adds a button for adding items at an empty listtrue
nameButtonEmptyListstringName of the button in case the prop buttonEmptyList is true"Add Items"
emptyTextAlignmentstringAlign the text of the button (RIGHT / CENTER / LEFT)CENTER
emptyTextPositionstringAlign the position of the text at button (RIGHT / CENTER / LEFT)CENTER
linkButtonEmptyListstringThe redirect link for the button (department / category / collection)-
linkIconButtonEmptyListstringLink for the icon of an empty list-
limitnumberAt a guest context if wants to add a button to create a list and set a maximum limit of lists for creation per user-
See also
Vtex.list
VTEX IO Apps
VTEX App Store
VTEX IO Apps