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 aProductShelf.
Import
Import the component from @faststore/ui
_10import {_10 ProductShelf,_10 ProductShelfItems,_10 ProductShelfItem,_10} from '@faststore/ui'
We highly recommend using the ProductCard as the direct child of the
ProductShelfItem.
_10import {_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
Apple Magic Mouse
Original price:$999Price:$950.04
4k Philips Monitor 27”
Original price:$490Price:$420
Echo Dot Smart Speaker
Original price:$310Price:$280
Aedle VK-1 L Headphone
Original price:$150Price:$130
Oculus VR Headset
Original price:$344Price:$315
Apple AirPods Pro
Original price:$249Price:$229
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
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest). | fs-product-shelf |
ProductShelfItems
| 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 |
ProductShelfItem
| 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
Example
Code
Apple Magic Mouse
Original price:$999Price:$950.044k Philips Monitor 27”
Original price:$490Price:$420Echo Dot Smart Speaker
Original price:$310Price:$280Aedle VK-1 L Headphone
Original price:$150Price:$130
Bordered
Example
Code
Apple Magic Mouse
Original price:$999Price:$950.044k Philips Monitor 27”
Original price:$490Price:$420Echo Dot Smart Speaker
Original price:$310Price:$280Aedle VK-1 L Headphone
Original price:$150Price:$130
Aspect Ratio
Example
Code
Apple Magic Mouse
Original price:$999Price:$950.044k Philips Monitor 27”
Original price:$490Price:$420Echo Dot Smart Speaker
Original price:$310Price:$280Aedle VK-1 L Headphone
Original price:$150Price:$130Oculus VR Headset
Original price:$344Price:$315Apple AirPods Pro
Original price:$249Price:$229
Anker SoundCore Liberty Air
Original price:$643.71Price:$486.34
Fujifilm X-T1 Camera
Original price:$495.97Price:$366.11
SANDMARC Fisheye Lens
Original price:$946.73Price:$636.05
Apple AirTag
Original price:$679.29Price:$426.14
With Carousel
Example
Code
Customization
data-fs-product-shelfdata-fs-product-shelf-itemsdata-fs-product-shelf-itemBest Practices
❌ Don'ts
- We don't recommend using Carousel inside
ProductShelfwhen display 5 or less items. - We don't recommend using
ProductShelfItemsandProductShelfItemwhen using Carousel component to avoid:validateDOMNesting(...): <li> cannot appear as a descendant of <li>issue.