### Add Shelf App to Theme Dependencies (manifest.json)

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

To integrate the Shelf app into a VTEX IO theme, add `vtex.shelf` with version `1.x` to the `dependencies` object in the `manifest.json` file. This step makes all blocks exported by the Shelf app available for use in the theme.

```json
  "dependencies": {
    "vtex.shelf": "1.x"
  }
```

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

### CSS Handles for RelatedProducts Component

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

Lists the CSS handles available for styling the `shelf.relatedProducts` block, with a note on deprecation and alternative blocks for customization.

```APIDOC
CSS Handles
-
`relatedProducts`
```

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

### Shelf Component Props Reference

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

This section details the available properties for configuring the `Shelf` component. These props control various aspects of the product list display, including filtering by category or collection, ordering, visibility of unavailable items, pagination, and tracking.

```APIDOC
Shelf Props:
  - category (String): The category ID
  - collection (String): The collection ID
  - orderBy (Enum): OrderByTopSaleDESC, OrderByPriceDESC, OrderByPriceASC, OrderByNameASC, OrderByNameDESC, OrderByReleaseDateDESC, OrderByBestDiscountDESC
  - hideUnavailableItems (Boolean): Whether out of stock items should be hidden (true) or not (false). Default: false
  - paginationDotsVisibility (Enum): visible, hidden, mobileOnly, desktopOnly
  - productList (ProductListSchema): Product list schema. See ProductListSchema
  - trackingId (String): Name to show in the Google Analytics. If nothing is passed it will use the name of the block instead
  - maxItems (Number): Max items
```

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

### ProductListSchema Properties

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

Defines the schema for displaying product lists within the RelatedProducts component, controlling layout, item count, and visual elements.

```APIDOC
Prop name | Type | Description | Default value
- | - | - | -
`maxItems` | `number` | Maximum number of items to be displayed on the related product shelf. | `10`
`scroll` | `enum` | Slide transition scroll type. Possible values: `BY_PAGE`, and `ONE_BY_ONE`. | `BY_PAGE`
`arrows` | `boolean` | Whether the arrows should be displayed on the shelf (`true`) or not (`false`). | `true`
`showTitle` | `boolean` | Whether a title should be displayed on the product-related shelf (`true`) or not (`false`). | `true`
`titleText` | `string` | Related product shelf title. | `null`
`gap` | `enum` | Space between items being displayed. Possible values are: `ph0`, `ph3`,`ph5`, and `ph7`. | `ph3`
`minItemsPerPage` | `number` | Minimum number of items per shelf slides. This prop defines how many items will be displayed on the related product shelf, even in the smallest screen size. Its value can be a float, which means that you can choose a multiple of `0.5` to indicate that you want to show a *peek* of the next slide on the shelf. | `1`
`itemsPerPage` | `number` | Maximum number of items per shelf slides. This prop defines how many items will be displayed on the related product shelf, even in the largest screen size. Its value can be a float, which means that you can choose a multiple of `0.5` to indicate that you want to show a *peek* of the next slide on the shelf. | `5`
`summary` | `object` | Schema declaring the desired related product shelf items. This prop object must contain the [`product-summary.shelf` block props](https://developers.vtex.com/docs/guides/vtex-product-summary#configuration). | `undefined`
`infinite` | `boolean` | Determines whether the list should be infinite (`true`) or not (`false`). When this prop is set as `false`, the slider will have an explicit end for users. | `true`
```

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

### RelatedProducts Component Properties

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

Defines the configurable properties for the RelatedProducts component, including recommendation types, grouping, and visibility of out-of-stock items.

```APIDOC
Prop name | Type | Description | Default value
- | - | - | -
`recommendation` | `enum` | Type of recommendations that will be displayed on the shelf. Possible values: `similars`, `suggestions`, and `accessories` (these depend on the product information given in the Admin Catalog); and `view`, `buy`, and `viewandBought` (these are automatically generated according to the activity of the store). | `similars`
`groupBy` | `enum` | Defines if you are ot nog going to group your recommendations by: `PRODUCT` (only display individual products and not SKUs, limited by 12 products) or `NONE` (if you want to display all registered SKUs, limited by 50 products). | `PRODUCT`
`hideOutOfStockItems` | `boolean` | Whether out of stock items should be hidden: (`true`) or (`false`). | `false`
`productList` | `ProductListSchema` | Product list schema. See `ProductListSchema`. | -
```

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

### Declare shelf.relatedProducts in Product Template (store.product)

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

To display related products on a product details page, declare `shelf.relatedProducts` within the `children` array of the `store.product` block in your theme's template. This allows the block to render a list of related items alongside other product page components.

```json
{
  "store.product": {
    "children": [
      "breadcrumb",
      "flex-layout.row#main",
      "shelf.relatedProducts"
    ]
  }
}
```

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