Product Grid
It's a section generally used on PLP pages to list the products available in the store.
It's 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.
Import
Import the component from @faststore/ui
_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 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/ProductGrid/styles.scss';
Follow the instructions in the Importing FastStore UI component styles tutorial.
Usage
Example
Code
An error occurred while trying to load the image. https://storeframework.vtexassets.com/arquivos/ids/190932/mouse-black.jpg?v=1767729450
Apple Magic Mouse
Original price:$999Price:$950.04An error occurred while trying to load the image. https://storeframework.vtexassets.com/arquivos/ids/190903/unsplash-monitor.jpg?v=1767729451
4k Philips Monitor 27”
Original price:$490Price:$420An error occurred while trying to load the image. https://storeframework.vtexassets.com/arquivos/ids/190904/unsplash-smart-speaker.jpg?v=1767978734
Echo Dot Smart Speaker
Original price:$310Price:$280An error occurred while trying to load the image. https://storeframework.vtexassets.com/arquivos/ids/190901/unsplash-headphone.jpg?v=1766352858
Aedle VK-1 L Headphone
Original price:$150Price:$130An error occurred while trying to load the image. https://storeframework.vtexassets.com/arquivos/ids/190900/unsplash-vr-glasses.jpg?v=1765997962
Oculus VR Headset
Original price:$344Price:$315An error occurred while trying to load the image. https://storeframework.vtexassets.com/arquivos/ids/173596/est.jpg?v=1757659088
Apple AirPods Pro
Original price:$249Price:$229An error occurred while trying to load the image. https://storeframework.vtexassets.com/arquivos/ids/179130/sint.jpg?v=1757911413
Anker SoundCore Liberty Air
Original price:$643.71Price:$486.34An error occurred while trying to load the image. https://storeframework.vtexassets.com/arquivos/ids/171611/eius.jpg?v=1757657196
Fujifilm X-T1 Camera
Original price:$495.97Price:$366.11An error occurred while trying to load the image. https://storeframework.vtexassets.com/arquivos/ids/159818/debitis.jpg?v=1757639123
SANDMARC Fisheye Lens
Original price:$946.73Price:$636.05An error occurred while trying to load the image. https://storeframework.vtexassets.com/arquivos/ids/181988/nulla.jpg?v=1757915578
Apple AirTag
Original price:$679.29Price:$426.14
Props
Product Grid
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest). | fs-product-grid |
Product Grid Item
| 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 |
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) |
Customization
data-fs-product-griddata-fs-product-grid-itemBest 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.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
Product Shelf
Displays a list of products to be used as a section on the store.
See more