Product List

Fetch and display multiple products. Each product gets its own Product context for isolated state management.

Interactive Demo

Try different product list layouts using the variant switcher. Each product is automatically wrapped in its own Product context:

Loading playground...

ProductList Props

limitnumber
Maximum number of products to fetch. Defaults to 10.
childrenReactNoderequired
Template for each product card. Receives Product context automatically.
gridClassNamestring
CSS classes for the grid layout. Defaults to a responsive grid layout.
classNamestring
CSS classes for the container element.

ProductCard Props

variant"default" | "overlay" | "minimal"
Card style variant. 'overlay' shows info over image, 'minimal' is compact, 'default' has padding.
showPriceboolean
Whether to display the product price. Defaults to false.
showCategoryboolean
Whether to display the product category/tag. Defaults to true.
onClick() => void
Click handler for the card. When provided, renders as a button.
classNamestring
Additional CSS classes for the card container.

Installation

npx merchify-cli init

This CLI will guide you through setting up Merchify components in your project