Building a Fast and Customizable Ecommerce Store with GraphCommerce

Step 1: Create a GraphCommerce Project

To get started, clone the GraphCommerce GitHub repository and navigate to the examples folder. Create a new project folder beside the GraphCommerce one, and copy the starter project into it. You can then delete the GraphCommerce folder, as you won’t need it anymore.

git clone https://github.com/GraphCommerce/graph-commerce.git
cd graph-commerce/examples
mkdir my-project
cp -r starter my-project
rm -rf graph-commerce

Step 2: Launch Your GraphCommerce Project

Once you’ve created your project, install the dependencies and generate the client code based on your GraphQL schema and query documents. Finally, start your development server and visit http://localhost:3000 to see your store in action.

cd my-project
yarn install
yarn codegen
yarn dev

PWA Support and Payment Methods

GraphCommerce comes with built-in PWA support thanks to next-pwa. To enable it, simply remove the disable line in your next.config.js file. You can also choose from two payment methods: Mollie and Braintree. To remove one of them, simply remove it from your package.json file and update the references in your pages/checkout/payment.tsx file.

module.exports = {
  //...
  pwa: {
    // disable: true, // Remove this line to enable PWA support
  },
};

Connecting to Your Own GraphCMS Instance

By default, your GraphCommerce project uses a demo Magento and GraphCMS instance. To connect it to your own GraphCMS instance, register for a Hygraph account and clone the default starter project. Then, update the API endpoint in your .env file and regenerate the files with yarn codegen. You can now update your content and see the changes reflected in your store.

HYGRAPH_API_ENDPOINT=https://your-graphcms-instance.com/api
yarn codegen

Customizing Your Store

With GraphCommerce, you can customize your store quickly and easily. Try updating the title of one of your blog posts and see the changes reflected in your store. You can also experiment with different payment methods and PWA settings to find the perfect combination for your business.

• Update the title of a blog post and see the changes reflected in your store.
• Experiment with different payment methods, such as Mollie and Braintree.
• Enable or disable PWA support to optimize your store’s performance.

Getting Started with GraphCommerce

GraphCommerce is a powerful and customizable ecommerce solution that’s perfect for businesses of all sizes. With its built-in PWA support and flexible payment methods, you can create a fast and seamless shopping experience for your customers. Try it out today and see the difference for yourself!