Headless Commerce Explained: Understanding the Framework Behind the Most Experience-Rich Online Stores

By Shannon Ingrey | 28 Jan 2020

Shannon Ingrey, VP and General Manager, APAC region for BigCommerce explains the value of headless commerce and gets behind the buzz in this latest buzzword.

E-commerce is evolving, and it’s more difficult to accomplish what today’s customers are expecting with basic commerce functionality alone. Headless commerce is a solution that allows e-commerce businesses to create unique content-led sites, customer-winning experiences, and a frictionless journey to checkout.

As headless is becoming more of a buzzword, brands are starting to wonder: is this configuration right for my business? In this article, I hope to give you a better understanding of headless commerce and how to know if your business needs to consider it.

What Is Headless Commerce?

Headless commerce is the complete decoupling of the frontend presentation layer—the ‘head’—and the backend commerce. The frontend and backend are connected and able to communicate data through APIs.

Businesses who want to stay competitive need to be able to innovate quickly. Headless enables them to do that and lets them choose the frontend solutions that best support their business and marketing strategies.

These frontend solutions include content management systems (CMS) like WordPress, digital experience platforms (DXP) like Drupal, and progressive web apps (PWA) like Deity. Businesses can also build their own custom frontend solutions.

Why Headless?

There are several reasons a business might choose to leverage a headless solution.

If there’s a system like WordPress, Drupal, or Deity that you’re already using, you can attach these to platforms like BigCommerce on the backend, achieving powerful e-commerce without changing something that’s already serving the brand well.

Heritage Brands is an Australian-owned beauty and wellbeing company that houses a number of iconic brands including Australia Cosmetics, Le Tan, In Essence and Oil Garden. In revamping their Oil Garden site, they chose to go headless using WordPress and BigCommerce.

As Jemima Miller, Global e-commerce Manager at Heritage Brands explains: “WordPress is simple to use and flexible. These factors are important requirements, as a key focus for Heritage Brands is to digitally transform the marketing department to become more advanced in content maintenance, interactive learning modules and SEO updates.”

Another benefit is improving the speed of innovation. Because adjustments can be made to the frontend without affecting the backend e-commerce, it’s more efficient to make changes, which can be crucial in the current fast-paced, competitive e-commerce landscape.

Miller expands on how this has benefited Oil Garden: “The open API structure of our headless commerce stack provides us with a framework to plug and play seamlessly with other systems on our roadmap including displaying content on multiple device types, social commerce, digital screens and voice-activated products. The business is pleased with the independence of the stack as the flexibility allows for any system to be replaced, removed or added in easily.”

Jemima Miller

Jemima Miller, Global e-commerce Manager at Heritage Brands

By continuously optimising your site for the best user experience, you can increase your conversion rates and overall revenue. By developing a strong content strategy, you can also help draw in more organic traffic, thus lowering your customer acquisition costs and reliance on paid advertising.

Is Headless the Right Fit for Your Brand?

Headless may be the right fit for your brand, but it also might not. Here are a few questions to answer to see which category your brand falls into.

Do you have or plan to develop a content marketing strategy to draw in more organic traffic? If content is a major part of your current or upcoming business strategy, headless is a good way to combine a frontend designed for content management with a backend facilitating conversion.

Does your brand focus on creating innovative digital experiences? Both B2B and B2C  businesses are updating their sites to stay competitive and create the types of experiences customers are demanding. Headless can enable brands to make fast changes to their frontends to continuously improve their overall site experience.

Is your audience predominantly visiting your site on mobile? According to data from Statista, in 2018, 37 percent of Australians said they bought something online on a mobile device in the past month. It’s becoming more and more necessary to have, at the very least, a mobile-optimised site. With headless, by using PWAs as your frontend of choice you can create a native app experience for your customers.

In the case of Oil Garden, the three key requirements were that it be: Educational, Shopable, and Inspirational. They needed a CMS that could support online educational materials, seamless checkout, and an experience to evoke floating through water. With a headless configuration, they were able to achieve all of their needs.

There’s a lot of buzz about headless in e-commerce circles right now. By becoming informed about this growing trend, you can determine if it will add value for your brand and business strategy. Headless commerce isn’t the right fit for all businesses, but if you’re a content- or experience-driven brand, it might be worth looking into what it could do for you.

Want to learn more about the ins and outs of headless commerce? Download our ebook: A New Era of E-commerce for more context and examples around this growing trend.

[gravityform id="11" title="false" description="false" ajax="true"]
<div class='gf_browser_unknown gform_wrapper fix-om-styling_wrapper' id='gform_wrapper_11' ><div id='gf_11' class='gform_anchor' tabindex='-1'></div><form method='post' enctype='multipart/form-data' target='gform_ajax_frame_11' id='gform_11' class='fix-om-styling' action='/editorial-2/headless-commerce-explained-understanding-the-framework-behind-the-most-experience-rich-online-stores/#gf_11'> <div class='gform_body'><ul id='gform_fields_11' class='gform_fields top_label form_sublabel_below description_below'><li id='field_11_2' class='gfield gfield_contains_required field_sublabel_below field_description_below hidden_label gfield_visibility_visible' ><label class='gfield_label' for='input_11_2' >Email Address<span class='gfield_required'>*</span></label><div class='ginput_container ginput_container_email'> <input name='input_2' id='input_11_2' type='text' value='' class='large' placeholder='Email' aria-required="true" aria-invalid="false" /> </div></li><li id='field_11_3' class='gfield gfield_contains_required field_sublabel_hidden_label field_description_below hidden_label gfield_visibility_visible' ><label class='gfield_label gfield_label_before_complex' >Name<span class='gfield_required'>*</span></label><div class='ginput_complex ginput_container no_prefix has_first_name no_middle_name has_last_name no_suffix gf_name_has_2 ginput_container_name' id='input_11_3'> <span id='input_11_3_3_container' class='name_first' > <input type='text' name='input_3.3' id='input_11_3_3' value='' aria-label='First name' aria-required="true" aria-invalid="false" placeholder='First Name'/> <label for='input_11_3_3' class='hidden_sub_label screen-reader-text'>First</label> </span> <span id='input_11_3_6_container' class='name_last' > <input type='text' name='input_3.6' id='input_11_3_6' value='' aria-label='Last name' aria-required="true" aria-invalid="false" placeholder='Last Name'/> <label for='input_11_3_6' class='hidden_sub_label screen-reader-text'>Last</label> </span> </div></li><li id='field_11_5' class='gfield gfield_contains_required field_sublabel_below field_description_below hidden_label gfield_visibility_visible' ><label class='gfield_label' for='input_11_5' >Company / Organisation<span class='gfield_required'>*</span></label><div class='ginput_container ginput_container_text'><input name='input_5' id='input_11_5' type='text' value='' class='large' placeholder='Company' aria-required="true" aria-invalid="false" /></div></li><li id='field_11_6' class='gfield gform_hidden field_sublabel_below field_description_below gfield_visibility_visible' ><input name='input_6' id='input_11_6' type='hidden' class='gform_hidden' aria-invalid="false" value='NOT PROVIDED' /></li><li id='field_11_7' class='gfield gform_hidden field_sublabel_below field_description_below gfield_visibility_visible' ><input name='input_7' id='input_11_7' type='hidden' class='gform_hidden' aria-invalid="false" value='NOT PROVIDED' /></li><li id='field_11_8' class='gfield gform_hidden field_sublabel_below field_description_below gfield_visibility_visible' ><input name='input_8' id='input_11_8' type='hidden' class='gform_hidden' aria-invalid="false" value='NOT PROVIDED' /></li><li id='field_11_9' class='gfield gform_validation_container field_sublabel_below field_description_below gfield_visibility_visible' ><label class='gfield_label' for='input_11_9' >Name</label><div class='ginput_container'><input name='input_9' id='input_11_9' type='text' value='' /></div><div class='gfield_description' id='gfield_description__9'>This field is for validation purposes and should be left unchanged.</div></li> </ul></div> <div class='gform_footer top_label'> <button type="submit" class="button-3" id="gform_submit_button_11">SUBSCRIBE</button> <input type='hidden' name='gform_ajax' value='form_id=11&amp;title=&amp;description=&amp;tabindex=0' /> <input type='hidden' class='gform_hidden' name='is_submit_11' value='1' /> <input type='hidden' class='gform_hidden' name='gform_submit' value='11' /> <input type='hidden' class='gform_hidden' name='gform_unique_id' value='' /> <input type='hidden' class='gform_hidden' name='state_11' value='WyJbXSIsIjRjNDYzMzMwNzM3OTFjM2ZlOGZhNjY2ZDA4ZDVlMDcyIl0=' /> <input type='hidden' class='gform_hidden' name='gform_target_page_number_11' id='gform_target_page_number_11' value='0' /> <input type='hidden' class='gform_hidden' name='gform_source_page_number_11' id='gform_source_page_number_11' value='1' /> <input type='hidden' name='gform_field_values' value='' /> </div> </form> </div> <iframe style='display:none;width:0px;height:0px;' src='about:blank' name='gform_ajax_frame_11' id='gform_ajax_frame_11' title='This iframe contains the logic required to handle Ajax powered Gravity Forms.'></iframe> <script type='text/javascript'>jQuery(document).ready(function($){gformInitSpinner( 11, 'https://powerretail.com.au/wp-content/plugins/gravityforms/images/spinner.gif' );jQuery('#gform_ajax_frame_11').on('load',function(){var contents = jQuery(this).contents().find('*').html();var is_postback = contents.indexOf('GF_AJAX_POSTBACK') >= 0;if(!is_postback){return;}var form_content = jQuery(this).contents().find('#gform_wrapper_11');var is_confirmation = jQuery(this).contents().find('#gform_confirmation_wrapper_11').length > 0;var is_redirect = contents.indexOf('gformRedirect(){') >= 0;var is_form = form_content.length > 0 && ! is_redirect && ! is_confirmation;var mt = parseInt(jQuery('html').css('margin-top'), 10) + parseInt(jQuery('body').css('margin-top'), 10) + 100;if(is_form){jQuery('#gform_wrapper_11').html(form_content.html());if(form_content.hasClass('gform_validation_error')){jQuery('#gform_wrapper_11').addClass('gform_validation_error');} else {jQuery('#gform_wrapper_11').removeClass('gform_validation_error');}setTimeout( function() { /* delay the scroll by 50 milliseconds to fix a bug in chrome */ jQuery(document).scrollTop(jQuery('#gform_wrapper_11').offset().top - mt); }, 50 );if(window['gformInitDatepicker']) {gformInitDatepicker();}if(window['gformInitPriceFields']) {gformInitPriceFields();}var current_page = jQuery('#gform_source_page_number_11').val();gformInitSpinner( 11, 'https://powerretail.com.au/wp-content/plugins/gravityforms/images/spinner.gif' );jQuery(document).trigger('gform_page_loaded', [11, current_page]);window['gf_submitting_11'] = false;}else if(!is_redirect){var confirmation_content = jQuery(this).contents().find('.GF_AJAX_POSTBACK').html();if(!confirmation_content){confirmation_content = contents;}setTimeout(function(){jQuery('#gform_wrapper_11').replaceWith(confirmation_content);jQuery(document).scrollTop(jQuery('#gf_11').offset().top - mt);jQuery(document).trigger('gform_confirmation_loaded', [11]);window['gf_submitting_11'] = false;}, 50);}else{jQuery('#gform_11').append(contents);if(window['gformRedirect']) {gformRedirect();}}jQuery(document).trigger('gform_post_render', [11, current_page]);} );} );</script><script type='text/javascript'> jQuery(document).bind('gform_post_render', function(event, formId, currentPage){if(formId == 11) {if(typeof Placeholders != 'undefined'){ Placeholders.enable(); }} } );jQuery(document).bind('gform_post_conditional_logic', function(event, formId, fields, isInit){} );</script><script type='text/javascript'> jQuery(document).ready(function(){jQuery(document).trigger('gform_post_render', [11, 1]) } ); </script>