### Configure product-summary.shelf with detailed product information

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/README.md

This example shows how to populate the `product-summary.shelf` with various child blocks, such as name, description, image, price, SKU selector, and buy button, to create a rich product summary display.

```JSON
{
  "list-context.product-list": {
    "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"
    ]
  }
}
```

--------------------------------

### Example Product Specification Groups Data Structure

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummarySpecificationBadges.md

Illustrates the structure of the `specificationGroups` array, which defines product specifications and their values. This data is used as input for the `product-specification-badges` component.

```javascript
// specificationGroups array
[
    {
      name: 'Group',
      specifications: [
        {
          name: 'On Sale',
          values: ['True']
        }
      ]
    },
    {
      name: 'Group 2',
      specifications: [
        {
          name: 'Demo',
          values: ['True']
        },
        {
          name: 'PromoExclusion',
          values: ['1']
        }
      ]
    },
    {
      name: 'allSpecifications',
      specifications: [
        {
          name: 'On Sale',
          values: ['True']
        },
        {
          name: 'Demo',
          values: ['True']
        },
        {
          name: 'PromoExclusion',
          values: ['1']
        }
      ]
    }
  ]
```

--------------------------------

### Configure Product Summary Buy Button Block Properties

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummaryBuyButton.md

Declare the `product-summary-buy-button` block and configure its behavior using specific props. This example shows how to set `isOneClickBuy` to `false`.

```json
{
  "product-summary-buy-button": {
    "props": {
      "isOneClickBuy": false
    }
  }
}
```

--------------------------------

### ProductSummaryPrice Block Properties

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummaryPrice.md

Configuration properties for the `product-summary-price` block, allowing control over price display, installments, discounts, and labels.

```APIDOC
ProductSummaryPrice Props:
  showListPrice: Boolean
    Description: Shows the product list price
    Default: true
  showInstallments: Boolean
    Description: Set installments' visibility
    Default: true
  showDiscountValue: Boolean
    Description: Set discount value's visibility
    Default: false
  showLabels: Boolean
    Description: Set pricing labels' visibility
    Default: true
  labelSellingPrice: String
    Description: Text of selling price's label
    Default: ""
  labelListPrice: String
    Description: Text of list price's label
    Default: ""
  showBorders: Boolean
    Description: Set product's borders visibility
    Default: false
  showListPriceRange: Boolean
    Description: Set if you want to see list price as range (lowest - highest) when available
    Default: false
  showSellingPriceRange: Boolean
    Description: Set if you want to see selling price as range (lowest - highest) when available
    Default: false
```

--------------------------------

### Add product-summary-brand block to product-summary.shelf

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummaryBrand.md

Integrate the `product-summary-brand` block into your store theme by adding it as a child of the `product-summary.shelf` block. This example demonstrates the necessary addition within the `children` array.

```json
   "product-summary.shelf": {
    "children": [
      "product-summary-image",
      "product-summary-name",
+     "product-summary-brand",
      "product-summary-attachment-list",
      "product-summary-space",
      "product-summary-column#1"
    ]
  }

```

--------------------------------

### Add Product Summary Image Block to Shelf

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummaryImage.md

Demonstrates how to integrate the `product-summary-image` block as a child within the `product-summary.shelf` block in your theme's JSON configuration. This setup ensures the product image is displayed correctly within product listings.

```json
{
  "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"
      ]
    },
```

--------------------------------

### InstallmentCriteriaEnum Definition

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummaryList.md

Specifies the criteria for displaying installment options for products, allowing selection between the maximum installment without interest or the maximum installment with or without interest.

```APIDOC
InstallmentCriteriaEnum:
  MAX_WITHOUT_INTEREST:
    Value: MAX_WITHOUT_INTEREST
    Description: Displays the maximum installment option with no interest.
  MAX_WITH_INTEREST:
    Value: MAX_WITH_INTEREST
    Description: Displays the maximum installment option with or without interest.
```

--------------------------------

### Configure Product Summary SKU Selector Props in VTEX IO

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummarySKUSelector.md

This snippet shows how to declare the `product-summary-sku-selector` block and configure its properties. The available props are the same as those for the general SKU Selector component. For example, `showVariationsLabels` can be set to `false`.

```JSON
"product-summary-sku-selector": {
   "props":{
     "showVariationsLabels": ["false"]
   }
 }
```

--------------------------------

### Product Specification Groups with Custom Value Example

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummarySpecificationBadges.md

An updated `specificationGroups` array showing a custom value ('My Cool Value') for the 'Demo' specification. This modified data is used to illustrate displaying specification values.

```javascript
// specificationGroups array
[
    {
      name: 'Group',
      specifications: [
        {
          name: 'On Sale',
          values: ['True']
        }
      ]
    },
    {
      name: 'Group 2',
      specifications: [
        {
          name: 'Demo',
          values: ['True']
        },
        {
          name: 'PromoExclusion',
          values: ['1']
        }
      ]
    },
    {
      name: 'allSpecifications',
      specifications: [
        {
          name: 'On Sale',
          values: ['True']
        },
        {
          name: 'Demo',
          values: ['My Cool Value']
        },
        {
          name: 'PromoExclusion',
          values: ['1']
        }
      ]
    }
  ]
```

--------------------------------

### Add VTEX Product Summary App Dependency

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/README.md

Instructions to import the `vtex.product-summary` app into the theme's `manifest.json` file to enable its blocks and functionalities.

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

--------------------------------

### Importing Product Summary App Dependency

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummaryDescription.md

To use the Product Summary Description block, you must first import the `vtex.product-summary` app into your theme's `manifest.json` dependencies. This ensures the necessary components are available for your store theme.

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

--------------------------------

### Import Product Summary app dependency

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummaryShelf.md

To use the Product Summary Shelf, import the `vtex.product-summary` app into your theme's `manifest.json` dependencies.

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

--------------------------------

### Configure Product Summary App Dependency

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummaryPrice.md

To use the `product-summary-price` block, you must first import the `vtex.product-summary` app to your theme's `manifest.json` dependencies.

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

--------------------------------

### VTEX Product Summary App Blocks Reference

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/README.md

A comprehensive list of blocks exported by the `vtex.product-summary` app, detailing their purpose and usage within a VTEX storefront.

```APIDOC
Block: `list-context.product-list`
  Description: Renders the list of products in the Product Summary component. It fetches product information and provides it to the `product-summary.shelf` block. Then, this block provides its child blocks with the product information.

Block: `product-summary.shelf`
  Description: Logical block that provides the needed structure for the Product Summary component through its child blocks (listed below).

Block: `product-summary-attachment-list`
  Description: Renders a list for product attachments.

Block: `product-summary-brand`
  Description: Renders the product brand.

Block: `product-summary-buy-button`
  Description: Renders the Buy button. This block must only be configured if your store uses the [Minicart v1](https://github.com/vtex-apps/minicart/blob/383d7bbd3295f06d1b5854a0add561a872e1515c/docs/README.md). If your store uses the [Minicart v2](https://developers.vtex.com/docs/guides/vtex-minicart), please configure the [**Add to Cart button**](https://developers.vtex.com/docs/guides/vtex-add-to-cart-button) instead.

Block: `product-summary-description`
  Description: Renders the product description.
```

--------------------------------

### Configure Product Summary App Dependency

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummaryImage.md

Explains how to import the `vtex.product-summary` app into your theme's `manifest.json` file. This step is crucial for making the product summary functionalities available in your VTEX store.

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

--------------------------------

### Add Product Summary App Dependency to manifest.json

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummaryBuyButton.md

To use the Product Summary Buy Button, import the `vtex.product-summary` app to your theme's dependencies in the `manifest.json` file. This ensures the necessary components are available for your store's theme.

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

--------------------------------

### Product Summary UI Blocks Reference

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/README.md

A comprehensive reference for the available UI blocks within the VTEX Product Summary app, detailing their purpose and usage.

```APIDOC
product-summary-image:
  description: Renders the product image.
product-summary-name:
  description: Renders the product name.
product-summary-sku-name:
  description: Renders the selected SKU name.
product-summary-price:
  description: Renders the product price. Deprecated in favor of the Product Price app.
product-summary-sku-selector:
  description: Renders the SKU Selector block.
product-specification-badges:
  description: Renders badges based on product specifications.
```

--------------------------------

### Product Summary Buy Button Component Props Reference

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummaryBuyButton.md

Detailed API documentation for the `product-summary-buy-button` component's configurable properties. This table outlines each prop's name, type, description, and default value, allowing for fine-grained control over the buy button's behavior and appearance.

```APIDOC
product-summary-buy-button Props:
  isOneClickBuy:
    Type: boolean
    Description: Whether the user should be redirected to Checkout after clicking on the Buy Button (`true`) or not (`false`).
    Default: false
  buyButtonText:
    Type: string
    Description: Custom text that overwrites the default Buy Button text.
    Default: undefined
  displayBuyButton:
    Type: enum
    Description: Sets the Buy Button display mode. Possible values are: `displayButtonAlways` (it will always be displayed), `displayButtonHover` (only displayed on hover), or `displayButtonNone` (it will be hidden for users).
    Default: displayButtonAlways
  customToastURL:
    Type: string
    Description: Defines a redirect link to the Toast displayed when an item is added to your cart.
    Default: /checkout/#/cart
  buyButtonBehavior:
    Type: enum
    Description: Sets the Buy Button behavior when it is clicked on. Possible values are: `alwaysGoToProduct` (redirect users to the product page), `default` (redirect users to the minicart), or `alwaysAddToTheCart` (add the selected SKU to the minicart). When choosing this last option, be careful: use it only if there are SKU Selectors for each product variation. This way, users can properly select their desired SKU.
    Default: default
```

--------------------------------

### Configure Product Summary Image Block Properties

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummaryImage.md

Illustrates how to declare and configure the `product-summary-image` block with specific properties like `showBadge` and `height`. These properties control the visual behavior and appearance of the product image.

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

--------------------------------

### Configure Product List Block with Product Summary Shelf

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummaryList.md

Demonstrates how to configure `product-summary.shelf` to define the structure of a product summary and how `list-context.product-list` uses this shelf and children to render a product list, typically within a slider layout.

```json
  "product-summary.shelf#demo1": {
    "children": [
      "stack-layout#prodsum",
      "product-summary-name",
      "product-rating-inline",
      "product-summary-space",
      "product-summary-price",
      "product-summary-buy-button"
    ]
  },
  "list-context.product-list#demo1": {
    "blocks": ["product-summary.shelf#demo1"],
    "children": ["slider-layout#demo-products"]
  },
```

--------------------------------

### Declare Product Summary Shelf with child blocks

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummaryShelf.md

Define the `product-summary.shelf` block and specify its child blocks, such as image, name, rating, price, and buy button, to construct the Product Summary component.

```json
{
 "product-summary.shelf": {
    "children": [
      "product-summary-image",
      "product-summary-name",
      "product-rating-inline",
      "product-summary-space",
      "product-summary-price",
      "product-summary-buy-button"
    ]
 }
}
```

--------------------------------

### Add Product Summary App Dependency to manifest.json

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummaryAttachmentList.md

To use the Product Summary Attachment List, import the `vtex.product-summary` app to your theme's dependencies in the `manifest.json` file.

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

--------------------------------

### Import Product Summary App Dependency in manifest.json

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummarySKUName.md

To use the Product Summary SKU Name block, add the `vtex.product-summary` app to your theme's `manifest.json` dependencies. This ensures the necessary components are available for your store theme.

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

--------------------------------

### Displaying Badges Using 'specificationsOptions' Prop

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummarySpecificationBadges.md

Demonstrates an alternative configuration using the `specificationsOptions` prop to explicitly define which specifications to display. This achieves a similar result to using `visibleWhen` but offers more granular control.

```json
  "product-specification-badges": {
    "props": {
      "specificationGroupName": "allSpecifications",
      "specificationsOptions": [{
        "specificationName": "On Sale",
        "displayValue": "SPECIFICATION_NAME",
        "visibleWhen": "True"
      },
      {
        "specificationName": "Demo",
        "displayValue": "SPECIFICATION_NAME",
        "visibleWhen": "True"
      }]
    }
  }
```

--------------------------------

### Adding Product Summary Description Block to Product Summary Shelf

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummaryDescription.md

After importing the dependency, add the `product-summary-description` block as a child of `product-summary.shelf` in your store theme's configuration. This integrates the description block into the product summary layout.

```json
   "product-summary.shelf": {
    "children": [
      "product-summary-image",
      "product-summary-name",
+     "product-summary-description",
      "product-summary-attachment-list",
      "product-summary-space",
      "product-summary-column#1"
    ]
  },
```

--------------------------------

### Declare product-summary.shelf in product list context

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/README.md

This snippet demonstrates how to add the `product-summary.shelf` block to the `list-context.product-list` block, enabling the display of product summaries within a product list.

```JSON
{
  "list-context.product-list": {
    "blocks": ["product-summary.shelf"]
  }
}
```

--------------------------------

### Add Product Summary Attachment List Block to Shelf

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummaryAttachmentList.md

Integrate the `product-summary-attachment-list` block into a store template as a child of the `product-summary.shelf` block to display attachment options.

```JSON
   "product-summary.shelf": {
    "children": [
      "product-summary-image",
      "product-summary-name",
      "product-summary-sku-name",
+     "product-summary-attachment-list",
      "product-summary-space",
      "product-summary-column#1"
    ]
  },
```

--------------------------------

### Main Image Label Object Properties

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummaryImage.md

Properties for configuring the `mainImageLabel` object, used to specify the main product image based on Admin Catalog labels. This allows for dynamic image selection.

```APIDOC
mainImageLabel object:
  - label: string
    Description: Matches 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.
    Default: `undefined`
```

--------------------------------

### Product Summary Shelf Properties

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummaryShelf.md

Configuration properties for the `product-summary.shelf` block, controlling behavior such as price fetching, list name tracking, and sponsored badge display.

```APIDOC
product-summary.shelf properties:
  priceBehavior:
    Type: enum
    Description: Determines whether the component should fetch the most up-to-date price (`async`) or (`default`). Remember to configure the Search Result's `simulationBehavior` prop to `skip` and use the Product Price `product-price-suspense` block to render a loading spinner while the price information is being fetched.
    Default: default
  trackListName:
    Type: boolean
    Description: Determines whether the component should send the list name to the product page when the product summary is clicked. Disabling it will prevent the `productDetail` GTM event sent on the PDP to identify from which list the user navigated.
    Default: true
  sponsoredBadgeLabel:
    Type: String
    Description: The text of the "Sponsored" tag, if applicable.
    Default: "store/sponsored-badge.label"
  sponsoredBadgePosition:
    Type: enum
    Description: The position of the "Sponsored" tag, if applicable. Possible values are `titleTop`, `containerTopLeft` and `none`.
    Default: "containerTopLeft"
```

--------------------------------

### Available CSS Handles for Product Summary Component

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/README.md

This section lists the CSS handles provided by the `product-summary` component. Developers can use these handles to apply custom CSS styles and override default appearances, enabling granular control over the component's visual presentation.

```APIDOC
CSS Handles:
- aspectRatio
- buyButton
- buyButtonContainer
- clearLink
- column
- container
- containerNormal
- containerSmall
- containerInline
- description
- element
- image
- imageContainer
- imagePlaceholder
- information
- isHidden
- nameContainer
- priceContainer
- quantityStepperContainer
- spacer
```

--------------------------------

### Add Product Summary Shelf to product list context

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummaryShelf.md

Integrate the `product-summary.shelf` block as a child of the `list-context.product-list` block to display product summaries within a product list.

```json
   "list-context.product-list": {
     "blocks": ["product-summary.shelf"]
   }
```

--------------------------------

### Integrating Product Specification Badges with Stack Layout

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummarySpecificationBadges.md

Illustrates how to use `product-specification-badges` within a `stack-layout` to overlay badges on top of product images. This demonstrates a common UI pattern for displaying product attributes.

```json
  "stack-layout": {
    "children": [
      "product-images",
      "product-specification-badges"
    ]
  },

  "product-specification-badges": {
    "props": {
      "specificationGroupName": "allSpecifications",
      "displayValue": "SPECIFICATION_NAME",
      "specificationName": "On Sale",
      "visibleWhen": "True"
    }
  },
  "flex-layout.row#product-image": {
    "children": ["product-images"]
  }
```

--------------------------------

### Add Product Summary app dependency to manifest.json

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummaryBrand.md

To enable the Product Summary Brand block, you must first import the `vtex.product-summary` app by adding it to your theme's dependencies in the `manifest.json` file.

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

--------------------------------

### Product Summary Image Component Properties

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummaryImage.md

Reference for configurable properties of the `product-summary-image` component, including type, description, and default values. These properties allow customization of image display, badges, and hover effects.

```APIDOC
product-summary-image props:
  - showBadge: boolean
    Description: Determines whether a discount badge is displayed on the product image. Setting it to `true` displays the badge if applicable, while `false` hides it.
    Default: `true`
  - badgeText: string
    Description: Specify the text to be displayed on the discount badge (if the badge is configured to be shown in the product image).
    Default: `undefined`
  - showCollections: boolean (Deprecated)
    Description: Determines whether collection badges, if available, will be displayed (`true`) or not (`false`). Use the [Product Highlights] component instead.
    Default: `false`
  - displayMode: enum
    Description: Defines the Product Summary Image display mode. Possible values are: `normal` and `inline`.
    Default: `normal`
  - placeholder: string
    Description: Defines the Product Summary Image placeholder image.
    Default: `undefined`
  - mainImageLabel: string
    Description: Matches 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.
    Default: `undefined`
  - hoverImageLabel: string (Deprecated)
    Description: 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. Use the `hoverImage` prop instead.
    Default: `undefined`
  - hoverImage: object
    Description: Defines the criteria that should determine the hover image based on the product images in the Admin Catalog.
    Default: `undefined`
  - width: object
    Description: Defines the Product Summary Image width.
    Default: `undefined`
  - height: object
    Description: Defines the Product Summary Image height.
    Default: `undefined`
  - aspectRatio: object
    Description: Defines 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](https://en.wikipedia.org/wiki/Aspect_ratio_(image)), 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.
    Default: `undefined`
  - maxHeight: object
    Description: Sets the maximum height for the Product Summary Image. This prop will only work if the `width` or `height` props are configured.
    Default: `undefined`
  - fetchpriority: string
    Description: Sets 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.
    Default: `'byPosition'`
```

--------------------------------

### ProductSummaryPrice CSS Handles

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummaryPrice.md

CSS handles available for customizing the appearance of the `product-summary-price` block.

```APIDOC
CSS Handles:
  priceContainer
  productPriceClass
  listPriceContainer
  listPriceLabel
  listPrice
  sellingPriceContainer
  sellingPriceLabel
  sellingPrice
  savingsContainer
  savings
  interestRate
  installmentContainer
  listPriceRange
  sellingPriceRange
  priceLoading
```

--------------------------------

### list-context.product-list Component Props Reference

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummaryList.md

Details the available properties for the `list-context.product-list` component, including their types, descriptions, and default values, which control how product lists are fetched and displayed.

```APIDOC
Component: list-context.product-list
  Props:
    category:
      Type: string
      Description: Category ID of the listed items. For subcategories, use "/" (example: "1/2/3").
      Default: -
    specificationFilters:
      Type: Array({ id: String, value: String })
      Description: Specification filters of the listed items.
      Default: []
    collection:
      Type: string
      Description: Filter by collection.
      Default: -
    orderBy:
      Type: enum
      Description: Sort type of the items. Possible values are: '', OrderByTopSaleDESC, OrderByReleaseDateDESC, OrderByBestDiscountDESC, OrderByPriceDESC, OrderByPriceASC, OrderByNameASC, OrderByNameDESC.
      Default: OrderByTopSaleDESC
    hideUnavailableItems:
      Type: boolean
      Description: Hides unavailable items.
      Default: false
    maxItems:
      Type: number
      Description: Maximum items to be fetched.
      Default: 10
    skusFilter:
      Type: SkusFilterEnum
      Description: Control SKUs returned for each product in the query. The fewer SKUs that need to be returned, the more efficient your shelf query will be. Possible values are: FIRST_AVAILABLE, ALL_AVAILABLE, ALL.
      Default: "ALL_AVAILABLE"
    installmentCriteria:
      Type: InstallmentCriteriaEnum
      Description: Controls the price that will be displayed when the price has different installment options. Possible values are: MAX_WITHOUT_INTEREST, MAX_WITH_INTEREST.
      Default: "MAX_WITHOUT_INTEREST"
    listName:
      Type: string
      Description: Name of the list property in Google Analytics events.
      Default: -
    preferredSKU:
      Type: PreferredSKUEnum
      Description: Controls the SKU that will be selected in the summary. Possible values are: FIRST_AVAILABLE, LAST_AVAILABLE, PRICE_ASC, PRICE_DESC.
      Default: "FIRST_AVAILABLE"
```

--------------------------------

### Add Product Summary Buy Button Block to Product Summary Shelf

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummaryBuyButton.md

Integrate the `product-summary-buy-button` block as a child of the `product-summary.shelf` block in your theme's configuration. This places the buy button within the product summary display.

```diff
 {
   "product-summary.shelf": {
       "children": [
           "product-summary-image",
           "product-summary-name",
           "product-rating-inline",
           "product-summary-space",
           "product-summary-price",
+          "product-summary-buy-button"
       ]
   },
 }
```

--------------------------------

### Add Product Summary Price Block to Shelf

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummaryPrice.md

Integrate the `product-summary-price` block into your store theme by adding it as a child of the `product-summary.shelf` block.

```diff
   "product-summary.shelf": {
    "children": [
      "product-summary-image",
      "product-summary-name",
+     "product-summary-price",
      "product-summary-attachment-list",
      "product-summary-space",
      "product-summary-column#1"
    ]
  },
```

--------------------------------

### Displaying Badges with Specification Name and Value

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummarySpecificationBadges.md

Configures `product-specification-badges` to display the 'On Sale' specification name when its value is 'True', and the 'Demo' specification's actual value using `SPECIFICATION_VALUE`.

```json
  "product-specification-badges": {
    "props": {
      "specificationGroupName": "allSpecifications",
      "specificationsOptions": [{
        "specificationName": "On Sale",
        "displayValue": "SPECIFICATION_NAME",
        "visibleWhen": "True"
      },
      {
        "specificationName": "Demo",
        "displayValue": "SPECIFICATION_VALUE"
      }]
    }
  }
```

--------------------------------

### Add Product Summary App Dependency to manifest.json

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummaryName.md

This snippet shows how to add the "vtex.product-summary" app as a dependency in your theme's "manifest.json" file. This is the first step to enable the Product Summary Name block in your VTEX IO store.

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

--------------------------------

### CSS Customization Handles

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummaryImage.md

A list of CSS handles available for customizing the styling of the Product Summary component's image elements. These handles can be used to apply custom CSS rules.

```APIDOC
CSS Handles:
  - hoverImage
  - hoverEffect
  - imageContainer
  - imageInline
  - imageNormal
  - imageStackContainer
  - mainImageHovered
```

--------------------------------

### Configure Product Summary Component Props

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummarySpecificationBadges.md

Defines the configurable properties for the product summary component, allowing control over specification display, grouping, and styling through `blocks.json`.

```APIDOC
ProductSummaryComponentProps:
  specificationGroupName: String
    Description: The name of the specification group in which the desired specifications are.
    Default: ""
  specificationName: String
    Description: Pass the name of the specification you want to target. If left empty, will target all of the group.
    Default: ""
  visibleWhen: String
    Description: Pass this if you want the specification to be displayed only if it has this exact value. If left empty, the badge will be showed regardless of the specification value.
    Default: ""
  displayValue: SPECIFICATION_NAME | SPECIFICATION_VALUE | string
    Description: Choose the value that will appear if the specification condition is met and the badge will be showed. Pass SPECIFICATION_NAME if you want to display the specification name. Pass SPECIFICATION_VALUE if you want to display its value. Pass any other custom string to display it.
    Default: null
  specificationsOptions: Array<Option>
    Description: Pass this if you want to control the conditions to show certain specifications. Each value of the array should be a valid object of the Option format.
    Default: null
  orientation: vertical | horizontal
    Description: Determines if the group of specifications are showed horizontally or vertically.
    Default: vertical
  blockClass: string
    Description: Allows to pass a custom name to be added to component css classes.
    Default: null
```

--------------------------------

### Product Summary Name Block Configuration Properties

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummaryName.md

This section details the configurable properties for the "product-summary-name" block, allowing control over visibility of product fields and the HTML tag used for rendering the name.

```APIDOC
product-summary-name:
  Props:
    showFieldsProps:
      Type: object
      Description: Defines the visibility on certain properties.
      Default: { showProductReference: false, showBrandName: false, showSku: false }
      Properties:
        showSku:
          Type: Boolean
          Description: Show product SKU
          Default: false
        showProductReference:
          Type: Boolean
          Description: Show product reference
          Default: false
        showBrandName:
          Type: Boolean
          Description: Show brand name
          Default: false
    tag:
      Type: string
      Description: HTML tag used. It can be: div, h1, h2, h3.
      Default: h1
```

--------------------------------

### Product Summary Buy Button CSS Handles for Styling

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummaryBuyButton.md

List of CSS Handles available for customizing the appearance of the Product Summary Buy Button and its related elements. These handles allow developers to apply custom styles using CSS.

```APIDOC
CSS Handles:
  buyButtonContainer
  buyButton
  isHidden
```

--------------------------------

### Integrate Product Summary Name Block into Product Summary Shelf

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummaryName.md

This snippet demonstrates how to add the "product-summary-name" block as a child of "product-summary.shelf" in your store theme's configuration. This integrates the product name rendering into the product summary display.

```json
   "product-summary.shelf": {
    "children": [
      "product-summary-image",
+     "product-summary-name",
      "product-summary-space",
      "product-summary-column#1"
    ]
  },
```

--------------------------------

### Add SKU Selector to Product Summary Shelf in VTEX IO

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummarySKUSelector.md

This configuration snippet demonstrates how to include the `product-summary-sku-selector` block as a child within a `product-summary.shelf` definition. This integrates the SKU selector functionality into product summaries displayed on a shelf.

```JSON
"product-summary.shelf": {
   "children": [
     "product-summary-add-to-list-button",
     "stack-layout#prodsum",
     "product-summary-name",
     "product-rating-inline",
     "product-summary-space",
     "product-summary-sku-selector",
     "product-summary-price",
     "product-identifier.summary",
     "product-summary-buy-button"
   ]
 }
```

--------------------------------

### Product Summary Name CSS Handles for Customization

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummaryName.md

This section lists the CSS Handles available for the "product-summary-name" block, enabling developers to apply custom styling and visual adjustments to its elements.

```APIDOC
CSS Handles:
  nameContainer
  nameWrapper
  brandName
  skuName
  productReference
  productNameLoader
```

--------------------------------

### Image Aspect Ratio Object Properties

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummaryImage.md

Defines the aspect ratio of the image for different device types (desktop and mobile). These properties utilize the responsive values logic for consistent image display.

```APIDOC
aspectRatio object:
  desktop:
    Type: string
    Description: Image aspect ratio for desktop users.
    Default: undefined
  mobile:
    Type: string
    Description: Image aspect ratio for mobile users.
    Default: undefined
```

--------------------------------

### Product Summary Attachment List CSS Handles

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummaryAttachmentList.md

Available CSS handles for customizing the appearance of the Product Summary Attachment List component.

```APIDOC
attachmentListContainer
attachmentItemContainer
attachmentItem
attachmentItemProductText
```

--------------------------------

### Hover Image Object Properties

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummaryImage.md

Configures the behavior and selection criteria for the image displayed when a product summary is hovered over. It allows defining how the hover image is determined, either by label or index.

```APIDOC
hoverImage object:
  criteria:
    Type: enum
    Description: Defines the criteria that should determine the hover image based on the product images from the Admin Catalog.
    Possible values:
      - label: The hover image will be the one that matches the label value.
      - index: The hover image will be the one with the same index value.
    Default: label
  label:
    Type: string
    Description: Determines 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.
    Default: undefined
  labelMatchCriteria:
    Type: enum
    Description: Defines 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. This prop should only be used when the criteria prop is set to label.
    Possible values:
      - exact: Finds the image that matches exactly the string entered the label field.
      - contains: Finds the first image that includes the substring entered the label field.
    Default: exact
  index:
    Type: number
    Description: Index 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.
    Default: undefined
```

--------------------------------

### Image Width Object Properties

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummaryImage.md

Specifies the width of the image for different device types (desktop and mobile). These properties utilize the responsive values logic for flexible sizing.

```APIDOC
width object:
  desktop:
    Type: number
    Description: Image width for desktop users.
    Default: undefined
  mobile:
    Type: number
    Description: Image width for mobile users.
    Default: undefined
```

--------------------------------

### Product Summary Option Type Definition

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummarySpecificationBadges.md

Describes the structure of the `Option` type, which is used within the `specificationsOptions` prop to define conditional display rules for individual specifications.

```APIDOC
OptionType:
  specificationName: String
    Description: Pass the name of the specification you want to target. If empty, option will not be checked.
    Default: ""
  visibleWhen: string
    Description: Pass this if you want this option to be applied when the specification has the exactly same value as specified in visibleWhen. If left empty, the badge will be showed regardless of the specification value.
    Default: null
  displayValue: SPECIFICATION_NAME | SPECIFICATION_VALUE | string
    Description: Choose the value that will appear if the option condition is met and the badge will be showed. Pass SPECIFICATION_NAME if you want to show the specification name. Pass SPECIFICATION_VALUE if you want to show its value. Pass any other custom string to show it.
    Default: null
```

--------------------------------

### Add Product Summary SKU Name Block to Shelf Children

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummarySKUName.md

Integrate the `product-summary-sku-name` block into your store theme by adding it as a child of `product-summary.shelf`. This places the SKU name rendering within the product summary display.

```diff
   "product-summary.shelf": {
    "children": [
      "product-summary-image",
      "product-summary-name",
+     "product-summary-sku-name",
      "product-summary-attachment-list",
      "product-summary-space",
      "product-summary-column#1"
    ]
  },
```

--------------------------------

### Image Height Object Properties

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummaryImage.md

Specifies the height of the image for different device types (desktop and mobile). These properties utilize the responsive values logic for flexible sizing.

```APIDOC
height object:
  desktop:
    Type: number
    Description: Image height for desktop users.
    Default: undefined
  mobile:
    Type: number
    Description: Image height for mobile users.
    Default: undefined
```

--------------------------------

### SkusFilterEnum Definition

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummaryList.md

Defines options for filtering SKUs displayed on a product shelf, impacting performance based on the selection. Options include returning only the first available SKU, all available SKUs, or all SKUs regardless of availability.

```APIDOC
SkusFilterEnum:
  FIRST_AVAILABLE:
    Value: FIRST_AVAILABLE
    Description: Best performance, ideal if you don't have a SKU selector on your shelf. It returns only the first available SKU for that product in your shelf query.
  ALL_AVAILABLE:
    Value: ALL_AVAILABLE
    Description: Somewhat better performance. It only returns available SKUs, which is ideal if you have a SKU selector but still want better performance.
  ALL:
    Value: ALL
    Description: Returns all SKUs related to the product. This is the least efficient option.
```

--------------------------------

### CSS Handles for Product Specification Badges Customization

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummarySpecificationBadges.md

Lists the available CSS handles for styling the `product-specification-badges` component. These handles allow developers to apply custom CSS to different parts of the component, such as the group container, badge container, and badge text. Each badge also receives a class `badgeContainer` with its specification name slug appended (e.g., `badgeContainer--on-sale`).

```APIDOC
CSS Handles:
- `groupContainer`
- `badgeContainer`
- `badgeText`

Note: Each badge also receives a class `badgeContainer` with its specification name slug appended to it. Example: on specification `On Sale` the badge will also have the class `badgeContainer--on-sale`.
```

--------------------------------

### Displaying Badges with Custom String Values

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummarySpecificationBadges.md

Shows how to override the displayed badge text with a custom string. For the 'PromoExclusion' specification, a custom string 'Cool Promo' is displayed instead of its name or value.

```json
  "product-specification-badges": {
    "props": {
      "specificationGroupName": "allSpecifications",
      "specificationsOptions": [{
        "specificationName": "On Sale",
        "displayValue": "SPECIFICATION_NAME",
        "visibleWhen": "True"
      },
      {
        "specificationName": "Demo",
        "displayValue": "SPECIFICATION_VALUE"
      },
      {
        "specificationName": "PromoExclusion",
        "displayValue": "Cool Promo"
      }]
    }
  }
```

--------------------------------

### CSS Handles for Product Summary SKU Selector Customization

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummarySKUSelector.md

This section lists the CSS Handles available for customizing the `product-summary-sku-selector` block. These handles can be used to apply custom CSS styles as described in the VTEX IO documentation on using CSS Handles for store customization.

```APIDOC
CSS Handles:
- SKUSelectorContainer
```

--------------------------------

### Image Label Matching Criteria Property

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummaryImage.md

Defines the criteria for searching image labels, specifying whether the match should be exact or contain a substring. This property is used in contexts where image labels are used for selection.

```APIDOC
labelMatchCriteria:
  Type: enum
  Description: Specifies 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:
    - exact: Finds the image that matches exactly the string entered in the label field.
    - contains: Finds the first image that includes the substring entered in the label field.
  Default: exact
```

--------------------------------

### PreferredSKUEnum Definition

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummaryList.md

Determines the logic for selecting a preferred SKU when multiple options are available. This enum acts as a fallback if a product specification for SKU precedence is not defined or is empty. Options include selecting the first, last, cheapest, or most expensive available SKU.

```APIDOC
PreferredSKUEnum:
  FIRST_AVAILABLE:
    Value: FIRST_AVAILABLE
    Description: Selects the first available SKU it finds.
  LAST_AVAILABLE:
    Value: LAST_AVAILABLE
    Description: Selects the last available SKU it finds.
  PRICE_ASC:
    Value: PRICE_ASC
    Description: Selects the cheapest SKU in stock it finds.
  PRICE_DESC:
    Value: PRICE_DESC
    Description: Selects the most expensive available SKU it finds.
```

--------------------------------

### Displaying Badges by Specification Name with 'visibleWhen'

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummarySpecificationBadges.md

Configures `product-specification-badges` to display badges for specifications within a group (`allSpecifications`) where the value is 'True'. It uses `SPECIFICATION_NAME` to show the name of the specification as the badge text.

```json
"product-specification-badges": {
    "props": {
      "specificationGroupName": "allSpecifications",
      "displayValue": "SPECIFICATION_NAME",
      "visibleWhen": "True"
    }
  }
```

--------------------------------

### Image Max Height Object Properties

Source: https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummaryImage.md

Sets the maximum height for the image on different device types (desktop and mobile). These properties utilize the responsive values logic to prevent images from exceeding a certain height.

```APIDOC
maxHeight object:
  desktop:
    Type: string
    Description: Image maximum height for desktop users.
    Default: undefined
  mobile:
    Type: string
    Description: Image maximum height for mobile users.
    Default: undefined
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.