While Magento is a wide open platform with capabilities for running both the front and back end of your store, it was primarily built with ecommerce functionality in mind, and it was built before multichannel, multidevice commerce was a standard.
Today, Magento alone isn't necessarily enough to meet the needs of a modern ecommerce store, which must often operate across multiple platforms including those that aren't accessible through a browser, and which frequently put content marketing to use in a much more profound and prolific way than in the past.
In this post, we explore the option of taking Magento "headless," meaning running it as your store's ecommerce engine while using other platforms for the front end, as well as integrations with other platforms aside from taking Magento headless.
What Is Headless Magento?
Saying you are running Magento "headless" means that the front end and back end of your ecommerce site run "independently" of one another. What does that mean? Obviously, your front end and back end can't run completely independently or the front end wouldn't be presenting information from the back end.
What it means is that the interface and architecture used to power how you display content on your site is separate from the interface and architecture used to power your business logic. One layer acts as your content management system, and another layer acts as your site's ecommerce engine, tracking inventory, processing orders, handing payment, and so on.
This allows you to use an interface you might be more familiar with, such as WordPress, as your content management system and as the interface you use to tailor your site's design.
Why Headless Is Becoming A Favorable Option
Headless is becoming an increasingly popular option for several reasons.
One is that sales now take place on multiple channels, rather than just all taking place through desktop computers. This demands versatility in how content is presented, something that traditional ecommerce platforms aren't necessarily designed for. This is particularly important if web browsers aren't the only interface you work with. Introducing a mobile app and interfaces on multiple operating systems requires multiple front end interfaces.
Meanwhile, solutions developed for presenting content typically are not designed with ecommerce specifically in mind. When the business logic and content management systems are all incorporated into a single stack, their interdependence can make it difficult to make changes to one without making changes to the other, increasing workload and introducing risks.
Familiarity For Designers and Content Creators
Another reason is that the modern web is far more content centric than ecommerce sites typically have been in the past, and content creators are accustomed to interfaces designed for presenting content, not for processing orders.
While Magento is very versatile and can be customized to do nearly anything, many presentation-related tasks are simply much easier to implement through a CMS such as WordPress as opposed to editing Magento code.
Headless Magento and ecommerce in general allows you to make changes to your site's appearance and branding without impacting the infrastructure your store runs on at all. This is important for adaptability, running promotions and campaigns, making on-site SEO changes unrelated to fundamental business architecture, etc.
Decoupling the presentation and business layers allows you to experiment on the front end or back end without worrying about how making a change to one layer will impact the other. Freedom to experiment allows you to be more innovative with your business and capitalize on emerging markets and opportunities more quickly.
A Headless Magento "Tutorial"
There is no one way to implement Magento in a headless manner, since the whole point is being able to use any platform and as many of them as you want for the user interface. There are, however, some integrations already in existence that you can use to effectively make Magento act headless with minimal web development requirements.
We'll discuss some general guidelines for implementing headless Magento on any platform, then discuss some pre-built integrations you can take advantage of.
Magento API Integration
Running Magento headless means using any platform you want for the user interface while always calling Magento's REST API endpoints for all store functionality.
A commonly accepted method for headless implementation that could fairly be called "best practice" is referred to as the App Shell Model.
The App Shell Model
An app shell should be designed to:
- Load fast
- Use minimal data
- Store static assets on the user's device
- Separate the content from the interface
- Load and publish page-specific content
The app shell can also store dynamic content locally on the user's device, so that it is still usable if the user is offline, and populate it with new content when it connects to the server.
For an App Shell to work best from an SEO perspective:
- API calls that change the content on a fundamental level should take place at the level of individual URLs. For example, a user shouldn't be able to navigate to a different product page without changing the URL, and the URL displayed should be permanently associated with that product and only that product.
- The content should still be accessible at each URL if the user's device isn't compatible with the application shell. In other words, the fundamental content associated with each URL should still be accessible through a server-side interface, even if a bare-bones one.
- API calls that do not fundamentally change the content displayed on the page should not render as different URLs.
See Google's suggestions and code examples regarding the app shell model.
Getting Started With The Magento API
To call the Magento API, you will need to create a user associated with API calls. Go to System > Permission > All Users > Add New User to do so.
You will also need to create an integration. To do this, you will go to System > Extensions > Integration > Add New Integration, making sure that the resources accessible to the integration are restricted for security.
See Magento's REST API Guide for the resources you will need to move from there.
Integrating Magento And WordPress With Plugins
A completely pre-built headless integration between Magento and WordPress (or any other platform) doesn't exist. However, there are two approaches that require minimal web development and can get you partway there. These options are WordPress plugins and Magento blocks.
FishPig also offers a WordPress module for Magento. This integration is one possibility if you want to integrate the platforms, but it is effectively the opposite of going headless with Magento. The module makes Magento the front end for your WordPress content, as opposed to making WordPress the front end for your Magento store. At least from a content marketing perspective, we would advise against this, since WordPress is a far more comprehensive content management system.
FG Magento to WooCommerce
If your primary reason for wanting to integrate Magento with WordPress is simply because all of your products and pages are already on Magento, and you aren't otherwise married to the Magento platform, you may want to consider using the FG Magento to WooCommerce WordPress plugin by Frédéric Gilles.
This plugin allows you to easily migrate your products and pages from Magento to the WooCommerce platform. WooCommerce is an ecommerce platform for WordPress that allows you to run an ecommerce store entirely through the WordPress platform. It isn't as customizable as Magento but it is more user friendly, it's popularity is comparable, the availability of plugins is comparable, and it is generally less expensive to use. If you aren't married to the features of Magento you may want to choose this option. Bear in mind that it is in no way a headless solution; in fact WooCommerce is inseparable from WordPress.
Magento 2 WordPress Integration
This WordPress plugin actually integrates Magento and WordPress. It isn't a solution that can adequately be called headless on its own, but it can help you take steps in that direction by allowing Magento and WordPress to share session and cart data, navigation and other layout elements, static Magento blocks, and products. Reviews on the plugin are somewhat limited, but at least one user says they were able to get sliders, minicart, and cart working within WordPress using the plugin.
This is a partway solution that will allow you to use WordPress as the front end for some Magento features, but it is not a full solution, since you will still need to use Magento as the front end for some ecommerce features.
Other Magento Integrations
Running Magento as a completely headless ecommerce engine isn't the only way to use Magento in concert with other platforms, nor is it necessary for every integration you make necessarily take steps in that direction. Modules and other integrations exist for a wide variety of platforms, and separating the front end from Magento isn't a goal that makes sense for every business.
We discuss a few pre-existing integrations below, although many more exist.
Integrating Yotpo and Magento
Yotpo is a marketing platform that is especially well suited for ecommerce sites with a focus on encouraging and leveraging user reviews and user generated content. You can use it to easily collect reviews, photos, and Q&A answers from your customers, then display them throughout your site and your other marketing channels. Yotpo also includes some helpful tools for creating and managing loyalty, referral, and incentive promotions to make the most of your existing audience.
Yotpo has an integration you can use to connect the two platforms. The module is available through the Magento Marketplace and can be installed just like any other module. See here for integrating with Magento 1.
Integrating ActiveCampaign with Magento
Active Campaign is a comprehensive ecommerce marketing platform built for marketing automation, email marketing, sales CRM, and messaging.
There are two ways to integrate Magento with ActiveCampaign. You can use the ActiveCampaign Magento extension from the Magento Marketplace, or you can use Zapier to integrate the two platforms to execute 137 different interplatform actions.
Integrating Magento With ERP (Enterprise Resource Planning) Platforms
Integrating your ecommerce platform and your ERP platform, while not strictly necessary, is an increasingly desirable path forward for businesses operating in the ecommerce industry. Here are a few of the available integrations.
Integrating With Microsoft Dynamics
Pre-built integrations for Dynamics and Magento do exist, but they don't come cheap. Integrations are available from i95Dev for Dynamics GP, AX, 365, and NAV. The price tag on the Magento extensions is $4,500 or $5,100, depending on which Dynamics platform you are using. You will also need to install an integration on the Dynamics side, and an additional price tag of $8,999 or $9,995 is needed if you are unable to perform all of the installations yourself.
A much cheaper integration for Dynamics 365 called CommerceLink is available through the Magento Marketplace for $50, with a $5,000 installation service.
Integrating With SAP
In addition to the Dynamics integrations, i95Dev also offers an SAP-B1 integration, for the same $5,100 extension cost and $9,995 installation cost. Other integrations, which will require a custom quote, are available from Corevist and Magento SAP Connector.
Integrating With NetSuite
A NetSuite integration from Celigo is available for free, both in Magento 2 and Magento 1. There have been some complaints that the Magento 2 integration lacks a composer install, making installation more difficult than is typical for Magento 2. Another free extension is available from FarApp, but unfortunately it only exists for Magento 1.
Magento is powerful, but it can do more if you leverage the power of other platforms. Whether you choose to do that through integrations, by taking Magento headless, or some combination or half measure, use this guide as your jumping off point.