Product Shelf

Displays a list of products to be used as a section on the store.

The ProductShelf is a compound of the following:

ProductShelfItems: the product list.
ProductShelfItem: wraps the product inside a list item.
ProductCard: the proposed child of a ProductShelf.

Import

Import the component from @faststore/ui

import {
  ProductShelf,
  ProductShelfItems,
  ProductShelfItem,
} from '@faststore/ui'

We highly recommend using the ProductCard as the direct child of the ProductShelfItem.

import {
  ProductCard,
  ProductCardContent,
  ProductCardImage,
} from '@faststore/ui'

Import Styles

import '@faststore/ui/src/components/organisms/ProductShelf/styles.scss'

Usage

Props

All ProductShelf related components support all attributes also supported by their respective HTML tags. Besides those attributes, the following props are also supported:

Product Shelf

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).	`fs-product-shelf`

Product Shelf Items

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).	`fs-product-shelf-items`

Product Shelf Item

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).	`fs-product-shelf-item`

Design Tokens

Nested Elements

Items

Local token	Default value/Global token linked
`--fs-product-shelf-items-gap`	`var(--fs-grid-gap-1)`

`--fs-product-shelf-items-padding-top`	`var(--fs-spacing-0)`
`--fs-product-shelf-items-padding-bottom`	`var(--fs-spacing-3)`

Variants

You can use ProductCard variants to create ProductShelf variations.

With Button

Bordered

Aspect Ratio

With Carousel

Customization

data-fs-product-shelf

data-fs-product-shelf-items

data-fs-product-shelf-item

Best Practices

❌ Don'ts

We don't recommend using Carousel inside ProductShelf when display 5 or less items.
We don't recommend using ProductShelfItems and ProductShelfItem when using Carousel component to avoid: validateDOMNesting(...): <li> cannot appear as a descendant of <li> issue. See Carousel Code Example

Product Grid Region Modal