Documentation
Feedback
Guides
Storefront Development

Storefront Development
FastStoreUI componentsOrganisms
ProductShelf

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

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

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

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

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

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:

ProductShelf

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

ProductShelfItems

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

ProductShelfItem

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