VTEX Developer Portal

Product Summary Image

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

foto product-summary-imagefoto product-summary-image

Configuration

:warning: The product-summary-image is exported by the Product Summary app. Therefore, in order to configure it as a block, you must first follow the configuration instructions given in the Product Summary main documentation.

{
  "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"
      ]
    },
    "product-summary-image": {
      "props": {
        "showBadge": true,
        "height": 220
      }
    }
}
Prop nameTypeDescriptionDefault value
showBadgebooleanWhether a discount badge (if there is any) will be displayed on the product's image (true) or not (false)true
badgeTextstringText displayed on the discount badge (in case the badge is configured to be displayed on the image).undefined
showCollectionsbooleanWhether collection badges (if there are any) will be displayed (true) or not (false).false
displayModeenumDefines the Product Summary Image display mode. Possible values are: normal and inline.normal
placeholderstringDefines the Product Summary Image placeholder image.undefined
mainImageLabelstring \| objectMatches 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
hoverImageLabelstringhttps://img.shields.io/badge/-Deprecated-redhttps://img.shields.io/badge/-Deprecated-red 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
hoverImageobjectDefines which criteria should be used to define the hover image according to the product images in the admin's Catalog.undefined
widthobjectDefines the Product Summary Image width.undefined
heightobjectDefines the Product Summary Image height.undefined
aspectRatioobjectAspect 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
maxHeightobjectDefines 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:
Prop nameTypeDescriptionDefault value
labelstringText value that 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. If you set a label and no match is found, the main image of the product will be shown instead.undefined
labelMatchCriteriaenumCriteria to define if the image's label searched value should be exactly as provided or if it just needs to contain the substring anywhere in the image's label. Possible values are: exact (finds the image that matches exactly the string filled in label field) and contains (finds the first image that contains the substring filled in label field).exact
  • hoverImage object:
Prop nameTypeDescriptionDefault value
criteriaenumCriteria that should be used to define the hover image according to the product images in the admin's Catalog. Possible values are: label (the hover image will be the one that matches the label value) and index (the hover image should be the one with the same index value).label
labelstringText string to match the desired image's label value. If no match is found, no image will be displayed during the hover. Caution: This prop should only be used when the criteria prop is set as label.undefined
labelMatchCriteriaenumCriteria to define if the image's label searched value should be exactly as provided or if it just needs to contain the substring anywhere in the image's label. Possible values are: exact (finds the image that matches exactly the string filled in label field) and contains (finds the first image that contains the substring filled in label field). Caution: This prop should only be used when the criteria prop is set as label.exact
indexnumberIndex number to match with the desired image's. If no match is found, no image will be displayed during the hover. Caution: This prop should only be used when the criteria prop is set as index.undefined
  • width object:
Prop nameTypeDescriptionDefault value
desktopnumberImage width for desktop users.undefined
mobilenumberImage width for mobile device users.undefined
  • height object:
Prop nameTypeDescriptionDefault value
desktopnumberImage height for desktop users.undefined
mobilenumberImage height for mobile device users.undefined
  • aspectRatio object:
Prop nameTypeDescriptionDefault value
desktopstringImage aspect ratio for desktop users.undefined
mobilestringImage aspect ratio for mobile device users.undefined
  • maxHeight object:
Prop nameTypeDescriptionDefault value
desktopstringImage maximum height for desktop users.undefined
mobilestringImage maximum height for mobile device users.undefined

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

Customization

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

CSS Handles
hoverImage
hoverEffect
imageContainer
imageInline
imageNormal
imageStackContainer
mainImageHovered

Updated about a month ago


Product Summary Image


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.