Create a Marketplace in Less than 8 Minutes with Shopify’s Marketplace Kit

As new online platforms gain popularity, we can see that ecommerce doesn't just apply to websites. New opportunities are opening up for merchants to connect with buyers, and you can now add commerce features to any platform withShopify Marketplace Kit. Marketplace Kit enables you to use Shopify's commerce features and connects your platform to millions of merchants and their products.

What’s new with the latest Marketplace Kit?

With the latest version, it's now incredibly fast to build a basic marketplace using Marketplace Kit. To speed up your development workflow, we've decoupled from the Shopify CLI and created two new apps to help get you started.

Marketplace Kitallows you to start building a marketplace whether you have an existing platform or not. The world’s most innovative brands, such as Meta, TikTok, and Pinterest, have used Marketplace Kit to add commerce to their platforms.

You can use our flexible APIs to add commerce to an existing platform, or use our apps to build a brand new marketplace. Additionally, you get access to millions of Shopify merchants who can install your sales channel and start selling their products on your existing or new platform.

We knew there were an abundance of independent brands competing for customers' attention, and after some quick research, we found that 90%+ of them were using Shopify. It's a no brainer really. Shopify is a fantastic platform for getting an E-Commerce business up and running in no time at all.

How does it work?

Shopify Marketplace Admin app

Initially, Marketplace Kit provided walkthrough tutorials on how to create a merchant-facing app and connect it to an external marketplace, easing the complicated process of developing a marketplace channel app (merchant-facing in the Shopify admin) and connecting it externally. Now, we've gone a step further and removed the need to build a merchant-facing app from scratch.

Instead, we've created theShopify Marketplace Admin app, an out-of-the-box starting point for your merchant-facing marketplace app. This app comes with authentication, routing, basic pages,Channels-UIintegration and key API calls built in. No need for weeks of setup time now, simply clone the repo and go!

In creating the Shopify Marketplace Admin app we used widely used, readily available technologies that are well supported and documented. This means we can appeal to the largest number of partners possible.

The key technology that’s used in the Shopify Marketplaces admin app are:

• Yarn
• NPM
• Node
• Express
• Webpack
• React
• Sequelize
• Channels UI Library
• GraphQL and REST
• Storefront API

Shopify Marketplaces Buyer app

许多Shopify伙伴已经拥有或管理一个现有sting platform and wish to embed commerce into it. But there's a growing number of partners and agencies that don't have a buyer-facing marketplace yet.

These marketplaces have previously been at a disadvantage because they have to build both the merchant-facing and buyer-facing experiences. To help, we created an app for partners who want to build a marketplace from the ground up and bundled it into our Shopify-specific opinions.

TheShopify Marketplaces Buyer appis a springboard for partners who don't already have a marketplace. This app gives you a basic marketplace, complete with a frontend and backend. Developers can use this app as a starting point for their own marketplace vision and can see how it ties in directly with the merchant-facing app.

We've packaged up key features and API calls into this app to help reduce the complexity and heavy lift of initial setup. We don’t see the app as an out-of-the-box, production-ready, solution for marketplaces. However, it's a valuable starting point that you can easily build on and customize because it incorporates key technology that's widely used.

Key technology that's used in Shopify marketplaces buyer app includes:

• Main frontend framework: NextJS, which is a framework for ReactJS
• Main CSS library: MUI - Material UI
• Data fetching: GraphQL
• The Shopify API that provides store channel data: Storefront API

These two starter apps, coupled withdetailed walkthrough tutorialsin our developer documentation, mean that getting started with creating a marketplace or embedding commerce on your existing platform has never been easier.

Keeping our store in sync was made a whole lot easier by the product listing API and webhooks. Shopify's developer documentation is fantastic. They had a dedicated area on their dev site for sales channels and so we quickly began to build the app & site.

What’s in it for me?

Fast setup time

Following the instructions, we were able to create a basic marketplace from scratch using the Shopify Marketplaces Buyer and Shopify Marketplaces Admin apps in just eight minutes. Can it be done faster? We’re sure it can!

We've worked with partners of all sizes and have seen that it can take months to build the initial setup. Because of this we have condensed everything we've learned over the last few years into the Marketplace Kit experience. Any size partner can learn from what we’ve baked into our code. Pull the common patterns and use as the need arises.

We’ve got the nitty-gritty covered

We’ve removed the heavy-lifting of common code that all partners will need to include in their merchant-facing app. No matter the platform or partner size, there are some things that all admin apps need to do. These include:

• Connecting to a merchant’s store
• Retrieving and storing data
• Display an overview page
• Display an onboarding page

The process for these can be quite complex, connecting to multiple merchant stores and saving storefront access tokens for shop data retrieval in particular. We used theStorefront APIcoupled with JWT authentication using App Bridge, Shopify’s Node API and Express, for serving REST and GraphQL. You can read more about why we chose these technologies on our Engineering blog post.

Start customizing right away

Our apps use common technology (see above) that is well supported so customizing is easy from the get go. For example, we use theMUI - Material UIlibrary as the main CSS library for the buyer-facing app. If you don’t want to use this library, you can easily swap it out for your own CSS library.

Another example is theOnboarding pagein the merchant-facing app. We've provided a simple onboarding page with an information card and placeholder text to get you started. You can create new sections, add more components and more using the patterns that exist in the merchant-facing repo andChannels-UI.

Tutorials and walkthroughs onshopify.dev/marketplaces

Our tutorials are tried and tested. Coupled with the apps you can add additional functionality to your marketplace.

So, how do I get started?

It is as easy as one, two, three. Well, there are actually eight steps to follow to get up and running, but you get it— it’s fast. We've completed the setup in eight minutes and would love to see how quickly it can be done.

The prerequisites:

• You have the Shopify CLI installed
• You have the Sequelize CLI installed
• You've installed the latest versions of Node.js and npm
• You have Yarn installed
• 您已经创建了一个合作伙伴账户和发展store
• You have created an app in the Partners dashboard and have turned it into a sales channel

The instructions:

• CloneShopify Marketplaces Admin app
• Install and run yarn
• Run migrations (```npx sequelize-cli db:migrate```)
• 创建一个在根和添加followi .env文件ng scopes: unauthenticated_read_product_listings,read_product_listings
• Run Shopify CLI (```shopify app serve```) and follow prompts
• CloneShopify Marketplaces Buyer app
• Install and run yarn
• Run buyer app

Let’s go!

You now have a solid starting point for your marketplace and can begin exploring the code, the tutorials, and how to customize. Feel free to comment or improve directly on our repos in GitHub.

Shape the future of your tools.

Fill out thisshort surveyfor consideration to be a part of the Developer Beta Program for Marketplaces at Shopify!