The product-images block is responsible for rendering a product image or video.

1. Import the vtex.store-components app to your theme's dependencies in the manifest.json file as in the following example:

  "dependencies": {
    "vtex.store-components": "3.x"
  }

2. Add the product-images block to any child of the store.product template (Product Details Page template). For example:

  "store.product": {
    "children": [
      "flex-layout.row#product",
    ]
  },
  "flex-layout.row#product": {
    "children": [
+     "product-images"
    ]
  },

3. Then, declare the product-images block using the props stated in the Props table. For example:

  "product-images": {
    "props": {
      "displayThumbnailsArrows": true
    }
  },

In this section, we teach you how to use modal zoom, a property for when you want to open a popup containing the product image for zooming. To use this feature, configure your product-images block using the zoomMode and ModalZoom props with open-modal and modal-layout set as its values, respectively.

When configured as stated previously, the zoomMode prop will allow the trigger of a modal for image zooming. In addition to that, the MozalZoom prop will render the block passed in as its value - in this case, mandatorily the modal-layout. In such a way, we become able to configure a modal containing the product image for zooming.

Once both props are correctly configured, you must declare the modal-layout block and the product-images.high-quality-image block as its child.

The modal-layout block is the one responsible for building the Modal component and triggering the image zooming in a popup box. The product-images.high-quality-image block, in turn, is a special block, only meant to render the product-image block inside the modal.

Check out the following example:

{
  "product-images.high-quality-image": {
    "props": {
      "zoomMode": "in-place-click",
      "zoomFactor": 2
    }
  },
  "modal-layout#product-zoom": {
    "children": [
      // you can put any other block inside the modal,
      // this is just a normal modal
      "flex-layout.row#product-name",
      "product-images.high-quality-image"
    ]
  },
  "product-images": {
    "props": {
      "ModalZoom": "modal-layout#product-zoom",
      // to use the ModalZoom, the product-images zoomMode value must be set as open-modal
      "zoomMode": "open-modal",
      "aspectRatio": {
        "desktop": "auto",
        "phone": "16:9"
      }
    }
  }
}

Notice that the product-images.high-quality-image block must be declared as a child of modal-layout and, in addition to that, you can also declare other blocks exported by the Modal Layout app as children.

The following table shows the props allowed by product-images.high-quality-image:

To apply CSS customizations in this and other blocks, follow the Using CSS handles for store customization guide.