ProductGrid
Lists the products available in the store.
The
ProductGrid is a section generally used on PLP pages to list the products available in the store.The ProductGrid is a compound of the following:ProductGrid: wraps the product grid items.ProductGridItem: wraps the product inside a list item.ProductCard: the proposed child of aProductGridItem.
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
Usage
Import the component
_10import { ProductGrid, ProductGridItem } from "@faststore/ui";
We highly recommend using the ProductCard as the direct child of the
ProductGridItem.
_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/ProductGrid/styles.scss";
For details, see Importing FastStore UI component styles.
Design tokens
| Local token | Default value/Global token linked |
|---|---|
--fs-product-grid-gap-mobile | var(--fs-grid-gap-0) |
--fs-product-grid-gap-tablet | var(--fs-product-grid-gap-mobile) |
--fs-product-grid-gap-desktop | var(--fs-grid-gap-2) |
--fs-product-grid-columns-mobile | 2 |
--fs-product-grid-columns-tablet | 4 |
--fs-product-grid-columns-desktop | var(--fs-product-grid-columns-tablet) |
Data attributes
You can target and override
ProductGrid styles using the following data attributes:
data-fs-product-griddata-fs-product-grid-itemProps
ProductGrid
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest). | fs-product-grid |
ProductGridItem
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest). | fs-product-grid-item |
Best Practices
✅ Do's
- Respect
ProductGridItemcontent's width considering the space available on the page.
❌ Don'ts
- Avoid using a lot of
ProductGridItemon the same row, this could lead to unwanted horizontal scroll.
Related components
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