Add product categories to shop pages

You've added dedicated pages for the shops in your marketplace. Now you want buyers to get a sense of what types of products a shop sells.

In this tutorial, you'll use the Storefront API to retrieve a list of product types from merchant storefronts. You'll display these product types as categories in a tabbed list. This way, what's available for purchase is more immediately apparent to the buyer, and that directs them more quickly to a sale.

A gif showing a shop page with products from different categories

What you'll learn

After finishing this tutorial, you'll know how to do the following:

  • Retrieve product types from a storefront

  • Display product categories in tabs on a shop's page

  • Filter shop products to display products in a specific category

Requirements

Step 1: Retrieve product categories from the Storefront API

Merchants can categorize the products in their store by type. You can query product types using the Storefront API.

  1. In pages/shops/[id].js, update the shop details query with productTypes.

Since you're already using this query in the component and storing the result in the shopData state, the product types will be available in your component's state.

Step 2: Add product category tabs

You need a way to surface products categories that enables filtering.

In this step, you'll set a tab for product categories. You'll track the currently-selected category using parameters, and persist the selected category. You'll use Next.js for shallow routing, so that the URL can change without re-running data fetching methods.

  1. In pages/shops/[id].js, add a CategoryTabs component that accepts the list of product types and returns a set of tabs.

    You'll also add an all category that will be selected by default.

  2. In the CategoryTabs component, add a callback that will add the selected category as a URL parameter.

    You can also use shallow routing to preserve state and prevent needing to refetch other data on the page. You can then get the selected category from the router query, and use it as the Tabs value. You can then get the selected category from the router query, and use it as the Tabs value.

  3. Add an effect to redirect to the default all categories page if the category specified in the query is not included in the list of product types from the shop.

  4. Update the Shop component to render the CategoryTabs component using the product types from the shopData.

    The shop page and product category tabs should look something like the following:

    An image of the shop page with product category tabs underneath store details

Step 3: Filter products from the Storefront API

You'll use the query argument on the Storefront API's Product object to fetch products from a given category.

  1. In pages/shops/[id].js, update the shop products query to accept a query variable and pass it as an argument on the products field.

  2. Add a helper function that accepts the category and returns an object with URL parameters that will be included in the query.

    As you add add product sorting and filtering, this helper will contain the query variable logic.

  3. In the ProductSection component, update the effect that retrieves product data to provide a query variable using the function created above.

    You'll also add the category variable to the dependency array so that products are re-retrieved when the category is changed.

    An image of the shop page with a product category selected

Step 4: Update pagination

You'll update URLs for Previous and Next page links to persist the selected product category. If the product category is provided, a query parameter will be added to the href used for the Previous and Next page links.

  1. In pages/shop/[id].js, add a helper function that takes in the category and returns an object with URL parameters that will be included in the query.

  2. Update the PaginatedProducts component to accept a urlParams prop that contains an object to be used as the base for the URL query.

    You can then add on the before/after parameters for the pagination links.

  3. Update the ProductSection component to get the URL parameters using the newly-created helper function, and pass them into the PaginatedProducts component.

    You'll also update the effect that triggers the loading state to include category changes.

Next steps

  • Learn how to add sort options to the shop pages in a marketplace.