Get started with Marketplace Kit
You're ready to create a marketplace. You want to showcase products from multiple merchant shops on your platform and direct buyers towards a sale. You'll get started with a simple framework, and build up buyer and merchant experiences from there.
In this tutorial, you'll set up a routing, access, and data query framework for your marketplace.
What you'll learn
After finishing this tutorial, you'll know how to do the following:
Create routes to render merchant-facing and buyer-facing pages
Retrieve and store Storefront API access tokens for multiple shops
Add an internal GraphQL API endpoint
You're familiar with the Storefront API.
Step 1: Add routes
Your app will need to have a merchant-facing channel and a buyer-facing marketplace. In this tutorial, both are handled using the app that you generated with Shopify CLI. All merchant-facing pages will be rendered at
/admin routes, and all buyer-facing pages will be rendered at root
server/server.js, create a handler for
Update the fallback route handler to redirect to
hostparameters are in the URL query.
afterAuthcallback to redirect to
pages/_app.js, use a different provider for the merchant-facing and buyer-facing routes.
pages/admin/index.jswith a basic Polaris page for your channel app.
Navigate to the link provided by ngrok in your terminal to open the channel app within the Shopify admin to display the merchant-facing, channel app page:
pages/index.jsto render a basic buyer-facing page.
Navigating to the root URL displays the buyer-facing, marketplace page:
Step 2: Get and store Storefront API access tokens
To authenticate with the Storefront API, your app needs a mechanism for storing and retrieving the domains and Storefront API access tokens for all shops that have installed your channel app. You'll need the generated Storefront API access tokens to access the storefronts of shops on your marketplace.
Create a shop data model with
storefrontAccessTokenfields. You'll use these fields to retrieve shop data and products on the marketplace.
scopes, add the
server/handlers/queriesfolder, add a
get-storefront-access-token.jsfile that queries the GraphQL Admin API's
Shopobject for the first Storefront API access token.
server/handlers/mutationsfolder, create a
create-storefront-access-token.jsfile that creates a new Storefront API access token.
server/handlers/index.js, export the functions created from the handlers module.
The file should now look something like the following:
serverfolder where you used the query and mutation, create a
server/helpers.js, add a helper function that creates a Storefront API access token if one doesn't already exist.
server/server.js, in the
afterAuthfunction, use the code written above to retrieve the Storefront API access tokens and store them in the database.
afterAuthshould now look something like the following:
Step 3: Add an internal GraphQL API endpoint
After you've updated your authentication callback to save the shop domains and Storefront API access tokens, your channel app needs to be able to retrieve them so that it can fetch shop and product details for multiple merchant shops using the Storefront API.
For this tutorial, you'll build an internal GraphQL API using Apollo Server.
Add Apollo Server.
server/graphqlfolder to contain the files for the internal GraphQL API.
server/graphqlfolder, create a
schema.jsfile with a schema that consists of a
server/graphqlfolder, create a
resolvers.jsfile with the resolvers that'll fetch the data to be returned for the
server/graphql/index.js, export the schema and resolver constants from the
server/graphqlfolder using an
server/server.js, add Apollo Server middleware to the koa app to make the GraphQL endpoint available at
Restart your server and navigate to your app’s GraphQL endpoint. This should redirect you to a GraphQL playground where you can see the schema and query your API.
- Learn how to build up the merchant-facing channel app page for the Shopify admin.