Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Product Summary Image
vtex.product-summary
Version: 2.90.2
Latest version: 2.90.2

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

{"base64":"  ","img":{"width":2878,"height":1504,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":674472,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-product-summary-productsummaryimage-0.png"}}

Configuration

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

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

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

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

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

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

Prop nameTypeDescriptionDefault value
showBadgebooleanDetermines whether a discount badge is displayed on the product image. Setting it to true displays the badge if applicable, while false hides it.true
badgeTextstringSpecify the text to be displayed on the discount badge (if the badge is configured to be shown in the product image).undefined
showCollectionsboolean
{"base64":"  ","img":{"width":73,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/-Deprecated-red"}}
Determines whether collection badges, if available, will be displayed (true) or not (false).

This prop is deprecated. Use the [Product Highlights] component instead.
false
displayModeenumDefines the Product Summary Image display mode. Possible values are: normal and inline.normal
placeholderstringDefines the Product Summary Image placeholder image.undefined
mainImageLabelstringMatches the value defined in the imageLabel field from the Admin Catalog. When matched, it determines which product image will be used as the main image displayed in the Product Summary component.undefined
hoverImageLabelstring
{"base64":"  ","img":{"width":73,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/-Deprecated-red"}}
Text value that matches the value defined in the imageLabel field from the Admin Catalog. When matched, it determines which product image will be displayed when the user hovers over the product. If you set a label and no match is found, no image will be displayed during hover.

This prop is deprecated. Use the hoverImage prop instead.
undefined
hoverImageobjectDefines the criteria that should determine the hover image based on the product images in the Admin Catalog.undefined
widthobjectDefines the Product Summary Image width.undefined
heightobjectDefines the Product Summary Image height.undefined
aspectRatioobjectDefines the aspect ratio of the Product Summary Image, determining whether the image should be displayed in a square, portrait, landscape, or another format. The prop value should follow the standard aspect ratio notation, which consists of two numbers separated by a colon. For example, you can use 1:1 for a square format or 3:4 for an upright portrait. This prop will not work if the width or height props are configured.undefined
maxHeightobjectSets the maximum height for the Product Summary Image. This prop will only work if the width or height props are configured.undefined
fetchprioritystringSets the fetch priority hint to ('high', 'low', 'auto', or 'byPosition'). Choose 'byPosition' to adjust the image fetch priority based on its rendering position within search results or lists. This prioritization optimizes performance by ensuring images are fetched based on their relevance in the context.'byPosition'
  • mainImageLabel object:
Prop nameTypeDescriptionDefault value
labelstringMatches the text value with the value defined in the imageLabel field from the Admin Catalog. When matched, it determines which product image will be displayed as the main image 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
labelMatchCriteriaenumSpecifies the criteria for searching the image label value. It determines whether the image label should match exactly as provided or if it just needs to contain the substring anywhere in the image label. Possible values are: exact (finds the image that matches exactly the string entered in the label field) and contains (finds the first image that includes the substring entered in the label field).exact
  • hoverImage object:
Prop nameTypeDescriptionDefault value
criteriaenumDefines the criteria that should determine the hover image based on the product images from the Admin Catalog. Possible values are: label (the hover image will be the one that matches the label value) and index (the hover image will be the one with the same index value).label
labelstringDetermines the text string to match the desired image's label value. No image will be displayed during the hover if no match is found. Caution: This prop should only be used when the criteria prop is set to label.undefined
labelMatchCriteriaenumDefines the criteria for searching the image label value, determining whether the image label should match exactly as provided or just need to contain the substring anywhere in the image label. Possible values are: exact (finds the image that matches exactly the string entered the label field) and contains (finds the first image that includes the substring entered the label field). This prop should only be used when the criteria prop is set to label.exact
indexnumberIndex number to match with the desired images. No image will be displayed during hover if no match is found. This prop should only be used when the criteria prop is set to index.undefined
  • width object:
Prop nameTypeDescriptionDefault value
desktopnumberImage width for desktop users.undefined
mobilenumberImage width for mobile users.undefined
  • height object:
Prop nameTypeDescriptionDefault value
desktopnumberImage height for desktop users.undefined
mobilenumberImage height for mobile users.undefined
  • aspectRatio object:
Prop nameTypeDescriptionDefault value
desktopstringImage aspect ratio for desktop users.undefined
mobilestringImage aspect ratio for mobile users.undefined
  • maxHeight object:
Prop nameTypeDescriptionDefault value
desktopstringImage maximum height for desktop users.undefined
mobilestringImage maximum height for mobile users.undefined

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

Customization

To apply CSS customizations to this and other blocks, please see the Using CSS handles for store customization guide.

CSS handles
hoverImage
hoverEffect
imageContainer
imageInline
imageNormal
imageStackContainer
mainImageHovered
See also
Vtex.product Summary
VTEX IO Apps
VTEX App Store
VTEX IO Apps