The Vue Storefront Essentials Course is now available! Learn More
Product List

Product List

The Product List module is a powerful and flexible feature designed to enhance the user experience on your e-commerce platform. It provides an alternative view for product listings on category pages, replacing the traditional grid view with a sleek and efficient list view.


  • List View Display: The primary function of the "Product List" module is to present your products in a clean and organized list view. This format offers a streamlined approach to product discovery, allowing users to focus on product details without the distraction of a grid layout.
  • ProductCardListView Component: A crucial element of this module is the "ProductCardListView" component. This component is responsible for rendering each product in the list view. It provides a rich, interactive, and informative display of product information, including images, titles, prices, and other relevant details.
  • Enhanced User Experience: By offering a list view, this module caters to users who prefer a more linear and concise presentation of products.
  • Responsive Design: The "Product List" module ensures that the list view is responsive and adapts to different screen sizes and devices, maintaining a seamless shopping experience on both desktop and mobile platforms.

Frontend Implementation

Once installed, you will be able to use the <ProductList /> component throughout your app:

// pages/category/[...slugs].tsx
import { ProductList } from '@sf-modules/product-list';

const CategoryPage = () => {
  // Assuming you have products data here
  const products = [...]

  return (
      {/* ... */}
      <ProductList products={products} />
      {/* ... */}

export default CategoryPage;