⚠️ After March 18, 2024, the FastStore documentation will be migrated to the Developer Portal. For more information, access the official release note.

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:

  • 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

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'

Import Styles into your FastStore project

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.


Usage


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.

Related components