Create a channel app experience
Previously, you created a marketplace framework that included a basic merchant-facing page for your channel app in the Shopify admin. The channel app page is what merchants see when they open your channel. You're now ready to start building the page for the channel app experience.
In this tutorial, you'll use Channels UI to style a simple channel app overview page in the Shopify admin. The page will show merchants the number of products they've listed on your marketplace and let merchants control product availability.
What you'll learn
After finishing this tutorial, you'll know how to do the following:
Set up the marketplace Channel UI component library
Authenticate your internal GraphQL API
Create a basic channel app overview page for the Shopify admin
- You've completed the Get started with Shopify Marketplace Kit tutorial.
Step 1: Set up Channels UI
Channels UI is a React component library for creating your channel app's merchant-facing pages. It also offers an extended app provider component that handles the Polaris component library and App Bridge setup with a single provider.
Add the Channels UI component library.
pages/_app.js, replace the
polarisproviders with the Channels UI
Step 2: Add authentication to the internal GraphQL API
The channel app needs a way to retrieve merchant-specific data. In this tutorial, you'll update the internal GraphQL endpoint that you created so that merchants can only access their own data from the channel app.
You'll leverage the authorization header that App Bridge provided to determine whether the request originated from the merchant.
If a merchant is visiting the channel from their Shopify admin, then the authorization header should be included in the request, and can be decoded to determine the merchant’s shop domain.
If the request is coming from the marketplace, then no authorization header will be provided and the shop details will not be available in the Apollo context. Returning the
shop makes the
domain and access token available to the resolvers that you'll add later in the tutorial.
To accomplish this, add the following to your internal GraphQL API:
Step 3: Update the internal GraphQL API
To build the product status card in the channel app page, you need to expose information about the number of published products, as well as information required to create links to the bulk editor and product index page. To accomplish this, you'll use the REST Admin API's
ProductListing resource and the GraphQL Admin API's
.envfile, add the
Add the package that facilitates converting GraphQL GIDs to resource IDs.
server/handlers/queries, add a
get-publication-id.jsfile to query the publication ID from the current app installation.
server/handlers/, create a
restfolder with a
server/handlers/rest/get-product-listings-count.js, retrieve the product listing publication count from the REST Admin API.
server/handlers/queries, add a
server/handlers/queries/get-app-handle.js, retrieve the app handle from the current app installation.
server/handlers/index.js, export new handlers.
server/graphql/schema.js, update the GraphQL schema with the new fields and types.
Add new resolvers to the GraphQL API schema.
nullif no shop details are available from the context. This corresponds to the case where the API is not being called from the merchant’s installed channel app.
Step 4: Create a simple channel app overview page
After you've exposed the necessary data using the internal GraphQL API, you can leverage the Channels UI
ProductStatusSection components to build a channel app overview page with a product status card.
pages/admin/index.jsto import the
Add Apollo functions and set up the query to fetch the new fields added to the API.
Update the component exported from
pages/admin/index.jsto fetch the Admin shop data and render a basic product status card.
Your channel app overview page should look something like this:
- Learn how to build up the buyer-facing marketplace homepage.