📢 Use this project, contribute to it or open issues to help evolve it using Store Discussion.

Product Images

ProductImages is a VTEX block responsible for rendering a product image or video.

image

Configuration

  1. Import the vtex.store-component app to your theme's dependencies in the manifest.json;
  "dependencies": {
    "vtex.store-components": "3.x"
  }
  1. Add the product-images block to any block below store.product (Product template). For example:
  "store.product": {
    "children": [
      "flex-layout.row#product",
    ]
  },
  "flex-layout.row#product": {
    "children": [
      "product-images"
    ]
  },
  "product-images": {
    "props": {
      "displayThumbnailsArrows": true
    }
  },
Prop nameTypeDescriptionDefault Value
thumbnailsOrientationEnumChoose the orientation of the thumbnails. Can be 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 media (if there are enough thumbnails for them to scroll)false
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 SKU Selector documentationskuvariation
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 such as 1:1 for square, 3:4 for upright portrait, or 1920:1080 for even large values)"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

Customization

In order to apply CSS customizations on this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.

CSS Handles
productImagesContainer (content is deprecated)
carouselContainer
productImagesThumbsSwiperContainer
productImagesGallerySwiperContainer
productImagesGallerySlide
swiperCaret
productImagesThumbCaret
productImageTag
video
videoContainer
productVideo
figure
thumbImg
video
image
productImagesThumb
productImagesThumbActive
carouselCursorDefault
carouselInconCaretRight
carouselIconCaretLeft
carouselGaleryThumbs
carouselThumbBorder
carouselGaleryCursor
carouselImagePlaceholder