Adding shop pages
You've made it easy for buyers to find the shops on your marketplace through the homepage. Now you want your marketplace to provide shop details and their products, in dedicated shop pages.
In this tutorial, you'll learn how to create dynamic routing that directs buyers to a unique URL for each shop in the marketplace. When buyers select a shop from the homepage, they can see store details and products that the merchant has published to your channel app.
What you'll learnAnchor link to section titled "What you'll learn"
After finishing this tutorial, you'll know how to do the following:
Add unique URLS for the shop in your marketplace
Display store details and products on a single page for the shop
RequirementsAnchor link to section titled "Requirements"
Step 1: Query the shop from the channel app GraphQL APIAnchor link to section titled "Step 1: Query the shop from the channel app GraphQL API"
shop field to retrieve the shop domain and Storefront Access Token by ID.
Step 2: Display shop informationAnchor link to section titled "Step 2: Display shop information"
Using the Storefront Access Token obtained above, you can create a GraphQL client to retrieve shop data from the Storefront API.
For example, the following query returns the shop's
description, along with the
host of the shop's primary domain.
The shop page might now look something like the following:
Step 3: Display shop productsAnchor link to section titled "Step 3: Display shop products"
Retrieve a list of products from the shop and render them in a paginated list to help buyers navigate the content. For pagination, your queries to the Storefront API will accept the
after arguments. You'll retrieve product details and the page information and cursor, which are required for pagination.
The response body returns the product details, and the page info and cursor that are required for pagination.
The following are examples of the types of pages that you can build using this information: