Shopify Buyer-Facing Marketplace App

This is a Next.js project bootstrapped with create-next-app. It connects to the Shopify Merchant-Facing Channel App using GraphQL. It is an example of a simple buyer-side client application that can be used to get started quickly with marketplaces. The code in this repo comes directly from Marketplace Kit tutorials on https://shopify.dev/marketplaces and be used as a springboard starting point for development of a buyer facing marketplace.

---

• 1. Getting Started
• 2. Overview of Code Structure
• 3. How to use this repo (including tutorial links & files modified)
• 4. Key Tech
• 5. License

---

1. Getting Started

Requirements:

• yarn - Checkout this branch for npm-specific setup instructions
• Setup the merchant-facing app, this is where we get data to hydrate our client
• Ensure you have NodeJS installed on your system.

Clone this repository:

git clone https://github.com/Shopify/shopify-marketplaces-buyer-app

Install dependencies:

yarn

Run local development server:

yarn dev

Change graphql uri:

We connect to the merchant-facing-app to retrieve important information like shop name and storefront access token. To do this we connect to the merchant-facing-app graphql endpoint. By default this is set to uri: http://localhost:8081/graphql but you can change it to whatever port your merchant facing app is running on. To do this edit line 129 in /pages/cart/index.js line 129.

const client = new ApolloClient({
    uri: `http://localhost:8081/graphql`,
    ...
});

Open marketplace in browser:

Open http://localhost:3000 with your browser to see the result.

2. Overview of Code Structure

Familiarize yourself with the code structure for the buyer-facing app, to help you add all additional features that will be required, it is a great way to get started! It follows Next project conventions.

Code structure

Folder/file	Contains
pages/*	All the routes of your Next.js application will be placed in this directory.
components/*	Contains common React components that are used in multiple places in the app.
public/*	Explained here: Statically serve files like robots.txt and favicon.ico.
styles/*	CSS in this directory.
.eslintrc.json	Defines the configuration structure for ESLint as JSON.
next.config.js	Configuration file for your Next project.
.gitignore	Tells Git which files to ignore whe commiting to your project.
package.json	Records important metadata about a project, heart of Node project.
yarn.lock	Lockfile is generated according to the contents of package.json.

3. How to use this repo

We have bundled up the code from our tutorials to help you get started building marketplaces quickly. You can use the code in this repo out-of-the-box but we highly recommend familiarizing yourself with the codebase and tutorials so you can have a full understanding of how it works. This will make it easier for you to modify and customize your marketplace.

Below is an ordered list of tutorials with the files affected.

Tutorials

Tutorial URL	Files Modified
https://shopify.dev/marketplaces/shop-discovery	pages/index.js - components/page.js
https://shopify.dev/marketplaces/shops	pages/shops/[id].js - pages/index.js - components/productGrid.js - pages/products/[shopid]/[producthandle].js
https://shopify.dev/marketplaces/cart-and-checkout	helpers/cartHelpers.js - components/page.js - pages/products/[shopid]/[productHandle].js - pages/cart.js

4. Key tech

• Main tech- 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

5. License

This repository is available as open source under the terms of the MIT License.