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
Requirements:
- yarn - Checkout
this branchfor 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-appInstall dependencies:
yarnRun local development server:
yarn devChange 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.
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.
| Folder/file | Contains |
|---|---|
pages/* |
All the routes of your |
components/* |
Contains common React components that are used in multiple places in the app. |
public/* |
|
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. |
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.
| 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 |
- 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
This repository is available as open source under the terms of the MIT License.