Bluehen-Commerce built with Next.js

The all-in-one starter kit for high-performance e-commerce sites. With a few clicks, Next.js developers can clone, deploy and fully customize their own store. Start right now at nextjs.org/commerce

live at: https://commerce-hcod.vercel.app/

Configuration

How to change providers

Open .env.local and change the value of COMMERCE_PROVIDER to the provider you would like to use, then set the environment variables for that provider (use .env.template as the base).

The setup for Shopify would look like this for example:

COMMERCE_PROVIDER=shopify
NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN=xxxxxxxxxxxxxxxxxxxxxxxxxxxx
NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=xxxxxxx.myshopify.com

And check that the tsconfig.json resolves to the chosen provider:

  "@framework": ["framework/shopify"],
  "@framework/*": ["framework/shopify/*"]

That's it!

Features

Every provider defines the features that it supports under framework/{provider}/commerce.config.json

Features Available

The following features can be enabled or disabled. This means that the UI will remove all code related to the feature. For example: Turning cart off will disable Cart capabilities.

• cart
• search
• wishlist
• customerAuth
• customCheckout

How to turn Features on and off

NOTE: The selected provider should support the feature that you are toggling. (This means that you can't turn wishlist on if the provider doesn't support this functionality out the box)

• Open commerce.config.json
• You'll see a config file like this:

  {
    "features": {
      "wishlist": false,
      "customCheckout": true
    }
  }

• Turn wishlist on by setting wishlist to true.
• Run the app and the wishlist functionality should be back on.

How to create a new provider

Follow our docs for Adding a new Commerce Provider.

If you succeeded building a provider, submit a PR with a valid demo and we'll review it asap.

Contribute

Our commitment to Open Source can be found here.

1. Fork this repository to your own GitHub account and then clone it to your local device.
2. Create a new branch git checkout -b MY_BRANCH_NAME
3. Install yarn: npm install -g yarn
4. Install the dependencies: yarn
5. Duplicate .env.template and rename it to .env.local
6. Add proper store values to .env.local
7. Run yarn dev to build and watch for code changes

Work in progress

We're using Github Projects to keep track of issues in progress and todo's. Here is our Board

People actively working on this project: @okbel & @lfades.

Troubleshoot

I already own a BigCommerce store. What should I do?

First thing you do is: set your environment variables

.env.local

BIGCOMMERCE_STOREFRONT_API_URL=<>
BIGCOMMERCE_STOREFRONT_API_TOKEN=<>
BIGCOMMERCE_STORE_API_URL=<>
BIGCOMMERCE_STORE_API_TOKEN=<>
BIGCOMMERCE_STORE_API_CLIENT_ID=<>
BIGCOMMERCE_CHANNEL_ID=<>

If your project was started with a "Deploy with Vercel" button, you can use Vercel's CLI to retrieve these credentials.

1. Install Vercel CLI: npm i -g vercel
2. Link local instance with Vercel and Github accounts (creates .vercel file): vercel link
3. Download your environment variables: vercel env pull .env.local

Next, you're free to customize the starter. More updates coming soon. Stay tuned.

BigCommerce shows a Coming Soon page and requests a Preview Code

After Email confirmation, Checkout should be manually enabled through BigCommerce platform. Look for "Review & test your store" section through BigCommerce's dashboard.

BigCommerce team has been notified and they plan to add more detailed about this subject.