Documentation
Feedback
Guides
Storefront Development

Storefront Development
Storefront development
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.
Example
Code

Usage

Import the component


_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

To apply styles, include the following in your stylesheet:

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


Examples

You can use ProductCard variants to create ProductShelf variations.

With Button

Example
Code

Bordered

Example
Code

Aspect Ratio

Example
Code
Example
Code

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)

Data attributes

You can target and override ProductShelf styles using the following data attributes: data-fs-product-shelf
data-fs-product-shelf-items
data-fs-product-shelf-item

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

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