This page is about version 2.58.4 of the app, which is not the most recent version. The latest stable version is 2.90.4.
product-summary-image is a block exported by the Product Summary app that renders the product's 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.
_21 "blocks": ["product-summary.shelf"]
_21 "product-summary.shelf": {
_21 "product-summary-name",
_21 "product-summary-description",
_21 "product-summary-image",
_21 "product-summary-price",
_21 "product-summary-sku-selector",
_21 "product-summary-buy-button"
_21 "product-summary-image": {
| 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 |
mainImageLabel | 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 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 |
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. | 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 |
| Prop name | Type | Description | Default value |
|---|
desktop | number | Image width for desktop users. | undefined |
mobile | number | Image width for mobile device users. | undefined |
| Prop name | Type | Description | Default value |
|---|
desktop | number | Image height for desktop users. | undefined |
mobile | number | Image height for mobile device users. | undefined |
| Prop name | Type | Description | Default value |
|---|
desktop | number | Image aspect ratio for desktop users. | undefined |
mobile | number | Image aspect ratio for mobile device users. | undefined |
| Prop name | Type | Description | Default value |
|---|
desktop | number | Image maximum height for desktop users. | undefined |
mobile | number | Image 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 |
|---|
imageContainer |
imageNormal |
imageInline |
imageStackContainer |
hoverImage |
hoverEffect |
