This article is an introductory book by our company on Shopify, Hello Shopify Themes: A Guide to Shopify Theme Development Here's an excerpt from .

The topic of this book is theme development, so far we have been writing mainly on technical knowledge related to the theme development.
That said, the theme isn’t required to take advantage of Shopify features.
In this section, we will supplementally mention another option: Custom Storefront.

Custom Storefront and Headless Commerce

The custom storefront, as the word implies, is a way to build your own storefront and do back-end processing on Shopify.. An example of “headless commerce” model which is a solution that separates the front-end from the backend of the store, according to our official documentation.
With a custom storefront, it is free from the constraints imposed on Liquid-based theme development and allows for more technical and flexible implementation.
For example, you can buy Shopify products from mobile apps and IoT (such as the LCD screen of a smart refrigerator), AR/VR, add a Shopify purchase button to an existing WordPress or other website, build Jamstack sites using frameworks like Gatsby or Next.

atelier yori.so

As an example of headless commerce, we will introduce the e-commerce site for gallery and publishing label “atelier yori.so” operated by non-standard world, Inc.

e-commerce site for atelier yori.so

Initially, it consisted of a front-end: Gatsby, hosting: Firebase and backend: Shopify and Contentful (external CMS).
The move to Shopify Hydrogen has since been implemented in the technology stacks of Frontend: Hydrogen V2, Hosting: Oxygen and Backend: Shopify and Contentful.. Both new and old have a common mechanism where you get product data on Shopify with the Shopify Storefront API and then transition to Shopify screen at the time of payment for your product.

We have also provided technical explanations on how to migrate atelier yori.so to Hydrogen in the following articles:

• We have migrated our own service to Shopify Hydrogen
• For developers getting started with Shopify Hydrogen: Our development guidelines are now public
• What we learned from starting cross-border ecommerce with Shopify headless commerce and Hydrogen

Shopify Storefront API

The Storefront API is essential to building a custom storefront.
The Storefront API allows you to get product data on Shopify and create orders, but most of the data (except authentication and cart management) is read-only and cannot be updated using the Storefront API.

The Storefront API is accessed using GraphQL.
However, there are also a few tools available to simplify development, so if you want simple customizations like adding purchase buttons, it’s better to use them.

Custom Storefront Developer Tools

We introduce Buy Button JS and the JS Buy SDK as developer tools for custom storefronts.

Buy Button JS

Buy Button JS is a library that allows existing websites to embed their Shopify UI components for buying products. If you already have WordPress sites, for example, you can add the Shopify purchase button directly into your blog post; carts are also generated at the same time, so you will of course be able to do general operations such as change quantity or update your cart.
If you already have a site and want to use Shopify for your EC features, but don’t have the budget or man-hours to move on to Shopify per site.

JS Buy SDK

Inside Buy Button JS, the JS Buy SDK is a JavaScript library based on the Storefront API that provides the ability to retrieve product/collection data from stores, add items to carts and check out.
If you have JavaScript development skills and want to add a more flexible buying curve than Buy Button JS to your existing website, use this JS Buy SDK.

When a Custom Storefront Helps

If a project fits into any of the following requirements, it is worth considering building a custom storefront.

• There is a website already in production and you want to add only simple EC features
• There is already a website in production and we want to move to Shopify, but we will continue to use technologies that are not reproducible on the Shopify theme
• Want to Build a Site with a Front-end Technology Stack Other than Liquid
• Want to Use WordPress or Contentful as an External CMS
• Want a Faster, Securer and Scalable E-Commerce Site

For more detailed review requirements, please refer to the documentation.

Custom storefronts can also build Jamstack architectures using frameworks like Gatsby, which benefits from both speed of view and security, although custom storefronts are more complex than Liquid-based theme development.
Aside from the addition of Buy Button JS, if you’re building your entire store on a custom storefront, it would be better to assume that requirements, development resources, costs and technical difficulty are about two or four times as much (depending on your requirements) as theme development.
* If your team has deep forms such as React or Gatsby, it is faster to build a custom storefront than to learn Liquid from scratch.

hydrogen utilization

In other words, building a custom storefront has not only the benefits but also the disadvantages of complexity and cost.But with the official framework "Hydrogen", which was released after this book was published, complexity was greatly eliminated.

Hydrogen is:

Hydrogen is a headless framework based on React, developed by Shopify.
There are a wide variety of frameworks that can be used to build headless commerce, including Gatsby.But if you’re using Shopify as your backend, consider Hydrogen first.

As mentioned above, our atelier yori.so site was originally implemented in Gatsby but has waited for an official release and moved to Hydrogen.
The main advantages of Hydrogen are:

• Tailwind CSS Embedded Starter Templates Let You Start Development Quickly
• Performance optimizations are in place, such as cash contor.
• Shopify-specific React components, React hooks pre-processed without having to build their own UI for product pages and carts

Developers familiar with React and GraphQL will be able to use Hydrogen to build a simpler, faster, custom storefront.
If you’re interested, please follow the official documentation below to test the creation of Hydrogen and if you can use Yarn or npm as well as Node.js (version 14.0+) then you can launch a local Hydrogen demo store in less than five minutes!

Oxygen: Hosting Solutions for Hydrogen

Another thing I would like to introduce is Shopify’s Oxygen hosting solution for Hybrid.
* If you think of it as oxygen (Oxygen), hydrogen (Hydrogen) or liquid, your name is quite humorous :).

Traditionally, building custom storefronts with frameworks like Gatsby required a separate use of hosting services such as Firebase.
Oxygen, a pure Shopify hosting environment, was initially available only in the Shopify PLUS plan but at this time it is also available for plans higher than Basic and stable environments.

Hosting a site built with Hydrogen to Oxygen doesn’t require any Rate Limit measures, so we recommend using it for no special reason.

Click here to purchase the introductory book on Shopify theme development that we produced at our company.
We do not have any plans for printing after the sale at this time, so if you would like to read a printed book please pick us up as soon as possible.

• Author: Sayaka Kawashima
• Publishing: Non-standard world, Inc.
• Number of pages: B5, 248
• Price: 3,850 yen (tax included) * Packed with PDF version, free shipping

Explore the feature