⚠️ After March 18, 2024, the FastStore documentation will be migrated to the Developer Portal. For more information, access the official release note.

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

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

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