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.

An image of the channel app overview page that you'll create in this tutorial

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

Requirements

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.

Channels UI shares the same design principles as Polaris. For more information on the design behind a great channel app, refer to the Polaris style guide and codebase.

  1. Add the Channels UI component library.

  2. In pages/_app.js, replace the app-bridge and polaris providers with the Channels UI ExtendedAppProvider component

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 AppInstallation object.

  1. In your .env file, add the read_product_listings access scope.

  2. Add the package that facilitates converting GraphQL GIDs to resource IDs.

  3. In server/handlers/queries, add a get-publication-id.js file to query the publication ID from the current app installation.

  4. In server/handlers/, create a rest folder with a get-product-listings-count.js file.

  5. In server/handlers/rest/get-product-listings-count.js, retrieve the product listing publication count from the REST Admin API.

  6. In server/handlers/queries, add a get-app-handle.js file.

  7. In server/handlers/queries/get-app-handle.js, retrieve the app handle from the current app installation.

  8. In server/handlers/index.js, export new handlers.

  9. In server/graphql/schema.js, update the GraphQL schema with the new fields and types.

  10. Add new resolvers to the GraphQL API schema.

    For the adminShop field, return null if 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 LoadingCard, OverviewPage, and ProductStatusSection components to build a channel app overview page with a product status card.

  1. Update pages/admin/index.js to import the @shopify/channels-ui components.

  2. Add Apollo functions and set up the query to fetch the new fields added to the API.

  3. Update the component exported from pages/admin/index.js to fetch the Admin shop data and render a basic product status card.

    Your channel app overview page should look something like this:

    An image of the completed channel app overview page

Next steps