As the world of eCommerce continues to expand, so do the options available for building customer experiences that span multiple channels and reach consumers wherever they are.

In the second installment of this three-part series on eCommerce trends, we’ll take a closer look at headless or decoupled approaches to digital commerce, and the way some of our partners are using headless to power incredible eCommerce solutions.

If you missed it, check out part one of the series here, which offers a deep dive on Omnichannel Commerce and the ways you can build a completely connected customer experience using WordPress.

In part two, we’ll cover the following sections:

What is Headless Commerce?

We can’t talk about eCommerce trends without mentioning headless. 

Perhaps your team wants to offer an optimized shopping experience on the front end and currently faces limitations with WordPress. Whether those limitations are scaling issues with a third-party platform or challenges with managing multiple channels, Headless Commerce can help. 

Headless Commerce means decoupling the front end presentation layer of your online store from the core eCommerce platform. 

With headless, developers can focus on creating the front end experience with rich, SEO-optimized content to drive more traffic to the online store.

Quite often, eCommerce platforms are not the answer to your content strategy. This is where WordPress, which offers a universe of choices for content creation, publication, and promotion, comes in as the CMS of choice. 

Meanwhile, developers can use a robust commerce platform for their back end needs including managing orders, catalogs, shipping, and inventory. Additionally, the platform can connect to critical business applications including ERPs, CRMs, PIMs, and POS. 

Importantly, many industry-leading commerce platforms are also responsible for managing PCI compliance and security, which alleviates risk and burden for the business.

Why Headless Commerce?

Here are just a few of the benefits organizations are realizing with a headless approach to eCommerce:

  • More flexibility. More freedom. By decoupling architecture, your engineering team or agency partner can leverage their current skillset to build the best front end experience with more agility. Whether it’s React, Vue, or Angular, each organization has its own preference when it comes to building front end technologies. 
  • Keeping the current tech stack. For businesses already invested in specific technologies and looking to integrate a commerce solution, changing the entire architecture is not feasible. It could be too expensive, too time-intensive, or both. A headless approach can help keep the existing tech stack running while implementing new functionality. 
  • Content and Commerce Strategy. Many brands have a content-driven focus. Leveraging best-in-class solutions for content management and commerce allows separate technologies to do what they do best. For a fully headless scenario, the CMS can feed content into a front end framework via API and focus more on an experience-led approach. Meanwhile, the commerce platform can take care of the complexity of back end processes. Ex. WordPress and BigCommerce*
  • Multiple front ends. Once a commerce platform is established within your tech ecosystem, it can become the single source of truth for all things commerce. With headless, you can build multiple front end experiences and manage them within a centralized, single commerce solution. These front ends may serve multiple use cases including driving sales in different regions or powering sub-brands within a parent company. 
  • Scalability, Stability, and Performance. Using a monolithic solution for both content and commerce can be expensive. By decoupling these solutions, your business can scale each component separately and efficiently as needed. By leveraging high-performance APIs between the front end and back end layer, businesses are no longer limited to the resource constraints of a single component of the stack.

*The scenarios we share in this article are under the “loosely coupled” or “bridged” headless approach versus fully decoupled.

These benefits also come with challenges, many of which we’ve mentioned here. Later on, we’ll discuss some of the more specific challenges around building Headless Commerce.

Overall, a headless approach allows more flexibility to build a compelling front end experience with a robust commerce platform using best-in-class technologies. With this API-based approach, businesses can take advantage of the extensibility of open source platforms for a competitive edge in their market. 

After all, different brands have different needs, and a one-size-fits-all solution is seldom applicable to every business.

Headless Commerce with WordPress.

skilled female it professional working at online platform for programmers connected to wifi internet on modern laptop device

Headless approaches can offer exciting benefits,  but where do you start? Let’s take a look at what commerce functionality is needed at a bare minimum:

  • Display product data (Product name, description, price, image).
  • Select product and add to cart.
  • Checkout product. 

Traditionally, using a robust eCommerce solution such as WooCommerce would be the coupled WordPress approach (both front end and back end within the same WordPress instance). But since we’re talking about a headless approach, we’ll look at some other digital commerce solutions in the market to build these features. 

BigCommerce + WordPress.

BigCommerce already has a brilliant solution for managing products and the beauty of it is that all the data lives in a secure, scalable place that removes the burden of WordPress site owners of having to worry about self-hosting that data and the memory limits and security concerns that might come with it. That presents an ideal opportunity to tap into the BigCommerce platform and feed it directly into WordPress so that products can be embedded alongside native WordPress content.

Geoff Graham, Modern Tribe

BigCommerce has a robust eCommerce engine that serves merchants of all sizes. In 2020, IDC MarketScape featured BigCommerce as an emerging leader in Headless Commerce.

From a technical perspective, the BigCommerce platform is highly extensible to connect to an existing tech stack. That includes building eCommerce functionality with WordPress.

To start, the platform has specific APIs that help achieve the foundational commerce features mentioned above. 

  • Catalog API:  Syncs catalog and inventory data. Supports physical products, digital products (downloadable ebooks, software, music) and gift certificates. 
  • Cart API: Customize the cart experience whether it’s for the WordPress frontend or mobile app. Modify cart contents and pull cart data for analytics tools.  
  • Checkout API: Allows custom checkout experiences beyond the BigCommerce storefront. Capabilities include offering options for subscriptions and recurring orders.
  • Payments API: Process payments through stored card payments or credit card payments with BigCommerce’s supported payment gateways.  

That’s great, right? We have lots of APIs to work with to build out a customized frontend experience. The APIs handle the business logic of which product (and its data) goes where (WordPress page, mobile app). 

The problem is that the WordPress frontend essentially becomes a remote storefront. You have the backend BigCommerce platform that communicates with WordPress via APIs.

However, you now have two separate systems that aren’t unified, yet. Ideally, the commerce platform would be the single source of truth for products, orders, and users. But with two separate platforms, issues arise with syncing customer accounts, inventory management and analytics.

Core settings dashboard for the BigCommerce For WordPress plugin

How do you solve the disparate systems? This is where the BigCommerce For WordPress integration can help. Instead of building the WordPress frontend with commerce capabilities from scratch, you can implement a headless commerce solution faster with less effort. 

The plugin does the following:

  • Offload backend resources that normally would weigh down the WordPress instance.
  • Imports BigCommerce product data automatically to WordPress via WP cron (default time is 5 minutes and can be adjusted in the plugin settings)
  • Reduce the need of installing multiple add-ons to enable more advanced features including currency handling, shipping, taxation and global payment gateway support.
  • Leverage an embedded checkout experience where BigCommerce assumes the burden of PCI compliance.
  • Integrate inventory data with business systems like ERPs and PIMs directly with BigCommerce.
  • Scale large catalogs with a high number of variations and SKUs per product. (Modern Tribe has stress-tested catalogs with up to 5000 complex products without issues)
  • Manage selling with multiple channels (frontend experiences) within a single BigCommerce dashboard. 

Basically, the plugin functions as a headless connector to BigCommerce’s core platform. It uses the APIs mentioned above to import your product catalog over to WordPress in the form of custom post types. As with custom post types, you can make edits in WordPress to override the product descriptions coming from BigCommerce. 

With that said, the plugin is only a start and offers basic commerce functionality right out-of-the-box. However, if you’re looking to customize the WordPress front end even further, you can extend the capabilities of BigCommerce based on your specific use cases.

For instance, there are different ways to approach the checkout experience. The embedded checkout, of course, is the fastest way to build a checkout page since it involves less development. However, there’s also less control over design as you’re essentially using an iframe for the WordPress checkout page.  For a more customized checkout experience, consider using BigCommerce’s Checkout SDK.

Checkout SDK

Checkout SDK is a client-side JavaScript library that makes it easier to consume the cart and checkout APIs. This is also called the Storefront APIs. You can use this library to build a custom checkout UI with features including:

  • Login customers into their account
  • Display all shipping methods and quotes 
  • Enable payment for orders

Here’s an example from the Checkout SDK testing environment:

Although the checkout UI can be customized, note that this lives on the BigCommerce side of things. A redirect happens from the WordPress frontend to the BigCommerce checkout domain when the customer is ready to checkout. You’ll have more control over the checkout experience and design. However, this does come with more development time and resources. If you’re looking for an easier implementation with less effort, the embedded checkout is the better option.

Authentication between multi-domains.

By default, the embedded checkout also uses a BigCommerce domain such as example.mybigcommerce.com/embedded-checkout. It’s a framed page on the WordPress front end but still hosted on BigCommerce’s platform.

So, regardless of which type of checkout you’re using, you’ll want to ensure the customer stays logged in between BigCommerce and WordPress. This is called multi-domain ecommerce. 

Normally, third party cookies can be used to ensure authentication between both domains. Due to privacy concerns, however, popular browsers such as Firefox, Apple Safari, and Google Chrome have announced they are committed to disabling third-party cookies.

With this in mind, the best solution to ensure secure authentication across separate platforms is to use the same domain. If the WordPress store is storefront.com, then you can create a checkout subdomain for BigCommerce such as checkout.storefront.com.

The subdomain can be created with your DNS provider and pointed to the BigCommerce host name via CNAME. Note: Both domains will require an SSL to run securely over HTTPS.

Even if you’re not impacted by the new changes right now, it’s highly recommended to make these adjustments now and prevent additional headaches in the future around cookies.

Gutenberg Support

Gutenberg’s block-based approach makes it easy to quickly build dynamic content pages

With WordPress, you can build sites faster with the new block-based editor, Gutenberg. The great advantage of using BigCommerce for WordPress is that the plugin supports the visual editor as well. That way, you can build media-rich product pages with pre-built blocks from BigCommerce. 

Managing multiple channels.

In part one of this series, we covered the benefits of pursuing an omnichannel strategy. From an architecture perspective, that could mean interacting with multiple front end experiences. These channels include storefronts (WordPress), marketplaces (Facebook, Amazon, eBay), Point of Sale, and social marketing channels. 

If you are building multiple frontends, that adds more complexity and potential for issues to arise. With headless, you can technically have a mobile app, multiple WordPress sites, React front end, and a BigCommerce storefront all running through a single commerce instance like BigCommerce. 

As each storefront serves different use cases such as multiple regions, there will be differences in the products listed across these channels. For example, the same products may have different pricing and currency based on the region. In order to alleviate the complexity that comes with these differences, you can use BigCommerce’s Channel Manager:

Future of BigCommerce + WordPress

Looking ahead, WP Engine Agency Partner Modern Tribe is working closely with BigCommerce to create React Components and hooks libraries to support more headless options beyond the bridged approach described above.

This offers more flexibility and optionality for developers to build the front-end UI based on their needs. Meanwhile, WordPress could function as the core content management layer with easier design customization via Gutenberg. 

For more information on the WP + BigCommerce approach outlined above, feel free to reach out to Modern Tribe and follow @ModernTribeInc on social media to connect. 

Shopify + WordPress.

Shopify is an outstanding platform for merchants and developers alike, and one that serves its core objectives impressively well. With WordPress, we’re able to extend that foundation with custom product attributes, enhanced designs, and more, thanks to the ease and familiarity of WP-Admin and Gutenberg. The time and cost to bring new client ideas to life are fractions of what they might typically be, and clients enjoy greater data ownership and portability.

Collin Matthews, Founder & Managing Director at Press Foundry

Shopify is one of the most popular eCommerce platforms on the market today, accounting for approximately 20% of hosted commerce websites in the U.S.

While Shopify and Shopify Plus (which caters to enterprise sites) empower merchants to start selling online quickly and easily, it’s important to acknowledge the limitations at play with an out-of-the-box account. 

Some key drawbacks include:

  • Shopify limits you to three product options and 100 variants.
  • Variant product images are limited to one per variant.
  • Product sorting and filtering is limited.
  • Rich, dynamic content—for example, a robust on-site blogging platform—is difficult to produce.
  • Backend functionality can’t be customized.
  • Shopify boasts no customizable checkout experience (the ability to modify is limited on Shopify Plus).
  • Opportunities to perform deeper technical search engine optimization (SEO) are few.

Yes, apps from the Shopify App Store—a curated offering of third-party tools to extend core Shopify functions similar to the Apple App Store or Google Play Store—can extend functionality. And yes, some even offer point-click-install-done kinds of magic. But others require more in-depth customization to add them to a storefront’s ecosystem—a point that’s often overlooked both by store owners and those assessing the Shopify platform and app store offerings.

The Shopify App Store offers third-party tools that extend the platform’s functionality

One further complexity? You can’t often own the data you put into or build into these apps. Many require ongoing monthly subscriptions, meaning any development work you do—or extended data you add—is lost if you ever cancel your subscription. 

At Press Foundry, a WordPress and Shopify agency in Boston, one of the most common complaints heard from prospective clients in their current setup is precisely this lack of data ownership and portability. As a result, they often end up sacrificing business innovation, as they don’t have the funds—or the bandwidth—to reinvent the wheel.

While a typical Shopify storefront runs 6+ apps on their account, it’s not uncommon to see storefronts with 20+ apps installed. From a developer’s perspective, this is a problem. Imagine building and maintaining a hosted solution with a myriad of third-party apps that hopefully all play nicely together—all while being confined by their individual capabilities and designs.

A semi-headless approach.

After working on several eCommerce builds for small and medium-sized clients, Press Foundry set out to implement an enhanced content management layer via WordPress to extend Shopify’s core abilities.

This semi-headless approach lets developers do the brunt of their coding in a familiar WordPress environment before passing content over to Shopify for frontend rendering. It also allows site owners to manage complex data structures for products, collections, pages, and blog content leveraging WordPress as a backend for editing. 

The result can be served either by a hybrid WordPress + Shopify frontend (via a subdomain for either the shop or the marketing content) or entirely on Shopify’s frontend, depending on needs and preferences.

Press Foundry leverages the Shopify API to manage content and extend with custom data structures. Metafields are passed either as raw data JSON objects or static, pre-rendered HTML via the REST API.

For example, let’s take a Product Display Page (PDP) and add custom accordion or tab-based content on a per-product basis (titles, content, etc.). After we have created a data structure on WordPress (often with ACF Pro), we can either:

  1. Pre-render the HTML on WordPress and save it to a Shopify Metafield attached to the specified Product; or
  2. Save this data structure as a JSON object and render the content via Liquid on Shopify.

With the pre-rendered HTML approach, it’s easier to inject pre-rendered data into Liquid, such as {{ product.metafield.namespace.metafieldname }}.

This one snippet can be reused throughout the site to easily render that section or widget multiple times. This is good for complex HTML structures that won’t be presented in different ways on the frontend.

However, if you want to render the same data but in multiple ways, either on a given page or throughout the site, it’s better to take the second approach and save them as JSON.

You can then access the contents with dot notation for objects {{product.metafield.namespace.metafieldname.json_object_member }}
or iterate as an array {{ product.metafield.namespace.metafieldname[0] }} 

For building page content with Gutenberg blocks, HTML is already pre-rendered on the WordPress side. This means we can pass this directly into the body of a Shopify-hosted Page, Article, or Product, making it faster to customize the storytelling aspect of any area of a Shopify site.

Separate front ends.

It is also possible to have two separate front ends—one rendered by WordPress and the other by Shopify—to support deeper content needs (or keep from rebuilding an existing site infrastructure). 

Let’s say domain.com is your existing WordPress frontend, and you’d like to roll out a storefront via Shopify. By creating a shop.domain.com subdomain for Shopify, you can make a liquid theme that is enhanced by Custom Post Types, etc., and that is visually similar to the main site at domain.com. You can also inject the HTML of the header and footer into shop.domain.com, so that common navigation elements are consistent across both platforms and simultaneously updated, giving visitors a seamless experience.

In these cases, Press Foundry implements a mechanism that syncs WordPress into Shopify whenever a content update is made within the WordPress Dashboard. This allows you to maintain up-to-date content within Shopify’s Metafields without the need to ping WordPress on each page load, thus reducing the number of requests made to WordPress and the WordPress host. This, of course, helps to maintain low bandwidth usage.

As a final step in optimizing the delivery of media files managed through WordPress, you can leverage a Content Delivery Network (CDN) and corresponding WordPress plugin. This serves frontend media assets, as well as updates file path URLs within the WordPress dashboard as you edit in real-time. Press Foundry implemented this approach ahead of the Black Friday / Cyber Monday rush for one of their Shopify Plus clients and saw a 70% reduction in non-CDN bandwidth usage, even with a 40% jump in traffic.

None of this is to say Shopify is a poor eCommerce platform choice. In fact, it’s actually quite the contrary. Over one million businesses are powered by Shopify, with 7,000+ on Shopify Plus alone, and Shopify storefronts have conducted over $172B in total sales. Shopify is a solution for turnkey eCommerce with many fulfillment benefits, natively integrated POS, and world-class uptime, security, and support. 

But by adding WordPress as an enhanced content management layer, you get the best of both worlds—a consolidated tech stack and quick concept-to reality timelines, both at a fraction of the cost.

If you’re interested in learning more about the bridged WP + Shopify approach outlined above or need help with your next eCommerce site build, don’t hesitate to reach out to the team at Press Foundry. Follow @pressfoundry on social media for deeper insights and assistance.

Progressive Web Apps (PWA)

As part of your overall headless strategy, you may want to consider a progressive web app. A PWA can replicate the experience of a native mobile app. What does that mean? It means these apps can load incredibly fast, provide engaging interactions (push notifications, display on home screen), and even work with poor or no Internet connection. Plus, users don’t have to download a mobile app.

Building a native mobile app can be very resource and time-intensive. PWAs make it possible to engage users in similar ways faster by using modern technologies like JavaScript, HTML, CSS. Additionally, there are several frameworks growing in popularity that you can connect to the eCommerce core platform. These include Gatsby, Vue Storefront, and React. 

Whichever frontend technologies are used, it’s important to note that they still require a CMS. WordPress functions as the single source of truth for your content. 

With this headless approach, the data in WordPress can be accessed via REST API to multiple endpoints. Even better, consider using the newer GraphQL API to serve content with more simplicity and reliability. 

If you’re managing multiple frontends, consider the PWA as a single channel within your omnichannel strategy. 

Stay tuned for the final part in this three-part series: Understanding eCommerce Trends: Modular/Microservices Commerce.

Power your digital commerce with WP Engine.

Optimize your Omnichannel strategy on the managed WordPress platform of choice. Find out more about WP Engine’s WooCommerce hosting solution or speak to a specialist and get started today!

More WordPress News from WP Engine

Start the conversation.

Leave a Comment.