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 into your FastStore project

To apply the styles of this component in your FastStore project, import the following into your stylesheet:

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

Follow the instructions in the Importing FastStore UI component styles tutorial.

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