Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Basic components
Store Image
Official extension
Version: 0.21.0
Latest version: 0.21.0

{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAFUlEQVR4nGPg4+Mz1Nfjl5T7f2c+AAzxA3lptuDWAAAAAElFTkSuQmCC","img":{"src":"https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square","width":110,"height":20,"type":"svg"}}

The Store Image app exports the list-context.image-list block, which is responsible for the image content in the store theme.

{"base64":"  ","img":{"width":2854,"height":1574,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":555898,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-store-image-0.png"}}

Configurating the store image

  1. Add the store-image app to your theme dependencies in the manifest.json. For example:

_10
"dependencies ": {
_10
+ "vtex.store-image": "0.x"
_10
}

You can now use the list-context.image-list block exported by the Store Image app. The block allows you to display images in your store with more composability since you can use it along with other list-context blocks to create a more flexible and customizable image slider.

  1. In any desired theme template, add the list-context.image-list block, declaring the slider-layout a child block. For example:

_30
"list-context.image-list#demo": {
_30
"children": ["slider-layout#demo-images"],
_30
"props": {
_30
"preload": true,
_30
"height": 650,
_30
"images": [
_30
{
_30
"loading": "eager",
_30
"image": "https://storecomponents.vteximg.com.br/arquivos/banner-infocard2.png",
_30
"description": "something something"
_30
},
_30
{
_30
"loading": "lazy",
_30
"image": "https://storecomponents.vteximg.com.br/assets/vtex.file-manager-graphql/images/Group%207%20(1)%20(1)%20(1)%20(1)%20(1)___c6b3ed853fb16a08b265753b50e0c57a.png",
_30
"description": "something something"
_30
}
_30
]
_30
}
_30
},
_30
_30
"slider-layout#demo-images": {
_30
"props": {
_30
"itemsPerPage": {
_30
"desktop": 1,
_30
"tablet": 1,
_30
"phone": 1
_30
},
_30
"infinite": true
_30
}
_30
},

Note that the slider-layout block exported from the Slider Layout app is a child block of list-context.image-list. It defines which images will be displayed and their behavior when rendered.

list-context.image-list props

Prop nameTypeDescriptionDefault value
imagesarrayArray of objects declaring all the images to be rendered.undefined
heightnumberImage height for all images declared in the image object (in px).undefined
preloadbooleanPreloads the first image in a list, prioritizing the image display over other assets.false
experimentalSetExplicitDimensionsbooleanSets explicit width and/or height attributes for an image, if width and/or height props are provided in px.

image-list props

Prop nameTypeDescriptionDefault value
imagesarrayArray of objects declaring all the images to be rendered.undefined
heightnumberImage height for all images declared in the image object (in px).undefined
  • images array:
Prop nameTypeDescriptionDefault value
imagestringImage URL.undefined
mobileImagestringMobile image URL.undefined
descriptionstringImage description.undefined
linkobjectLinks an URL to the image being rendered.undefined
widthstring / numberImage width (in % or px).100%
loadingstringLoading strategy, either when the page loads ('eager') or when closer to the viewport ('lazy')'eager'
fetchprioritystringThe fetch priority hint ('high', 'low' or 'auto')'auto'
analyticsPropertiesstringWhether analytics props should be set ('provided') or not ('none')'none'
promotionIdstringThe ID of the promotion associated with the event.undefined
promotionNamestringThe name of the promotion associated with the event.undefined
promotionPositionstringThe name of the promotional creative slot associated with the event.undefined
promotionProductIdstringThe ID of the product associated with the event.undefined
promotionProductNamestringThe name of the product associated with the event.undefined
  • link object:
Prop nameTypeDescriptionDefault value
urlstringURL users will be redirected when clicking the image.undefined
noFollowbooleanWhether the page owner endorses the linked URL the user was navigating on, i.e., if there is a commercial relationship between both pages (true) or (false).false
openNewTabstringWhether a new tab will be opened on the browser (true) or (false).undefined
titlestringText label used to identify the image in the Admin Site Editor.undefined

Use the Admin Site Editor to manage all images declared in the list-context.image-list block.

Customization

The block still does not have CSS handles for its specific customization.

All CSS handles available for the Image block are available for the slider-layout block. Take a look at the Customization section in the Slider Layout documentation. Note that the image-slider uses our vtex.slider-layout app, so all the CSS namespaces defined by it are also available for image-slider. See more in Slider Layout.

See also
VTEX App Store
VTEX IO Apps