This concept is available on multiple platforms and generally main motivation to setup a headless storefront for specific eCommerce business is - performance.
The logic here is that online store that loads faster getting better Pagespeed Score by Google which improves ranking and faster loading time improves conversion rates.
Let's try to list benefits of headless commerce
Performance
Blazing fast loading time. If we would digg slightly deeper we can split headless commerce storefront delivery types into 2 - SSR - Server Side Rendered and SSG - Static Site Generated.
There are also tech-stack dependencies like usage of Next.js or React.js
Backend Agnostic/Lower Vendor lock
if implemented properly can help lowering the vendor lock from main platform that specific store is running on but truly achieving completely backend agnostic headless storefront would require re-mapping of API endpoints into universal data layer. Also maintaining that would require very careful porting of each specific 3rd party front-end facing app or platform that would be used together with storefront.
Flexibility of Integrations and custom user flow
What is truly both great advantage and quite low hanging fruit to achieve with Headless Storefront is ability to craft customer experiences very granular way.
- Want to display your store for each region of presence under same domain but manage from multiple separate admin panels - headless commerce makes it possible
- Want to run sophisticated A/B testing scenarious orchestrated on DNS level with Cloudflare to reduce latency - headless commerce allows that
- Want to output products catalog for multi-region multi-currency offer under separate domains and manage from single admin panel - headless commerce help with that too
- Improve conversions from on-site search through usage of 3rd party search and filtering platforms with capabilities to fine-tune and customize entire experience like Algolia - headless commerce would bring that feature
- Get better on technical SEO scores through improvements on Core Web Vitals achieved via fine tuning of the JS, CSS and performance part of the front-end
- Split your product catalog into multiple storefronts to serve each separate customer segment
- Unlock your own tech roadmap and enable leading 3rd party systems to be integrated into the storefront without waiting on the eComm platform Roadmap
High Availability
Headless commerce allows to host your storefront separately from the servers on which your eCommerce platform running, this way when for example Shopify experience downtime your storefront would still be accessible.
Main Advantage of Headless Commerce
it's allows to craft precise and specific system both on domain and URL paths level for better SEO, would allow fine-tuning and deep tweaking of front-end performance, bring ability to pull data from multiple platforms and render rich experiences for end customers.
While many headless solutions would advertize the lower total cost of ownership it's hard to prove in case you use headless without changing the platforms.
On cost side it is going to cost more:
- for hosting, for example headless storefront hosted separately from Shopify itself would create charges for CDN usage of traffic
- more in development hours spent - each app that is front-end facing and was created as an embed or Javascript embed would require porting to be made for it to be visible and functional on the front-end
- maintenance and partially managing more infrastructure would take hours and additional funds
