product-summary-image is a block exported by the Product Summary app that renders the product's image.

1. Import the vtex.product-summary app to your theme's dependencies in the manifest.json:

  dependencies: {
    "vtex.product-summary": "2.x"
  }

2. Add the product-summary-image block as a child of the product-summary.shelf block:

{
  "shelf#home": {
    "blocks": ["product-summary.shelf"]
  },
    "product-summary.shelf": {
      "children": [
        "product-summary-name",
        "product-summary-description",
        "product-summary-image",
        "product-summary-price",
        "product-summary-sku-selector",
        "product-summary-buy-button"
      ]
    },

3. Then, declare the product-summary-image and configure its behavior using the props stated below.

    "product-summary-image": {
      "props": {
        "showBadge": true,
        "height": 220
      }
    }
}

Prop name	Type	Description	Default value
showBadge	boolean	Whether a discount badge (if there is any) will be displayed on the product's image (true) or not (false)	true
badgeText	string	Text displayed on the discount badge (in case the badge is configured to be displayed on the image).	undefined
showCollections	boolean	Whether collection badges (if there are any) will be displayed (true) or not (false).	false
displayMode	enum	Defines the Product Summary Image display mode. Possible values are: normal and inline.	normal
placeholder	string	Defines the Product Summary Image placeholder image.	undefined
mainImageLabel	string | object	Matches the value defined in the imageLabel field from the admin's Catalog. Once matched, it defines which product image will be the main image displayed in the Product Summary component.	undefined
hoverImageLabel	string	Text value that matches the value defined in the imageLabel field from the admin's Catalog. Once matched, it defines which product image will be displayed when the user is hovering. If you set a label and no match is found, no image will be displayed during the hover. Caution: Use the hoverImage prop instead.	undefined
hoverImage	object	Defines which criteria should be used to define the hover image according to the product images in the admin's Catalog.	undefined
width	object	Defines the Product Summary Image width.	undefined
height	object	Defines the Product Summary Image height.	undefined
aspectRatio	object	Aspect ratio of the Product Summary Image. It defines whether the image should be displayed in a square, portrait, landscape or in another format. The prop value should follow the common aspect ratio notation, which gives two numbers separated by a colon. For example: 1:1 for a square format or 3:4 for an upright portrait. Note that this prop won't work if you've already configured the width or height props.	undefined
maxHeight	object	Defines the Product Summary Image max height. Note that this prop won't work if you've already configured the width or height props.	undefined

• mainImageLabel object:

• hoverImage object:

• width object:

• height object:

• aspectRatio object:

• maxHeight object:

The width, height, aspectRatio and maxHeight props use the responsive values logic.

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