from our blog

Headless CMS on Shopify Store using Builder.IO

Posted by Simranjeet Singh

web development, Ecommerce, Shopify

The ability of headless CMS to make the content available to view on any device through an API makes it a popular choice among our clients who want to display their content on multiple devices. And, we are not talking about desktop or mobile devices only. A headless CMS can help you display content on display boards, Kiosks, and other display devices easily.

Builder.IO is a popular headless CMS that added another layer of ease to the headless CMS by offering a drag and drop visual editor. This feature alone helps the marketers update their website without major help from the developer. It’s like using Elementor on WordPress or HubSpot CMS with all the drag and drop features.

Marketers can create all kinds of website pages and landing pages using the Builder.io page builder and design each and every element on the page as per their idea. Builder.Io works around grids and layers just like Elementor works around elements and sections.

As per the client's request, Computan recently used Builder.IO instead of Shopify native CMS for a Shopify store. Hassan Hashmi, web developer at Computan worked on the project and shared his thoughts with me for the blog.

Why Use Builder.IO instead of Shopify's native CMS?

Shopify has a solution for everything you want to do on the platform. You can create, edit and delete your own style of templates through native Shopify CMS using the help of the developer.

You can do the same with Builder.io as well and by eliminating the heavy developer. Builder.io gives you freedom of no-code headless CMS framework. With the help of Page Builder, you can create and design your webpages, CMS pages, store pages, blog pages, and article listing pages with minimum help required from the technical person or a developer. And, builder.io works with all Shopify themes. The Section builder helps you build announcement bars, product detail, and descriptions, collection heros, cart upsells among others.

All of that comes with the benefit of being headless i.e. showing content on multiple fronts through one source.

What is involved with setting up Builder.IO to be used on Shopify pages?

The installation process is as easy as it seems.

How are Shopify stores built-in Builder.IO different than others?

Shopify stores built-in Builder.IO may not look any different than the stores built in other page-building apps. The primary difference is for the developer while building the store. The development process has significant differences since technology and approach are different.

The biggest benefit of using Builder.IO headless CMS compared to any other traditional CMS is that you get all your pages, templates, sections in one place. You don’t have work make the content work for multiple platforms. Create layers and designs in your Builder.IO and use the same layers and design in your Shopify connected pages and in CSM pages as well. It saves you time to do the double work to make the Shopify store and CMS site as same.

Another best thing about using Builder.IO for the Shopify store is that it allows you to customize the complete theme page templates. For example, for 10 different collection pages, you don’t need to design 10 pages. You can design the page once and integrate it with the theme template.

Custom drop zones, heatmaps, personalization and targeting, dynamic starter template, custom dashboard, header and footer, cart page, log-in page, blog feed, ability to work in your own code base, among other features that are present in Builder.IO and missing in other page builder apps.

What is the page speed performance of Builder.IO sites?

In general, headless websites have a fast loading time. In a traditional CMS setup, the website has to load lots of JavaScript at the time of startup or page opening. Heavy Javascript frameworks and third-party scripts are the two major reasons websites take time to load.

The basic structure in Headless CMS makes this happen. Some websites have even achieved a 100/100-speed score.


Builder along with Qwik + Partytown achieved the 100/100 speed score.

Simranjeet Singh

Written by Simranjeet Singh

Writer | HubSpot Certified Inbound Marketer and Content Marketer