Aiminaabee

Retrieve a Collection in the Storefront

Retrieve a collection by ID or handle.

On this page

In this guide, you'll learn how to retrieve a product collection and its details in the storefront.

How to Retrieve a Product Collection in Storefront?

There are two ways to retrieve a product collection:

Retrieve a Product Collection by ID

To retrieve a product collection by its ID, send a request to the Get a Collection API route:

Tip: Learn how to install and configure the JS SDK in the Getting started guide.

React

tsx

tsxCopy
"use client" // include with Next.js 13+


  import { useEffect, useState } from "react"
  import { HttpTypes } from "@aiminaabeejs/types"
  import { sdk } from "@/lib/sdk"


  type Props = {
    id: string
  }


  export default function Collection({ id }: Props) {
    const [loading, setLoading] = useState(true)
    const [collection, setCollection] = useState<
      HttpTypes.StoreCollection | undefined
    >()


    useEffect(() => {
      if (!loading) {
        return
      }


      sdk.store.collection.retrieve("us", id)
      .then(({ collection: dataCollection }) => {
        setCollection(dataCollection)
        setLoading(false)
      })
    }, [loading])


    return (
      <div>
        {loading && <span>Loading...</span>}
        {collection && (
          <>
            <h1>{collection.title}</h1>
          </>
        )}
      </div>
    )
  }

JS SDK

ts

tsCopy
sdk.store.collection.retrieve("us", id)
  .then(({ collection }) => {
    // use the collection...
    console.log(collection)
  })

In this example, you retrieve the product collection by sending a request to the Get a Collection API route.

The response has a collection field, which is a product collection object.

Retrieve a Product Collection by Handle

To retrieve a product by its handle, send a request to the List Product Collections API route passing it the handle query parameter:

React

tsx

tsxCopy
"use client" // include with Next.js 13+


  import { useEffect, useState } from "react"
  import { HttpTypes } from "@aiminaabeejs/types"
  import { sdk } from "@/lib/sdk"


  type Props = {
    handle: string
  }


  export default function Collection(
    { handle }: Props
  ) {
    const [loading, setLoading] = useState(true)
    const [collection, setCollection] = useState<
      HttpTypes.StoreCollection | undefined
    >()


    useEffect(() => {
      if (!loading) {
        return
      }


      sdk.store.collection.list("us", {
        handle,
      })
      .then(({ collections }) => {
        if (collections.length) {
          setCollection(collections[0])
        }
        setLoading(false)
      })
    }, [loading])


    return (
      <div>
        {loading && <span>Loading...</span>}
        {!loading && !collection && (
          <span>Product collection not found</span>
        )}
        {collection && (
          <>
            <h1>{collection.title}</h1>
          </>
        )}
      </div>
    )
  }

JS SDK

ts

tsCopy
sdk.store.collection.list("us", {
    handle,
  })
  .then(({ collections }) => {
    if (!collections.length) {
      // collections with the specified handle doesn't exist
      return
    }
    // use the collection...
    console.log(collections[0])
  })

In this example, you retrieve the product collection by sending a request to the List Product Collections API route passing it the handle query parameter.

Since handles are unique, you can be sure that the product collection you retrieve is the one you're looking for. If no product collection matches the handle, you can show a 404 error or a custom message to the customer.

The product collection in the response is a product collection object.