Getting started with Marketplace Kit
You're ready to create a marketplace. You want to showcase products from multiple merchants on your platform and direct buyers towards a sale. You'll get started with a basic framework that you can build on.
In this tutorial, you'll clone code for the channel app and set up the marketplace's routing, access, and data query framework.
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:
Set up a merchant-facing channel app
Navigate the channel app code
Requirements
Anchor link to section titled "Requirements"You've installed Shopify CLI 2.x. Shopify CLI 2.x and 3.x can be run in the same environment.
You've installed Yarn.
You've installed Sequelize CLI. The channel app uses Sequelize as the ORM, so having the associated CLI is useful.
You've completed the GraphQL and REST Admin API getting started and you're authenticated with the APIs using OAuth and an offline access mode.
You've created a Partner account and a development store.
You understand how apps fit into Shopify and the different ways of distributing your app.
You're familiar with channels.
You're familiar with the Storefront API.
Step 1: Clone the app repository
Anchor link to section titled "Step 1: Clone the app repository"In this step, you'll clone the repository that contains code for the merchant-facing sales channel app.
Step 2: Add the required scopes to a .env file
Anchor link to section titled "Step 2: Add the required scopes to a .env file"The app requires a set of access scopes to access shop data.
At the
shopify-marketplaces-admin-appproject root, create a.envfile.In the
.envfile, add the following access scopes:
Step 3: Install packages
Anchor link to section titled "Step 3: Install packages"At the project root, run the following command:
The packages for the app are listed in the yarn.lock file.
Step 4: Connect and set up your database
Anchor link to section titled "Step 4: Connect and set up your database"The app connects to the database using Sequelize ORM, and uses a SQLite file as the database. You can edit this to connect to your own database. You can either use a new database or connect the app to an existing database. After your database is connected, you'll run the migrations to create the required data tables.
In
config/config.json, edit the database values to connect to your database. For more information on how to connect the database, refer to the Sequelize documentation.Run the migrations that create the data tables.
Migrations will be in the
migrationsfolder. All associated models will be in themodelsfolder.
You can optionally edit the migrations and set up models based on a table in an existing database.
Step 5: Run the app using Shopify CLI
Anchor link to section titled "Step 5: Run the app using Shopify CLI"The channel app is set up and ready to run. To run the app, you'll use a Shopify CLI command.
- Run the app.
Follow the instructions to connect to your Partner account, Partner development store, and your Partner development app.
Visit the outputted link to see your app on your Shopify Partner Admin account.
Step 6: Review the Marketplace Kit code structure
Anchor link to section titled "Step 6: Review the Marketplace Kit code structure"Familiarize yourself with the code structure for the merchant-facing app, to help orient you to subsequent Marketplace Kit tutorials.
| Folder/file | Contains |
|---|---|
app/* |
React code for the frontend, which the merchant sees in the Shopify admin |
server/index.js |
The setup for the app's Express server, the Shopify API library, and the Apollo GraphQL server |
server/custom-session-storage.js |
Custom session storage functions to store data in the database. You might need to edit this for the database that you're using |
server/handlers/* |
Helper functions for making REST and GraphQL calls to Shopify, so that you can do things like create Storefront Access Tokens Callback functions that are called when the app receives a webhook from Shopify |
server/helpers.js |
Helper and wrapper functions that call functions in the handlers folder |
webpack.config.js |
The configuration for webpack, which is the app's module bundler You might need to edit this file depending on your needs for development and production |
Learn how to build up the merchant-facing channel app page for the Shopify admin.
Share feedback on Marketplace Kit.