notrab / headless-dropshipping-starter Goto Github PK

Create your own dropshipping store with Next.js, Snipcart & Printful 👕

Home Page: https://headlessdropshipping.com

JavaScript 1.60% TypeScript 92.08% CSS 6.32%

headless-dropshipping-starter's Introduction

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

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

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.

Select from over 200 hundred products which you would like to sell.
Configure the product design by adding your logo, selecting available colors, and sizes.
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.
Next, proceed to details where you can name your product. This name will be shown in the storefront.
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.
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

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.

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! 🚀

headless-dropshipping-starter's People

Contributors

Stargazers

Watchers

Forkers

nilportugues rowe-morehouse kreo bansicloud hirajanwin parweb cnscorpions astaqc dannyelpina leobar37 mirql rmhulle johnlim5847 param-harrison theamargupta koji fairhopeweb tchigher theruchirshah ousmane-haidara mks786 letib0 mariusvb zomdar aura-glitch mraf ekaone lelinta nicolasleon rrmdp luizfelipebaroncello harshsinghmp thbland amahaveer rayuzaki83 jrciii ishan-marikar marksteph harshitpuri fubespu carqu ohmdios handmadeland88 antiidlecoder shubham-kaushal vladimir-code47 andbostick alexookah dickosmad lillianday scrutch93 sicarius97 c05m0ch405 farhansrepo acamposla der-ofenmeister wianrossouw jjmachom ashton-c dave-tucker accessible-concepts shobhit-mishra-02 darlley technobeli z0st jessopb mudasir028 chazz-codes kiss96dani bmocrypto d4li gn-spawn kaus1000 jmihc theemack alexander-fernandez-1997 jackson-harris-iii ray-s-forks caleb130 kevin820125 xdragon93 tantruong-amblique brianjeball nucternal18 nikhil-desai rooleary koopiblock vasily93 iconifyit doiska nuhnicek hasanyafai ingramirezrivera tanmpham liute62 lcsouzamenezes thuggerhacks matt-peck blueclub04 vision-live

headless-dropshipping-starter's Issues

Filter product types

I'd like to create a filter or pages that show products under a specific category, for example Stickers / T-Shirts / Hoodies etc

Is this possible and does someone know how I could achieve this? Specifically react/js/api code

Thanks in advance and thanks Jamie for creating this great resource!

printful api change to access tokens

I tried using the private tokens since Printful is not supporting API keys from March 2023. Is this working for this repo yet?

when i click the icon，it doesn't show the register dialog box

💡 Idea: Transform this project into a package

👋 Greetings!

I'm evaluating this project as a starter for a new project. I had an idea on a possible way to improve this project.

It's be really cool if some of the bones of this project were in a separate package, allowing for importing of hooks, lib, components, etc. by other projects.

This would allow for an easy upgrade path for projects that utilize this theoretical package as a dependency.

Anyways, thanks for putting this together. Cheers!

cursor-not-allowed on disabled select box

Somehow I still tried to click to Style input box: Add cursor-not-allowed when there's only one style available:

https://tailwindcss.com/docs/cursor

Some error is happening while fetching shipping rates

I'm not sure why this is happening, but it looks like the error is that the necessary object keys to send through the api had changed

Variants not pulling through sizes

I've just checked with a fresh install (just to check it wasn't something I'd accidentally changed as I'm still learning React) and it seems that the variant information isn't being pulled through from Printful at all. Just the colour.

Have they updated their API? The issue was intermittent at first, but now it seems to be everything.

Initial project setup

Replacing Snipcart With a Self-coded and Custom Shop

Guys,

Great piece of software you've put together 🎉

I need to ask 2 questions before jumping down this rabbit hole:

I'm using Next.js. Is it non-trivial and easy to replace your Snipcart integration with my own custom built e-commerce site? If so, any guidance on where to start? The Printful "docs" just have API endpoints!
If I opted to instead to use an e-commerce CMS like Sanity.io, am I asking for maximum pain?

Seems like option 1 might be easiest, but would love some expert guidance!

The use case is a t-shirt store where

Users can upload their own artwork for printing on t-shirts!
Store sends the image and order to Printful for fulfilment and shipping

Several folks on reddit have the same or similar use case. But they've gotten no clear answers or direction from Printful:

https://www.reddit.com/r/printful/comments/t5owwx/i_need_to_send_orders_to_printful_through_their/

https://www.reddit.com/r/printful/comments/m2nqa1/has_anyone_used_the_printful_api_with_their_own/

https://www.reddit.com/r/printful/comments/u0oscd/two_question_about_the_printful_api/

https://www.reddit.com/r/printful/comments/a6w2fa/can_someone_make_an_in_depth_tutorial_on_how_to/

Why the sign up form is unavailable?

Hi Jamie,

Thanks for creating this cool store. I'm a low-code developer and I deployed the store but the sign up form is unavailble. How to make it signable? I'm looking forward to hearing some new updates like live search, quick view details (description with variants). Thank you so much

I can't add description of the products

Hi! I'm trying to add a short description on my printful products, but I can't see the option to activate.

Consider adding a responsive navbar

I really liked the UI of this ecommerce application, but I think that the navbar should be responsive as the overall design gets spoiled when I decreases the view port width.

Create Product component with variant picker

Printful API Key changes

Printful are using newer API keys now, so this is a reminder for anyone looking at past issues related to API access that you may need to create a new API key.

How to create Product Detail Pages

Hello! I'm a fairly new developer trying to figure out how to expand this project to include detail pages for each product. I know that I will have to hook up to a CMS, then I'm guessing I'll need to find a way to sync that CMS with my Printful product catalog, and I'd like to be able to add data like a category and additional product mockup views...

Could anyone provide some guidance on how I should go about this process? I've got some experience with Sanity CMS, but I'm also open to suggestions of platforms that might make this process easy/possible.

Thanks in advance!

Fetch products from Printful

Beginner: How to Edit Header & Logo

Please give details on how to change the logo in the header, much appreciated for beginners in coding.

Create Layout with Cart button

All Printful Products Not Showing

So, it looks like only a subset (the latest) of products created on Printful are displaying on this SPA.

Is this something you can explain? I'm not sure why this is happening and was hoping you could provide insight.

Thanks for the help.

Add product + variant to Snipcart

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

chore(deps): update dependency @types/react to v17.0.49

Detected dependencies

npm

package.json

classcat 5.0.3

lodash.shuffle 4.2.0

next 12.1.0

next-seo 4.28.1

printful-request 1.1.1

react 17.0.2

react-dom 17.0.2

@tailwindcss/typography 0.5.4

@types/lodash.shuffle 4.2.7

@types/node 17.0.8

@types/react 17.0.47

autoprefixer 10.4.8

eslint 8.6.0

eslint-config-next 12.0.10

postcss 8.4.16

prettier 2.3.2

tailwindcss 3.0.18

typescript 4.5.5

Check this box to trigger a request for Renovate to run again on this repository

Tax calculation

Hey there,

In the /api/snipcart/tax endpoint there is a line which goes

if (eventName !== "shippingrates.fetch") return res.status(200).end();

Shouldn't shippingrates.fetch be taxes.calculate ?

Create shipping rates webhook

Fetch rates from Printful via webhook triggered by Snipcart

Can users add custom image/logo

Hi,

I would like users to be able to upload and use their own image/logo. What would be required for that?

regards

Snipcart shipping 401 Permanent Redirect

I have deployed to my server successfully; however, I receive this error after configuring snipcart to work normally on my local env.

Blocked by CORS policy

Hi, we are in the las step of checkout and get this error:

Access to XMLHttpRequest at 'https://app.snipcart.com/api/cart/ae3216d0-ddcf-4513-a6d3-2f2bf9fbf5c4/pay' from origin 'https://www.xxxxx.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

on the other hand and at the same time we have this logs at snipcart developer logs:

FEB 09 20:53:56	An attempt to create an order with invalid products has been made. Don't forget you can't add/update items attributes in the cart dynamically with javascript as it will cause crawling issues. You can read more about this here: http://docs.snipcart.com/getting-started/security
FEB 09 20:53:56	Using JSON crawler http://docs.snipcart.com/configuration/json-crawler) to validate item '63d1152951fcc5' located at '/api/products/63d1152951fcc5'.
FEB 09 20:53:56	Validating item with id '63d1152951fcc5' located at '/api/products/63d1152951fcc5' on domain www.xxxxx.com'.

Any help will be welcomed.

tia.

New Products not updating on live server

Hi, I'm having an issue where I can pull products on the localhost but whenever I run npm build (next build && next export) with an out directory being generated, I am noticing that there is no network call to printful to get an updated product manifest when uploading that directory to the live web server; instead, there is a shop.json cache which is being used instead.

Can you please help me fix this issue? This is a new site that I have not seen this on previously.

help me it's only fetching the first 20 products.

Consider adding product detail pages

Really love this. I’d like to see the ability to click a product and see a detail view/page. Other than that, this is perfect.

Would be difficult to upgrade the starter to React18?

Hello,

The code is pretty clean but it's far complex to my dev skills and I would like to know the steps to upgrade it to react18.

Thanks

Initialize Snipcart

Create README

Cover setup

Setup Printful + products
Setup Snipcart
Deploy

Create taxes webhook

Create taxes webhook API route that is automatically triggered by Snipcart at checkout.

Create products json API route

Return all products with their prices via a API route

Server Error 400: This endpoint requires `store_id`!

Great project so far, @notrab. Looking forward to getting this project up-and-running, however, I am running into an error code 400 when starting the development server.

I also did some investigating within the Printful API docs and it didn't really tell me much. I have also copied the example .env.local file and put the correct API keys there.

Steps to reproduce:

npm install
npm run dev

I have put a screenshot of the error screen below.

Could it be that the store is too new and has not processed within the Printful system yet? Otherwise, this might just be a really simple issue and I apologize in advance for my poor troubleshooting.

Thank you.

Improve Main Width

It's a quite small thing, but I'd like to remove the toggling of the navigation bar when clicking on the items

7e6582465e0859849ef86f2f5f92e9f0.mp4

User icon doesn't work

I see there was another issue that tried to address this but you closed it #24 .

Yes, when I use the demo online, the icon routes. When I run the project locally, however, it does not function whatsoever.

When I navigate to /#/signin then it remains on the homepage. When I look at the online demo, there are Links which do not exist in this repository in the same way the other functional Links do. I know in your video you say we must create them, but....

Can you please guide me as to how to 1) fix this and 2) how I would go about using the registration/login functionality in a headless server. What and where would I be pointing this to log-in/register?

Thanks so much

The network tab in devtools shows that the favicon.ico is missing. I've tried to add it, but I can't get it to work. I've tried this (https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons) but still can't get it to work for me.

Anyone know how to get this fixed please?