Adding 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. Because categories are not the same as collections, and not all merchants use product categories, the code in this tutorial provides a default.
What you'll learn
Anchor link to section titled "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
Anchor link to section titled "Requirements"- You've completed the tutorial for adding shop pages.
Step 1: Retrieve product categories from the Storefront API
Anchor link to section titled "Step 1: Retrieve product categories from the Storefront API"Merchants can categorize the products in their store by type. Retrieve product types by updating the Storefront API shop details query with productTypes. You can now use this information to add product category tabs to shop pages.
Your shop page might now look something like the following:
Step 2: Filter products from the Storefront API
Anchor link to section titled "Step 2: 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.
Update the shop products query to accept a query variable and pass it as an argument on the products field.
Learn how to add sort options to the shop pages in a marketplace.
Share feedback on Marketplace Kit.