• Stars
    star
    715
  • Rank 63,327 (Top 2 %)
  • Language
    TypeScript
  • Created over 3 years ago
  • Updated 2 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Create your own dropshipping store with Next.js, Snipcart & Printful πŸ‘•

Headless Dropshipping Starter

🧦 Build your own Headless eCommerce storefront with Next.js and Snipcart, and deliver swag powered by Printful. End to end commerce, styled using Tailwind CSS and deployed on Vercel.

Demo Β· Watch video demo Β· Learn more

Headless Dropshipping

Features

  • Realtime shipping prices
  • Secure payments
  • Automatic fulfillment
  • Built with Next.js
  • Cart & Checkout with Snipcart
  • Styled with Tailwind CSS
  • Fully Typed
  • Recover abandoned carts
  • One click deploy
  • ... and more coming soon!

Setup

You'll first need to setup Snipcart & Printful before you can run the storefront locally, or deploy.

1. Setup Printful

Login or create an account

You can login, or sign up with Facebook, Google, Apple, and your email.

Create a new store

You'll want to select Manual order platform / API from the available methods when creating a new store.

Add products to your inventory

Let's add a product to your store.

  1. Select from over 200 hundred products which you would like to sell.
  2. Configure the product design by adding your logo, selecting available colors, and sizes.
  3. Next, proceed to mockups to select the image that will be shown in the storefront. You can select from people wearing your product, to flat wrinkled mockups. Make sure to select PNG as your "mockup format" when creating your product.
  4. Next, proceed to details where you can name your product. This name will be shown in the storefront.
  5. Next, proceed to pricing, and set some prices. Here you'll see the price it costs you, and the retail prices you'll charge your customers. You can quickly increase/decrease the profit margin here too.
  6. Save product

That's it! πŸŽ‰ Repeat this step for all products you want to sell.

ℹ️ Don't forget, shipping and taxes are extra!

ℹ️ You can optionally create a Product Template for items you may want to add to additional stores later.

Configure selling preferences

Inside Settings > Stores, you'll want to configure your default selling preferences. You can specify your selling region. You can opt to sell worldwide, and choose products from a wide variety of products, or you can set a specific region, such as the UK.

Depending on where you sell, you'll be liable to pay (or collect + pay) VAT. If you are VAT registered, provide Printful your VAT ID so orders can reflect a zero VAT amount where applicable.

πŸ“Ί Learn more about VAT and Printful

ℹ️ If you need to collect VAT from customers, make sure to enable the Tax API with Snipcart.

Configure shipping preferences

Inside Settings > Stores > Shipping, you'll want to configure the USA & Europe settings.

The defaults should work for most, but you might want to make some adjustments for domestic and international shipping.

Create a Printful Private token

Inside Settings > Stores > API, click visit Printful Developers.

From here you will want to create a new Private token, select the store you want to give this token access to, select the permissions (all), set an expiry and copy the value for use later as PRINTFUL_API_KEY.

Add a billing method

You'll want to add a billing method to Printful so you can fulfill orders.

When a customer makes an order, Printful will charge YOU to process the order. πŸ“Ί Learn more how Printful processes payments for order fulfillment.

2. Setup Snipcart

Login or create an account

You'll need to register, or login to Snipcart.

API key

Head over to Account > API Keys to get your Public API Key. You'll want to switch to LIVE mode.

Make a copy of your Public API Key for use later. You'll need it when deploying, or running locally.

Configure your website domain

It's important you configure your Default Website Domain so Snipcart can successfully validate product prices.

You may also want to add other domains, and subdomains if you're working locally with this.

The domain you provide here will be your live URL, such as headlessdropshipping.com.

You should also configure a Redirect URL. I have this set to the root domain of my store.

Configure webhooks

You'll want to configure the endpoint for webhooks. This webhook will be triggered throughout various stages of the pre, and post purchase stages.

For example, when a customer places a successful order, this webhook will be triggered, and it will call a function to add the order to Printful.

The webhook URL you provide here will be your domain appended by /api/snipcart/webhook.

Enable shipping

Unless you want to cover the cost of all shipping, you should enable Shipping. Below the heading Custom Shipping, select Webhooks, and Configure it.

**The endpoint URL you provide here will be your domain appended by /api/snipcart/shipping.

Enable taxes (optional)

Similar to shipping, you can enable custom taxes via a webhook. You should only enable this if you are VAT registered. Make sure to inform Printful of your VAT ID.

You will want to turn on webhooks, and click Configure.

**The endpoint URL you provide here will be your domain appended by /api/snipcart/tax.

The taxes you must collect are then calculated by Printful.

Configure your payment gateway

You should enable SCA (Strong Customer Authentication) for purchases.

To connect a payment gateway, click on Connect next to the gateway, such as Stripe.

Configure regional settings

You'll want to configure your regional settings for Snipcart. I would match the currency you buy with Printful with what you show on the store here. Printful will return a currency with your variants, this is what is added to the cart. It's important Snipcart knows about this currency, and how to format it in the cart/checkout.

Create a recovery campaign

You should create a new recovery campaign for abandoned carts. You can specify when this should be invoked (on orders above a certain amount), and what email is sent.

You can include a custom discount to the campaign so you can try to recover lost sales.

Add a credit card

See Snipcart pricing and add a credit card to your account. Snipcart has a monthly fee if you are below a certain sales amount.

With Snipcart you can invite multiple users to your account, configure your invoice templates, email templates, and much more. You should do all of this to ensure a great end to end experience for your customers.

3. Deploy

You'll need your PRINTFUL_API_KEY and NEXT_PUBLIC_SNIPCART_API_KEY to deploy.

Deploy with Vercel

Running locally

Copy the example env.local file, and add the necessary ENV variables.

cp .env.local.example .env.local

You'll next want to install the project dependencies, and start the local server:

npm install
npm run dev

Open http://localhost:3000 to see the storefront locally! πŸš€

More Repositories

1

create-react-app-redux

React Router, Redux, Redux Thunk & Create React App boilerplate
JavaScript
919
star
2

react-use-cart

React hook library for managing cart state
TypeScript
331
star
3

commerceql

UNMAINTAINED
JavaScript
212
star
4

fakerql

Hosted faker GraphQL endpoint for frontend developers
TypeScript
149
star
5

awesome-headless-commerce

A community curated list of headless commerce APIs, products, and services. A heads-up for modern store builders.
117
star
6

jamstackbb

Simple forum software powered by Next.js and GraphQL.
JavaScript
48
star
7

chatbase

TypeScript
38
star
8

graphql-server-tutorial

JavaScript
33
star
9

graphql.wtf

Learn something new with GraphQL, every week πŸ‘‡πŸ»
TypeScript
29
star
10

nextjs-commercejs-example

JavaScript
16
star
11

nextjs-tailwindcss-starter

JavaScript
15
star
12

graphqlconf-2019

Website implementation of GraphQL Conf 2019
JavaScript
15
star
13

printful-request

JavaScript
14
star
14

apollo-federation-zeit-now-demo

JavaScript
12
star
15

graphcms-nextjs-example

JavaScript
11
star
16

nuxtjs-commercejs-example

Vue
9
star
17

apollo-datasource-givefood

πŸ₯« Apollo data source for GiveFood API.
JavaScript
8
star
18

nextjs-stripe-intents

JavaScript
8
star
19

gatsby-source-transistorfm

πŸŽ™ Gatsby source plugin for fetching show and episode data from Transistor
JavaScript
8
star
20

producthunt-graphql-layer-clone

JavaScript
7
star
21

express-babel-starter

πŸ”₯ Babel / ExpressJS Starter Kit
JavaScript
7
star
22

dotfiles

My dotfiles ⚑️
Shell
6
star
23

create-react-app-apollo-redux

Get started using React with Redux & Apollo.
JavaScript
6
star
24

styledbyme-tutorial

https://www.youtube.com/watch?v=u6gQ48rSw-E
JavaScript
6
star
25

graphql.wtf-type-safe-resolver-codegen

TypeScript
6
star
26

react-graphql

JavaScript
6
star
27

cmsly

Build your own branded short links with GraphCMS & Vercel
JavaScript
6
star
28

next-graphql-handler

JavaScript
5
star
29

chec-request

Lightweight Chec eCommerce client for Node, browsers and serverless functions
JavaScript
5
star
30

gatsby-source-chec-example

JavaScript
4
star
31

graphcms-migrate

JavaScript
4
star
32

now-next-graphql-monorepo

JavaScript
4
star
33

graphql.wtf-graphql-helix-nextjs

JavaScript
4
star
34

zeit-apollo-server

JavaScript
4
star
35

page-reactions-with-sveltekit

Svelte
3
star
36

shortcuts

Handlebars
3
star
37

frontendne-graphql-demo

JavaScript
3
star
38

graphtools-tutorial-code

JavaScript
3
star
39

create-react-app-hapi

JavaScript
3
star
40

apollo-modules-example

JavaScript
3
star
41

create-react-app-apollo

HTML
3
star
42

micro-stripe-charge

JavaScript
3
star
43

graphql.wtf-merging-resolvers

JavaScript
3
star
44

gatsby-source-trackingmore

Gatsby source plugin for fetching carriers from Trackingmore.com
JavaScript
3
star
45

graphql.wtf-remix-graphql

JavaScript
3
star
46

dynamic-graphql-nextjs-forms

JavaScript
2
star
47

commercejs-graphql-server

JavaScript
2
star
48

moltin-graphql-storefront-example

JavaScript
2
star
49

graphcms-remix-starter

TypeScript
2
star
50

graphiqlbin

JavaScript
2
star
51

sapper-commercejs-example

JavaScript
2
star
52

gatsby-theme-transistorfm

πŸŽ™ Gatsby theme for Transistor
JavaScript
2
star
53

apollo-server-givefood

Make requests to Give Food API using GraphQL.
JavaScript
2
star
54

gatsby-starter-netlify-cms

JavaScript
2
star
55

graphcms-gatsby-source-graphql

JavaScript
2
star
56

gatsby-plugin-statickit

JavaScript
2
star
57

graphql.wtf-graphql-codegen-apollo-client

TypeScript
2
star
58

next-commerce

1
star
59

use-snipcart

TypeScript
1
star
60

sanity-gatsby-blog

Blog with Gatsby
JavaScript
1
star
61

graphql.wtf-graphql-yoga

TypeScript
1
star
62

getwalter

Ruby
1
star
63

graphsale-dashboard

JavaScript
1
star
64

testtt

1
star
65

graphql.wtf-graphql-yoga-2

TypeScript
1
star
66

graphql.wtf-sdl-descriptions

TypeScript
1
star
67

babel-pkg-starter

JavaScript
1
star
68

graphql.wtf-serverless-graphql-vercel

JavaScript
1
star
69

notrab

1
star
70

productshare

Build a voting platform in 7 days.
Ruby
1
star
71

graphql.wtf-remote-schema-stitching

JavaScript
1
star
72

gatsby-theme-cart

πŸ›’ A drop-in shopping cart theme for Gatsby
JavaScript
1
star
73

moltin-digital-file-delivery

WIP
JavaScript
1
star
74

gatsby-graphcms-snipcart-starter

JavaScript
1
star
75

norsound.com

JavaScript
1
star
76

apollo-datasources-graphcms-example

JavaScript
1
star
77

image-transformation-directive

1
star
78

graphql.wtf-kitql

TypeScript
1
star
79

express-examples

JavaScript
1
star
80

now-api-starter

TypeScript
1
star
81

graphql-in-a-rest-world-talk

JavaScript
1
star
82

moltin-react-checkout

JavaScript
1
star
83

micro-infrastructure-talk

JavaScript
1
star
84

graphql.wtf-authorization-with-graphql-shield

JavaScript
1
star
85

nextjs-styled-components-semantic-ui

JavaScript
1
star
86

moltin-cli2

JavaScript
1
star
87

react-redux-express-starter

Boiler plate code for getting started with Create React App + Redux + Express
JavaScript
1
star
88

tailwind-dark-mode-switcher-example

JavaScript
1
star
89

moltin-graphql-checkout

TypeScript
1
star
90

react-stick-it

JavaScript
1
star
91

vue-commercejs

JavaScript
1
star
92

graphql.wtf-envelop-response-cache

TypeScript
1
star
93

video-graphql-middleware

JavaScript
1
star
94

gatsby-theme-graphcms-docs

JavaScript
1
star
95

graphql.wtf-error-handling-union-types

TypeScript
1
star
96

sentry-integration-libsql-client

TypeScript
1
star
97

shopkit

Moltin Shopkit is a minimalist component library that enables developers to easily embed commerce inside applications built with React.
JavaScript
1
star