Documentation
Feedback
Guides
Storefront Development

Storefront Development
Product Shelf

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

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

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

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

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

Import Styles

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


Usage

Example
Code

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

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).fs-product-shelf

Product Shelf Items

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).fs-product-shelf-items

Product Shelf Item

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).fs-product-shelf-item

Design Tokens

Nested Elements

Items

Local tokenDefault value/Global token linked
--fs-product-shelf-items-gapvar(--fs-grid-gap-1)
--fs-product-shelf-items-padding-topvar(--fs-spacing-0)
--fs-product-shelf-items-padding-bottomvar(--fs-spacing-3)

Variants

You can use ProductCard variants to create ProductShelf variations.

With Button

Example
Code

Bordered

Example
Code

Aspect Ratio

Example
Code
Example
Code

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.
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page