3 Ways Headless Commerce Will Take Your Shopify Store to the Next Level

yuyaohshimo — Mon, 25 Jan 2021 09:25:58 +0000

How Ramen Hero, a D2C startup based in the San Francisco Bay area, relaunched their online store including background and history.

About This Article

Those who manage D2C services
Those who manage online stores
Shopify users
Software engineers (especially startup companies)

Introduction

I am the senior lead engineer at Ramen Hero (@va_sf_engineer).

Ramen Hero is a D2C food startup based in the San Francisco Bay area.

We deliver authentic frozen ramen kits all over America, excluding some areas.

We rebranded and relaunched our online store in April, 2020.

At that time, we replaced our system architecture with a modern structure.

Pros and Cons of Using Shopify as an Online Store

We are using Shopify as a CMS for creating an online store.

First of all, for the relaunching, we considered the pros and the cons of our existing online store using Shopify.

👍 Pros 1: Shopify has all the features necessary for an online store because of CMS

Shopify has the necessary features for online stores such as the product management feature, the customer management feature, and the order management feature.

Creating such fetures is costly and requires a lot of human resources.

👍 Pros 2: Shopify has checkout pages which are available for a variety of payment methods

For security reasons, it is not recommended that we create our own checkout pages.

We are not sure if Shopify’s checkout pages are 100% secure, but those pages should be created by professionals with security experience.

Also, since they have some payment methods based on the customer’s device like Apple Pay, the customer can complete purchase without entering their shipping address and payment information.

This feature eliminates the hassle of entering some information and prevents abandonment through the checkout flow.

😕 Cons 1: It’s difficult to improve website performance

The pages rendered by Shopify are published on the server side dynamically each time a customer visits the page.

Therefore, the rendering page speed is slower than the pages that are rendered statically.

Also, too many plugins make the rendering page speed slower.

The redering page speed is very important for online stores.

Amazon found a 100-ms delay sacrifices their sales by 1%.

😕 Cons 2: We cannot use general web development stacks

Typically, the source code of a web application is managed by a version control system such as GitHub.

Therefore, we can see the difference in changes and we can revert to the previous version if there is a critical bug.

However, since we can change the code on the Shopify dashboard, we cannot find the difference in changes and it is likely to cause bugs.

Also, since some codes are added when Shopify plugins are installed automatically, so it is almost impossible to control the source code.

*Strictly speaking, Shopify publishes a CLI called Theme Kit that also allows us to edit source code locally. Initially, we used this, but since the source code on the dashboard could be changed, version control was almost impossible.

😕 Cons 3: We cannot always customize the design of the plugin

We sometimes need to get features which Shopify doesn’t have to install the plugins.

It would be nice if plugins had a setting to flexibly change the design, but many plugins have a locked design.

This will have a significant impact on the branding.

Use Shopify as a Part of Headless Commerce

We focesed on having our own front-end while using strong Shopify features for our online store as a back-end so that we could get rid of the cons while leaving the pros we mentioned in the previous section.

In other words, use Shopify as a part of headless commerce (see more details about headless commerce here).

Fortunately, since Shopify provides Shopify Storefront API, we can embrace this architecture.

We created the front-end ourselves and we used the Shopify Storefront API to get online store features like the above image.

Also, since it is not secure to create checkout pages ourselves, we use Shopify checkout pages.

Front-end

Since we stopped using Shopify front-end, we could use a framework to maximize website performance.

So, we decided to use Next.js, which supports SSG (Static Site Generation).

Next.js is a framework which includes the best practices for modern front-end development.

Since Next.js can render pages statically due to SSG, the rendering page speed is faster than pages rendered dynamically as I mentioned earlier.

Also, since Next.js officially supports ISR (Incremental Static Regeneration) at v9.5, we can update pages statically and nearly dynamically.

Therefore, ISR accomplishes online store content updates without updating the code.

Another reason we decided to use Next.js is that we wanted to use component-oriented programming.

Component-oriented programmig makes improvement speed faster because we can change the design to alter only the combination of components.

Due to this, we can try to change content to continually adjust the needs of customers. That is the most important thing for online stores.

Back-end

We added a feature which Shopify doesn’t have to install plugins.

However, as I mentioned earlier, we may not be able to change the design as we like, or we may not have features we want.

So, we developed an API in the back-end which has features to cover our own business logic that Shopify doesn’t cover.

A structure is simple to use with the Serverless Framework, but we can use the API flexibly because the design is not locked such as plugins.

For example, since we have a custom zip code validation logic, we created an API endpoint for that.

Final Architecture

We use Next.js for our front-end and that is delivered by Vercel.

Vercel has a feature to publish changes integrated with GitHub.

Also, that has some convenient features like automatically creating a preview environment based on a development branch.

The back-end is a hybrid structure containing a Shopify StoreFront API and a customized API using the Serverless Framework.

Conclusion

👉 Remove restrictions of CMS to use headless commerce

It takes a lot of time and money to create a full customized online store. Therefore, we should use CMS.

However, it is true that we have some restrictions with CMS.

In terms of online store performance, headless commerce could be an option.

👉 Create a customized API for features for your business logic

We have some restrictions with plugins as well. Also, almost all plugins are not free.

We can create ideal features to create a customized API.

Also, since online stores do not have as much traffic, we may be able to have an API for free with serverless architechture like AWS Lambda.

In addition, we can reuse the features for selling products on other platforms not on the web.

For example, a chatbot system on SMS or Facebook Messenger.

👉 Most importantly, think about the efficiency of improvement

It is important to try to change the content to continually adjust to the needs of customers.

To use modern tech stacks like GitHub, Vercel, and Next.js may increase the efficiency of changes.

As a result, we can optimize the online store for our customers and increase conversion rates.

Takeaway

We tried to create a full customized online store at first.

But, this is not suitable for startups with a small development team.

The reason is startups require optimal speed above all else, and we were short on time, money, and human resources.

I know that engineers want to create everything themselves.

However, I believe that creating the best system based on the company and team situation is a necessary skill for engineers at startups.

Also, since we reduced development resources to use third-party services, we could not only improve changes in speed, but could also focus on improving quality of service.

This improvement is essetial for any business.

We’re hiring engineers who are interested in headless commerce development at Ramen Hero.

Also, I am available for personal consultations on headless commerce and online store development.

Please DM me at the above contact via Twitter.