Gatsby starter for headless Shopify commerce sites.
An online demo of this project is available at https://gatsby-starter-shopify-headless-commerce.vercel.app/. To preview the Coming Soon page append
password to the URL.
- Built from scratch using a single codebase extending upon Gatsby Starter i18n React i18next.
- Clean and well-tested shopping experience using Gatsby Theme Shopify Manager data theme.
- Shopify Shop policy pages hosted locally using MDX markdown.
- Dynamic inventory checking verifies limited items are in stock before purchase.
- Coming Soon page with attractive GetForm launch notice email sign-up form.
- Chakra UI component library and design system with persistent light/dark color mode toggle.
- Framer Motion to create stunning visual effects.
- Jest testing framework using Testing Library with integrated test-utils and example tests.
- Functional React component examples written in TypeScript (strict) and using React Hooks API.
- Internationalization with react-i18next and button to toggle between English and Bahasa Indonesia.
- Automatic, in-browser language detection via integrated i18next plugin.
- Custom SVG logo icon borrowed from After Dark theme for Hugo static site generator.
- Copy source code to your machine.
yarnto install dependencies.
yarn devto start a server for development.
yarn testto run unit tests.
yarn type-checkto run type checker.
yarn buildto build site for production.
yarn serveto view production build.
yarn analyzeto inspect JS bundle sizes.
yarn deployto deploy to S3 with server-side redirect to Coming Soon page containing email launch sign-up and password-based login.
SHOPIFY env variables are required to get started. For deployments to S3 you'll need to create a bucket following Gatsby instructions. Coming Soon page redirect should also work on other providers. Some purchasing controls may not work as expected until you set-up your own inventory.
For Auth0 integration on the password page you'll need to create an Auth0 account and complete your configuration using the Auth0 instructions. A word of caution: static pages are not protected by Auth0. You'll need to set-up your own client-only routes for that.
Finally, there's a hard-limit on the number of items which display in the Product Grid. This can be changed by adjusting the GraphQL query filters set in the Product Grid.
If you use differing product images per variant you'll need to add the code to display those yourself on the Product Details Page.
"gatsby-source-shopify" threw an error while running the sourceNodes lifecycle: TimeoutError: Timeout awaiting 'request' for 30000ms
If you're on a slow internet connection Shopify may not have a chance to download all assets fast enough and will throw an error curing compilation. If that's the case try configuring the Shopify plugin to increase the threshhold or try rebuilding a few times to build up the Gatsby cache so you can get a clean build with all products.
Copyright © 2020 VHS firstname.lastname@example.org
This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License along with this program. If not, see https://www.gnu.org/licenses/.
This work incorporates fonts covered under copyright by Adobe and Sebastian Kosch. See the fonts directory for copyright and permissions notices.