headless-commerce shopify cms Mon May 03 2021

Easily build a Shopify Headless eCommerce Storefront

By: Prasenjit Paul

If you are reading this article, then I am assuming you already know what headless commerce is, and hence I will not spend time explaining that. However, before jumping into the how to create part, I think you should first know why Shopify itself doesn’t provide headless themes.

Why Shopify doesn’t provide headless themes

If you are already a merchant in Shopify, you already know that in Shopify we build our storefronts using themes. But those themes are all legacy themes and do not support headless; despite Shopify providing APIs.

As explained here, traditional commerce websites work in this way that the browser requests a page and then the server compiles the whole page and provides the HTML. But in the case of headless, there is a thin frontend server that stands between the browser and Shopify, which communicates with Shopify for only the required data chunk, and everything else is either served from the frontend server or pre-exists in the browser.

The Shopify themes are designed to run within Shopify, they are kinda sticky to that and architected to be compiled with each server request. That is why you can not achieve a true and organic headless commerce experience within a native Shopify theme.

Multiple ways to get headless commerce

Headless technologies are with us for a long time now; like over a decade. However, the traction it started getting, especially in the e-commerce sector is not for a very long time.

Over the years, since the birth of headless technologies, many different types of solutions have evolved, using many different tools and libraries. Here I will tell you the implementation in different types.

Within the native theme

Now you might be wondering that I just told you that making headless within the theme is not possible just in the previous paragraph, and in this one, I am taking a U-turn.
Well, not exactly. Let me explain.
There have been some stores that have injected headless technologies like react.js within the theme. However, they give you a kind of sub-headless experience. For example, some stores do this in the PDP (product details page) page to switch between different variants.
But an end-to-end headless experience for the entire store is not possible through this.

So, if your requirement is not just to have the headless experience in a small part of a certain page (or pages), but you want a true end-to-end experience, this approach is not for you.

Using build tools

Well, this part may seem a bit technical (because it is), but it can help you to make the decision.

Though I have talked about a thin layer of frontend server to serve the headless, but if features like dynamic server-side rendering are ignored, then this can be achieved through compiling an application and hosting the built files.

Tools like Gatsby.js or similar can help you do that using different libraries and you can simply host the output files in S3 or similar.

Hiring agencies

As the majority of the merchants who go headless are not really small players and can afford to hire dedicated agencies to do so.
Agencies (or even freelance developers) have the expertise in React.js, Vue.js, etc, using which they can develop a full-fledged application and host it to the servers to give you full flexibility of design, performance, data collection, tool integration, and many other things.

Easiest way

Due to these difficulties, headless or headless commerce was always a costly and complicated thing and achievable to only big merchants.
But with imorph’s new page builder and Shopify related widgets, anybody can create landing pages, listing, and details pages, and everything else as headless, through drag and drop

Building headless with imorph

The whole concept behind imorph’s page builder is, making headless creation extremely easy and cheap. With the combination of master and child pages, reusable components, easy copy-paste, the code editor, and predefined widgets, you will find the building and maintaining you headless storefront very easy.

Creating a storefront in imorph

Currently imorph only accepts manual installation. You can contact imorph to get your Shopify store into imorph’s portal.

Once the installation is done, you will by default get one home page, one product listing page, and one product details page.
By default, the store does not use caching. When you are ready with a custom domain, then imorph’s support team will connect your domain and enable caching for the store.

Creating pages

The page builder enables you to create your page by dragging and dropping different components like images, columns, sections, heading, etc., and style them accordingly by changing margins, color & size.
There are functional widgets as well, like the product details widget or listing widget which can dynamically fetch the required products based on the URL params or settings.

Under the Layouts section in imorph admin portal, you will find two links; Master pages & Pages.

If you are a non-technical person then you can consider master pages as the master page of MS Powerpoint or Keynote. If you are a developer, then this is like layout in nuxt js.

In the master pages, you can design your storefront’s basic layout; with header, footer, sidebar, etc. You can also drag and drop multiple widgets (say cart widget) which are going to be shared across all pages. Once a master page is ready, then you can go ahead and create multiple pages or child pages with them.

You can also create a page without a master attached to it. But the good thing about the master page is, say you have 5 pages in your storefront and one day you decided to change the header, then if you created all these pages with a certain master page, you could simply make the header change in the master and all those 5 pages would be modified.

What else do you get?

We are continuously improving imorph to enable you with more robust features. Today imorph has a bunch of features that not only convert your storefront into headless but also provide a flexible CMS. Here is a list of the features.