Product Grid

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:

Import

Import the component from @faststore/ui

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

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

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

To apply the styles of this component in your FastStore project, import the following into your stylesheet:

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

Follow the instructions in the Importing FastStore UI component styles tutorial.

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).	`fs-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-item`

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-fs-product-grid

data-fs-product-grid-item

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

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