This page is about version 2.52.3 of the app, which is not the most recent version. The latest stable version is 2.90.2.

ProductSummaryImage is a VTEX Component that renders the product's image. This Component can be imported and used by any VTEX App.

:loudspeaker: Disclaimer: Don't fork this project; use, contribute, or open issue with your feature request.

• Product Summary Image
  • Description
  • Table of Contents
  • Usage
    • Blocks API
    • Configuration
    • Styles API
      • CSS namespaces

You should follow the usage instruction in the main README.

Then, add product-summary-image block into your app theme, as we do in our Product Summary app.

This component has an interface that describes which rules must be implemented by a block when you want to use the ProductSummaryImage.

Through the Storefront, you can change the ProductSummaryImage's behavior and interface. However, you also can make in your theme app.

Prop name	Type	Description	Default value
showBadge	Boolean	Set the discount badge's visibility	true
badgeText	String	Text shown on badge
showCollections	Boolean	Set collection badges' visibility	false
displayMode	Enum	Set display mode of product summary (normal, inline)	normal
hoverImageLabel	String	Set this value to match the value of the imageLabel field of a product image, so this "secondary" image will be showed when user hovers its mouse over this component.	""
mainImageLabel	String	Works the same way as hoverImageLabel but to set the main image to display. If you pass a label and no image has that label, it will show the main image of the product	""
width	[ResponsiveInput<Number>](https://github.com/vtex-apps/responsive-values#vtexresponsive-values)	Sets the image width.	undefined
height	[ResponsiveInput<Number>](https://github.com/vtex-apps/responsive-values#vtexresponsive-values)	Sets the image height.	undefined

This app provides some CSS classes as an API for style customization.

To use this CSS API, you must add the styles builder and create an app styling CSS file.

1. Add the styles builder to your manifest.json:

2. Create a file called vtex.product-summary.css inside the styles/css folder. Add your custom styles:

CSS Handles

CSS Handles	Description	Component Source
imageContainer	The main container of image	index
imageNormal	Class when display mode is normal	index
imageInline	Class when display mode is inline	index
imageStackContainer	Class for container with product images to be shown	index
hoverImage	Class for image that appears when user hovers mouse	index
hoverEffect	Class that applies hover effect and changes images. Override carefully.	index