Skip to main content

Headless Deep Dive

  • 10 Minutes
  • July 29, 2021
    • Staying Ahead of the Curve

We've been rowing at the cutting edge of ecommerce technology for a while. Headless ecommerce is a rapidly growing area in our world that can offer some awesome performance benefits.

Our friends over at BigCommerce have a great summary of headless ecommerce, "Headless commerce architecture is the decoupling of the front-end presentation layer of a website from the back-end ecommerce functionality. Developers can utilize their front-end technology of choice to deliver high-quality content experiences, and plug in an ecommerce solution on the backend that manages all commerce functionality." Here are a few examples we've worked on recently.

 

Nordic Ware

Nordic Ware

Project Goals

  1. Replatform Nordic Ware because of Magento 1’s end of life.
  2. Improve the user interface and flow for content management.
  3. Modernize and be prepared for future possibilities for marketing content.

Powerful Technologies

  1. Wordpress
  2. BigCommerce API

The Results

By using the BigCommerce 4 Wordpress plugin we achieved a product, order, and customer migration from Magento 1 into BigCommerce. The Wordpress theme was developed to mimic the prior site, with enhancements made for IA and accessibility. All the possibilities within Wordpress are now available for Nordic Ware to enrich their content with easy and automatic display of relational content. Bakers everywhere rejoice. This project opened the doors to evaluating the content manager’s experience as part of future projects.

 

NCG

NCG Partner Connection

This site is behind a login, but you'll have to take our word that it IS headless. Either that or become an NCG partner to see what it's really like.

 

Project Goals

  1. Replace the Excel spreadsheet NCG was using before to create a better experience for all the stakeholders.
  2. Build an interface for category managers to interact with vendors in order to broker and create contracts (ad space).
  3. Use headless technologies when it’s optimal for advanced performance and lower development costs.

Powerful Technologies

  1. Vue.js
  2. Laravel

The Results
Speed! By hybridizing the site to use traditional templates and VueJS components, they’re optimizing performance that comes in handy working with large sets of complex data. This demonstrates that “headless” doesn’t need to be an entire site (aka the head), it can be done in various areas of a site. Maybe we should call this an ‘armless’ deployment. You decide.

 

Irish Titan New Website Image

Irish Titan dot com (That’s us!)

We're in development on our new site with a headless build and we couldn't be more excited! Here's what the next Irish Titan site will look like.


Project Goals

  1. Brand refresh as an opportunity to be awesome and use our fancy headless skills to get content out to our amazing friends faster than ever (that’s you!)

Powerful Technologies

  1. ReactJS
  2. Gatsby

The Results (Hopefully)

  • New, more efficient build and deployment processes.
    A lightning fast site, addressing many of Google’s recent Core Web Vitals metrics.
    Content management that doesn’t require code changes. Great for our marketing team that thinks aligning a div tag makes them a developer.
  • Decoupling content and display. Take our events for example. Enter all event details once into our CMS, and let the headless app grab the info it needs for specific areas of display. Never duplicate content or have to make two updates to the site.
  • Gatsby renders static HTML pages ensuring the quickest possible way for browsers to load content.
PreviousBack to all News