Product Images

Description

ProductImages is a VTEX component that render a set of Image or Video of a product. This Component can be imported and used by any VTEX app.

📢 Disclaimer: Don't fork this project; use, contribute, or open issue with your feature request.

Table of Contents

Usage

You should follow the usage instruction in the main README.

Then, add product-images block into your app theme, as we do in our default store-theme.

Blocks API

When implementing this component as a block, various inner blocks may be available. The following interface lists the available blocks within ProductImages and describes if they are required or optional.

 "product-images":{
   "component": "ProductImages"
 }

For now this block does not have any required or optional blocks.

Layout API

This component accepts props to be configured through storefront or blocks.json

Specification:

Prop nameTypeDescriptionDefault Value
thumbnailsOrientationEnumChoose the orientation of the thumbnails. Set to vertical or horizontalvertical
positionEnumSet the position of the thumbnails(left or right). Only used when thumbnailsOrientation is verticalleft
displayThumbnailsArrowsbooleanDisplays navigation arrows on the thumbnails if there are enough thumbnails for them to scrollfalse
hiddenImagesstringHides images whose labels match the values listed in this prop. Intended to be used along with the product-summary-sku-selector block. You can have more information at the SKUSelector docsskuvariation
aspectRatiostringSets the aspect ratio of the image; that is, whether the image should be square, portrait, landscape, etc. The value should follow the common aspect ratio notation, i.e., two numbers separated by a colon (e.g, "1:1" for square, "3:4" for upright portrait, or even large values such as "1920:1080")"auto"
showNavigationArrowsbooleanControls if the navigation arrows should appeartrue
showPaginationDotsbooleanControls if the pagination dots should appeartrue
thumbnailAspectRatiostringSets the aspect ratio of the thumbnail image; For more information about aspect ratio, check the aspectRatio prop"auto"
thumbnailMaxHeightnumberThe max height for the thumbnail imagetrue
zoomModedisabled\|in-place-click\|in-place-hoverSets the zoom behavior.in-place-click
zoomFactornumberSets how much the zoom increases the image size (e.g. 2 will make the zoomed-in image twice as large)2

Styles API

You should follow the Styles API instruction in the main README.

CSS Namespaces

Below, we describe the namespace that are defined in the ProductImages.

Class nameDescriptionComponent Source
.content (deprecated)Use productImagesContainer insteadindex
.productImagesContainerThe wrapper of Carousel scopeindex
.videoThe wrapper of Video scopeVideo
.imageThe wrapper container to ProductImage componentProductImage
carouselCursorDefaultSpecification that define the default customization for the cursor in Swipe ComponentCarousel
carouselInconCaretRightCustomization to the right caret icon in IconCaret componentCarousel
carouselIconCaretLeftCustomization to the left caret icon in IconCaret componentCarousel
carouselGaleryThumbsThe container of Thumbs areaCarousel
carouselThumbBorderDefine the border of Thumb areaCarousel
carouselGaleryCursorDefine the svg icon that will show when hover the CarouselCarousel
carouselImagePlaceholderDefine the icon that will show when the user wants a custom placeholderImagePlaceholder