Headless eCommerce Tips & Trends for 2020

What is Headless eCommerce?

Headless commerce provides a content-first eCommerce approach to website design and development. Headless eCommerce happens when you detach a website’s front end CMS, aka the “head” of a website, from the eCommerce backend. In a headless environment, your backend runs completely separate from your front end and the two are tied together using APIs. 

In eCommerce, headless commerce lets marketers to adapt a page’s content without traditional eCommerce CMS constraints. In this way, marketers can quickly update website copy and design to focus on their primary need – marketing!

Understanding How Headless eCommerce Works

With a SaaS platform like BigCommerce, headless eCommerce is seamless and easy. First, you’ll need to select a content CMS to manage the front end of your site (like HubSpot CMS or WordPress). 

Once the two are connected, you’ll need to determine what content lives in your eCommerce platform vs. your front-end CMS. Typically, we recommend keeping all product information within the eCommerce platform and injecting it into the front end on-demand. This way, we can have one central database of all core product information for purposes including data continuity, product feeds and centralized inventory. 

Benefits of Headless Commerce

Headless eCommerce allows marketers to have more content without dealing with the technology side of things. Think of how easy a WYSIWYG website editor is - that’s essentially how easy a headless eCommerce product page could be! Many platforms have their unique quirks when it comes to adding more content than the regular description box. 

For instance with Magento, a developer must code a CMS box into a template or code specifically what they want into a template. Then, they'll need to push to staging, go through the approval process, push to live and go through testing – all which could take days or weeks. In a headless implementation, this wait doesn’t exist and changes could be made in real time.

For category and subcategory pages, headless eCommerce allows you to take control of your content and the look and feel. As you may know, some categories deserve a landing page over a basic eCommerce category template, and some categories deserve more content to get the point across of a need being fulfilled. In headless commerce, you have the ability to update category and sub-category pages instantly without worrying about development creating the unique landing page for each category. 

With eCommerce sites, you have to consider the ability to have all secure data areas of your website within the headless environment. This includes pages like the cart, checkout, my account pages and login pages. Using the APIs of your CMS platform and your eCommerce platform, this is obtainable. 

Questions to Ask

Once you’ve made your considerations for each page, map it out and decide how you want every detail to work. Some questions to ask yourself are:

• How do I connect the two systems?
• How do I handle inventory showing on the product detail page as in stock, out of stock, pre-order and waitlist?
• How do I handle edits to pricing?
• How do I handle additional content that doesn’t fit within the product description?
• Do categories auto-update when I make them in a platform like BigCommerce?
• Do new categories update the nav to include them?

Answering these questions upfront will your company reduce development time down the line and create a stronger product as a result.

State of eCommerce: HubSpot & BigCommerce Headless Commerce

Groove Commerce created the first-ever instance of Headless eCommerce using HubSpot for our client Hanna Instruments. HubSpot is a growth marketing platform that helps inbound marketers achieve their goals. Benefits of HubSpot include its email marketing automation platform, website pages, Sales Hub and customer service conversations ticketing through Service Hub. 

Using the power of HubSpot & BigCommerce, clients can always have product, category, account and order information intermixed within their HubSpot marketing activities. With Headless eCommerce in HubSpot, you can also create website pages from within HubSpot and rely on BigCommerce data for products.

Additionally, clients can use HubSpot SmartLists and SmartContent to create unique experiences on the eCommerce website based on a specific SmartList inclusion. For instance, you could have SmartLists for each stage of the funnel and within personas, so you could display the right content at the right time.  

Taking it one step further, Groove Commerce developers have the ability to create templates in a drag and drop format, making it significantly easier for our clients to update and edit website pages in real-time with no development experience necessary. 

In the Headless eCommerce environment, this is very helpful when you have specific products that need to essentially be landing pages, but you want to keep the core data (like pricing) from BigCommerce on the page and updated in real-time to the consumer. We’ve seen this helpful in product launch scenarios, higher dollar products and anything more technical.

Check out our work on the Hanna Instruments website to see HubSpot & BigCommerce headless eCommerce in action.

Conclusion

Headless eCommerce helps companies detach their marketing efforts from website development and empowers them to update marketing information in real-time. Instead of waiting for development to update the website because of copy or imagery, marketers have the tools to get their jobs done. 

Wondering how headless eCommerce could work with your business? Feel free to drop us a note in the form below to find out.