Documentation
Feedback
Guides
Storefront Development

Storefront Development
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 a ProductGridItem.

Import

Import the component from @faststore/ui

_10
import { ProductGrid, ProductGridItem } from '@faststore/ui'

We highly recommend using the ProductCard as the direct child of the ProductGridItem.

_10
import {
_10
ProductCard,
_10
ProductCardContent,
_10
ProductCardImage,
_10
} from '@faststore/ui'

Import Styles

_10
import '@faststore/ui/src/components/organisms/ProductGrid/styles.scss'


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.04
  • An 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:$420
  • An 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:$280
  • An 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:$130
  • An 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:$315
  • An 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:$229
  • An 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.34
  • An 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.11
  • An 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.05
  • An 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

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).fs-product-grid

Product Grid Item

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).fs-product-grid-item

Design Tokens

Local tokenDefault value/Global token linked
--fs-product-grid-gap-mobilevar(--fs-grid-gap-0)
--fs-product-grid-gap-tabletvar(--fs-product-grid-gap-mobile)
--fs-product-grid-gap-desktopvar(--fs-grid-gap-2)
--fs-product-grid-columns-mobile2
--fs-product-grid-columns-tablet4
--fs-product-grid-columns-desktopvar(--fs-product-grid-columns-tablet)

Customization

data-fs-product-grid
data-fs-product-grid-item

Best Practices

✅ Do's

  • Respect ProductGridItem content's width considering the space available on the page.

❌ Don'ts

  • Avoid using a lot of ProductGridItem on the same row, this could lead to unwanted horizontal scroll.

Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page