Elliot's Vercel Next.js Ecommerce Boilerplate

Features

• Deploy, sell and fulfill in seconds
• Fully localized: multi-currency and language, duties and taxes (DDP - Delivered Duty Paid)
• Native cross border fulfillment: packing, shipping and return labels, commercial invoices and custom declarations forms
• Instant global payments: Apple, Google, Ali and WeChat Pay, plus all major credit cards and leading payment options (Klarna, iDEAL)
• Static SSR for collections, products and all simple pages, in 100+ languages
• Fast and high performing (90%+ across a11y, Performance, and SEO)
• Fully customizable
• Mobile-first and fully responsive
• Cutting-edge project structure and architecture (GraphQL, Next.js and serverless)
• Continuous deployment with Vercel

Prerequisites

Create an Elliot account

Start by creating a store and add a few products to it!

Yarn or NPM

Online

1. Login on Elliot
2. Choose a domain space
3. Click on "Get Headless"
4. Follow the onboarding and you will be good to go!

To enable Apple Pay, you will have to get the Apple verification file and place it under /public/.well-known/

Follow this Guide to get the Apple verification file

Locally

1. Install the Elliot CLI running

   npm i -g elliot-cli

   Or

   yarn global add elliot-cli

2. Login to Elliot via the CLI running

   elliot login

3. Get your domain and experience by running

   elliot deploy

4. Choose your domain ID and experience and it will automatically clone this boilerplate and handle everything for you

   It will create .env.development file with the right env variables keys//values, delete any files unrelated and install the dependencies used.

5. To enable Apple Pay, you will have to get the Apple verification file and place it under /public/.well-known/

   Follow this Guide to get the Apple verification file

6. Run the following commands to start the server locally on port 3000:

   yarn run dev

7. When deploying to Vercel, you will have to set the Now secrets, so ensure that they've been added:

   now secrets add base_url <your domain name>
   now secrets add elliot_env_variables <your Elliot env variable>
   now --prod

   You can get these values from your .env.development file

Custom theme

You can easily customize the theme by changing the values on the theme config here

Preview mode

We do support Next js preview mode

1. Add ELLIOT_PREVIEW_MODE_SECRET as env variable with a secret value to be kept somewhere safe, you can add the env variable to your Vercel project settings

2. Now visit the following link

   <your website link>/api/preview?secret=<ELLIOT_PREVIEW_MODE_SECRET value>&slug=<your product slug>

3. You can now open the same product on Elliot, edit it and see the changes live when ever you refresh the product page

You might have to upgrade your Vercel account in order to prolonge the serverless function running time to go over 10 seconds.

Core Team

If you're new and need some guidance feel free reach out to any of our core team members:

• Franco Arza: @arzafran
• Ismail Ghallou: @smakosh
• Omoefe Dukuye: @un-tethered

Structure

.
├── src
│   ├── assets              # Assets used including the default thumbnail of the website
│   ├── components          # Components
│   │   │── cart              # Components used on the cart page
│   │   │── checkout          # Components used on the checkout page
│   │   │── common            # Common components
│   │   │── listing           # Components used on the landing page
│   │   │── product           # Components used on the product page
│   │   │── shipping          # Components used on the checkout page
│   │   └── theme             # Header, Footer, global style and theme config
│   ├── config              # Config variables
│   ├── helpers             # Helpers functions
│   │   │── buildtime         # queries run on build time
│   │   │── constants         # constants
│   │   │── i18n              # functions to get browser's locale and anything related to i18n
│   │   │── payment           # payment logic
│   │   │── runtime           # queries run on run time
│   │   │── shipping          # shipping logic
│   │   └── ...               # 3 files, alert out of stock, attributes and isEmpty without lodash
│   ├── hoc                 # Higher order components
│   ├── hooks               # Custom hooks
│   ├── lang                # i18n json files
│   ├── pages               # Pages
│   │   │── [lang]            # To have a page for each language supported
│   │   │   │── collection            # Collection page
│   │   │   │   └── [slug]
│   │   │   │── product               # Product page
│   │   │   │   └── [slug]
│   │   │   │── about                 # About page
│   │   │   │── cart                  # Cart page
│   │   │   │── checkout              # Checkout page
│   │   │   │── failed-order          # Failed order page
│   │   │   │── faqs                  # Faqs page
│   │   │   │── index                 # Home page
│   │   │   │── privacy-policy        # Privacy policy page
│   │   │   │── return-policy         # Return policy page
│   │   │   │── successful-order      # About page
│   │   │   └── terms-and-conditions  # Terms and conditions page
│   │   │── api               # Next API routes
│   │   │   │── exit-preview    # To exit preview mode
│   │   │   └── preview         # To enable preview mode
│   │   │── _app
│   │   │── _document
│   │   │── _error
│   │   │── product
│   │   │── shipping
│   │   └── _error
│   ├── providers           # Providers
│   ├── queries             # GraphQL queries we run during build time
│   ├── reducers            # Reducers
│   └── scripts             # Scripts meant to be executed before building the website
└── public/.well-known/    # Where you'd put the Apple verification file

Built with

• Next.js
• React
• VSCode
• And these useful of JavaScript libraries package.json

Want to contribute?

Want to invest some time in building the future of global commerce? Email us at [email protected].

If you have discovered a 🐜 or have a feature suggestion, feel free to create an issue on Github.

Enabling Digital Wallets

To enable wallets such as Apple Pay, your Vercel package will need a verification file from Elliot.

To receive that verification file, and be added to our Slack, email our Partnerships team.