List Product Collections in Storefront

In this guide, you'll learn how to list product collections in the storefront, including paginating and filtering them.

List Product Collections#

To retrieve the list of product collections, send a request to the List Product Collections API route:

In this example, you retrieve the list of product collections by sending a request to the List Product Collections API route.

The response has a collections field, which is an array of product collections.

Paginate Product Collections#

To paginate product collections, pass the following query parameters to the List Product Collections API route:

• limit: The number of product collections to return in the request.
• offset: The number of product collections to skip before the returned product collections. You can calculate this by multiplying the current page with the limit.

The response object returns a count field, which is the total count of product collections. Use it to determine whether there are more product collections that can be loaded.

For example:

Code
1"use client" // include with Next.js 13+2
3import { useEffect, useState } from "react"4import { HttpTypes } from "@medusajs/types"5import { sdk } from "@/lib/sdk"6
7export default function Collections() {8  const [loading, setLoading] = useState(true)9  const [collections, setCollections] = useState<10    HttpTypes.StoreCollection[]11  >([])12  const limit = 2013  const [currentPage, setCurrentPage] = useState(1)14  const [hasMorePages, setHasMorePages] = useState(false)15
16  useEffect(() => {17    if (!loading) {18      return 19    }20
21    const offset = (currentPage - 1) * limit22
23    sdk.store.collection.list({24      limit,25      offset,26    })27    .then(({ collections: dataCollections, count }) => {28      setCollections((prev) => {29        if (prev.length > offset) {30          // product collections already added because 31          // the same request has already been sent32          return prev33        }34        return [35          ...prev,36          ...dataCollections,37        ]38      })39      setHasMorePages(count > limit * currentPage)40      setLoading(false)41    })42  }, [loading])43
44  return (45    <div>46      {loading && <span>Loading...</span>}47      {!loading && collections.length === 0 && (48        <span>No product collections found.</span>49      )}50      {!loading && collections.length > 0 && (51        <ul>52          {collections.map((collection) => (53            <li key={collection.id}>{collection.title}</li>54          ))}55        </ul>56      )}57      {!loading && hasMorePages && (58        <button59          onClick={() => {60            setCurrentPage((prev) => prev + 1)61            setLoading(true)62          }}63          disabled={loading}64        >65          Load More66        </button>67      )}68    </div>69  )70}

In this example, you paginate the product collections by passing the limit and offset query parameters to the List Product Collections API route.

Then, you show a button to load more product collections if there are more pages.

Filter Collections#

The List Product Collections API route accepts query parameters to filter the collections by title, handle, and more.

Refer to the API reference for the full list of accepted query parameters.

For example, to filter the collections by title:

Code
1sdk.store.collection.list({2  title: "Summer Clothes",3})4.then(({ collections }) => {5  // TODO set collections...6})

In this example, only the collections with the title "Summer Clothes" are returned.

Sort Collections#

To sort collections by a field, use the order query parameter. Its value is a comma-separated list of fields to sort by, and each field is optionally prefixed by - to indicate descending order.

For example, to sort collections by title in descending order:

Code
1sdk.store.collection.list({2  order: "-title",3})4.then(({ collections, count }) => {5  // TODO set collections...6})

The result will be collections sorted by title in descending order.