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

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

Usage

Import the component


_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

To apply styles, include the following in your stylesheet:


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

For details, see Importing FastStore UI component styles.

Examples

You can use ProductCard variants to create ProductShelf variations.

With Button

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

Bordered

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

Aspect Ratio

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
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

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
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

Design tokens

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)`

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

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`

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