Hello, I am Takasaki, the representative and engineer.
It's getting colder, but is everyone in good shape?
At our company, we mainly produce EC sites for manufacturing and retail customers with the mission of “creating a worldview that sells goods to everyone.” We are currently studying “headless commerce,” a way to create next-generation e-commerce websites with high development efficiency at high speed.
I hope to share the basics in this article.

Headless Commerce

While traditional e-commerce sites integrate design (frontend) and data (back end), headless commerce is the creation of a commerce site where “design” and “data” are separated cleanly.

reason for adopting headless

primarily to increase the speed and development efficiency of a site This has led to the adoption of D2C brand websites overseas.
In particular, it is said that the bounce rate will increase by 50% only if the display speed of a site slows down by 2 seconds.It does not have a high impact on conversion improvement and has an advantage in SEO.
That’s why headless commerce is particularly suitable for e-commerce sites called media commerce, which “get customers with content and connect them to product sales.
The specific benefits are as follows:

• The site’s front-end can be static, allowing it to be delivered on a fast server called CDN.
• The site can be created with Google’s next-generation “Progressive Web Apps” (PWA) to create a fast, SEO-friendly website that displays pages in an offline cache to some extent when your phone doesn’t communicate.
• Multi-device deployment is easy, such as if you want to create a smartphone app etc.
• Product data is Shopify or other e-commerce SaaS, and content is made with a CMS such as WordPress
• It completely decouples the back-end from the front-end, making it easy to work and dismantle (without having to rely on star engineers).
• With multiple backends, you’ll have to build a single front-end (with no need for WordPress and Shopify to develop separate themes; without having to double maintain or learn your own language).
• You can build serverless so you don’t have to think about server maintenance or anything else, and focus your engineers on designing your experience.

downside of headless adoption at the moment

• Since only static technologies can be used on the front end, if there are features that use dynamic elements such as OGP, inquiry form, in-site search, commenting and review (each has its own alternative).
• Most third-party plugins and apps don’t support it, so you need to be prepared for a self-implemented implementation in the event of an emergency

A Case Study of E-Commerce Sites Using Headless Shopify

You can read more about this article.
20 examples of Headless commerce powered by Shopify | We Make Websites

I couldn't find a case in the country, but if you were thinking about it please consult with us. please!
And if you know about the headless cases in Japan, impression form I would be very happy if you could tell me more.

Benefits of Shopify Adoption

In this article, we create headless commerce with Shopify as a backend.. See below for the benefits of Shopify:

What is GatsbyJS?

the front end GatsbyJS It is made by.
GatsbyJS is a React-based static site generator.
js for Vue.js, I think it's an image of Nuxt.

GatsbyJS Benefits

• It’s PWA-enabled just by following GatsbyJS, and it works with PWA so you don’t have to create a native app.

• The documentation is warm and rich (English only).

• There are plenty of plugins to integrate with services like Shopify and APIs such as WordPress or Contentful.

Shopify and GatsbyJS Create Headless Commerce Sites

From here, we will move on to creating headless commerce sites with the main themes of Shopify and GatsbyJS.

1. Install Gatsby

the family's documentation is very careful. here To install GatsbyJS, please refer to .

2. Enable Storefront API with Shopify

Enable Shopify’s Storefront API to create headless commerce sites.

2-1. Click “App Management” on the admin screen, then “Manage Private Apps”.

Click "Create a new private app"

Enter your red box app name and email address, and check the “Enable this application to access storefront data using Storefront API” checkbox.

Check the API you want to use and press Save.

Since the confirmation screen comes out, click "I understand. Create an app" to create an application.

The access token of the store front will be issued, so I'll copy it.

3. Using GatsbyJS' Shopify Starter Kit

and now we're ready to create a headless commerce site. here The GatsbyJS starter kit from . motion demonstration ）

Run the following command in your terminal and download the starter kit to create a project.

gatsby new gatsby-shopify-starter https://github.com/AlexanderProd/gatsby-shopify-starter

Expand the root directory of your project by following command:

cd gatsby-shopify-starter

In the root directory of the project, a configuration file ".env.development" for development environment and a configuration file ".env.production" for production environment will be generated; here you can find information about your Shopify store.

SHOP_NAME=自分のShopifyストアのアカウント名（〇〇.myshopify.comの〇〇の部分）に置き換える
SHOPIFY_ACCESS_TOKEN=2-6で発行したアクセストークンに置き換える

* Please be careful not to expose this access token outside, handle the .env file and make sure that it is public when pushing into a Git repository such as GitHub.

3,4. Launch a development server with the following command:

gatsby develop

3-5.http://localhost:8000/ If you access and see the products in your store as follows, it will be a success!

The following command generates a file for the production environment:

gatsby build

If you want to publish it in production, upload the file below the public directory under the root directory of this generated project to your server.

Plus: Deploying to Firebase

In the above 3-6, as a means to host statically generated sites: Netlify is it? Firebase I think Firebase is the most popular way to do this, because there’s data that says it’s faster than Firebase.
See below for more information on hosting.

it's still a new technology, so if you notice this article impression form I would be happy to hear from you more.
In the long term, I feel that e-commerce sites and CMS will become more headless because this way of making is faster and development efficiency is high, and engineers’ resources can be concentrated in the customer experience part.
In addition, this time it was only a basic story, but since our company is renewing its own EC site to headless, I hope that we can share the knowledge in actual projects later on on this blog.
If you're interested, our company's twitter Follow us!

March 24, 2020Additional Learning from Building a Headless Commerce Site here I wrote an article.

Thank you very much!