Hi. I'm Representative and CTO Takasaki.

the other day, we're running our own e-commerce of a publishing label Headless Commerce, a next-generation e-commerce technology that is fast, secure and scalable, has been renewed.

Headless E-Commerce Website Renewed

I will tell you about that learning in this article.

Headless Commerce

This is a next-generation EC technology that has become the standard in manufacturing and retail with an emphasis on overseas technologies called D2C.This e-commerce site is characterized by the separation of data (backend) and design (front end).

merit

1. High speed

Below is an example of how the speed has changed before and after a foreign EC site became headless.

On the left is a headless site using Shopify, and on the right is an old EC site.

If you look at it, the speed difference is obvious. A 0.1-second slowdown in the site’s display results in a 1 percent decrease in sales and a 10% increase in revenue per second. As it is said, high speed leads directly to sales of e-commerce sites.

In addition, fast sites are easier to appear on top of search engines and attract customers.

And since headless commerce sites generate HTML statically, they can be delivered on a fast delivery server called CDN.

And if you want to experiencehow fast it actually is, Our e-commerce site Please check it out.

2. Secure

Separating design and data reduces the point of cyberattacks, resulting in greater security and cost of operational maintenance than traditional systems, so engineers’ resources can be used for attack development.

3. Easy to scale

When an EC site gets to a certain size, it can’t scale simply by “just increasing the server,” because data-based servers that are not “increasing numbers = getting faster” become bottlenecks.

This is where most of the reasons for the site's access to a TV exploding and falling rapidly, or for e-commerce website renewal failing and the site being stopped for a long time.

In the headless form, we have adopted a powerful infrastructure that is used worldwide like Shopify as our back end, making it cheaper and easier to scale e-commerce sites.

4. Good Development Efficiency (Developer Experience)

The clean separation between the front-end and back-end allows front-end engineers to focus on the front-end work, while backend engineers can focus on the back-end work.

Also, since front-end engineers can build a site in JavaScript without having to learn the original template language of the back-end system (Shopify theme language Liquid, WordPress theme language, etc. )

5. High freedom of design and site structure

As mentioned above, the clean separation between front-end and back-end frees you from the constraints of your backend system so that you can freely set up your own design or URL structure that affects SEO, making it ideal for sites that want to attract customers with engaging content that expresses a brand’s worldview.

6. Easier to turn into a smartphone app

If you create the front end in PWA (Progressive Web Application) format, headless commerce sites can be delivered as a smartphone app on Android's Play Store.

7. Flexible integration with CMS and other systems

Although the method of attracting customers with content on EC sites is becoming more important every year, there were problems such as if you want to adopt Shopify and WordPress or other CMS to make content, you have to develop two front parts called themes, domains become separate, login status can not be shared by EC system and CMS.

Headless works with multiple systems, but there is only one front-end development; you can unify the domain and flexibly display information from Shopify to some parts of a page including login information.

disadvantage

Since it is a new technology, we have little know-how (especially in Japanese), and this time we implemented the basics based on technical materials of English.

It's not headless, and third-party apps related to the front end will no longer work, so you need to implement your own features that aren't available.

A Case Study of E-Commerce Sites Using Headless Shopify

Examples from overseas can be found in this article.
20 examples of Headless commerce powered by Shopify | We Make Websites

technology adopted this time

technology stack diagram

Frontend: GatsbyJS

GatsbyJS is a React-based static site generator.

We have adopted this approach because we can code in a way that conforms to the best practices of today’s web, and there are plenty of plugins such as kind documentation and Shopify integration.
For more information about static site generator technology, see the article below.
https://www.non-standardworld.co.jp/5647/

EC System: Shopify

Shopify Amazon is the second most popular e-commerce site in the world.

Since the company was originally founded by engineers, we have a wealth of APIs and are able to create an EC site that is infinitely more flexible than scratch while not having to do any troublesome work such as server maintenance on its own.

For more information on the benefits of Shopify, see our article below.
https://www.non-standardworld.co.jp/service/shopify/

CMS (Content Management System): Contentful

Speaking of CMS, WordPress is probably the most famous in the world. Contentful It is a SaaS-based CMS that does not need to do any troublesome work such as server maintenance, which specializes in headless and optimized.It can set data structures like post types or custom fields flexibly, and it is easy to work with GatsbyJS.

Build & Deployment System: Gatsby Cloud

This time, we are using a static site generation method, so it is necessary to generate all pages new when the site updates.

this time Gatsby Cloud When an update is made to Shopify or Contentful, or when a new change is pushed to GitHub, the site will be automatically generated and published on hosting server.
You can also preview changes made to the site on Gatsby Cloud.

Hosting Server: Firebase

Firebase It is a very inexpensive, fast and high-performance hosting server provided by Google.

See also the following article on how to use Firebase as a hosting server.
https://www.non-standardworld.co.jp/20476/

MA/CRM: HubSpot

Marketing Automation and Customer Support Tools Get A Uniform UI For From Marketing To Support HubSpot I used it.
More information about HubSpot can be found in the following articles.
https://www.non-standardworld.co.jp/21261/

Analysis: Mixpanel/Google Analytics

In terms of analytics, it's useful to look at the entire web Google Analytics And it helps you analyze how web visitors behaved and purchased in time series. Mixpanel I used it.

Finally,

We are consulting to build a headless commerce site using Shopify, so if you're interested. here Please contact us from here.

if you want to know more about this place impression form is it? Twitter Please rip it.

Next time, our engineer Kawashima will explain how to implement a headless commerce site in this configuration and the stumble points.