Why and when should you develop a headless e-commerce site?
The trend towards headless e-commerce started about a decade ago, aiming to provide tools and an engine for e-commerce without the storefront, leaving the responsibility to the designers and developers to tailor their own frontend (the head).
As this technical choice has an impact on architecture and costs, it is key to review the market use cases for headless e-commerce. Through feedback from a real-life project, we will see how this concept translates to a Shopify stores, with some mistakes to avoid.
In which cases should you use headless?
Since a custom frontend has to be created from scratch, headless is still a more expensive solution to build. However, there are some good reasons for choosing it.
Multiple sales channels. When your strategy targets physical retail, web, mobile, connected devices, the diversity of solutions for interfacing with the e-commerce part fully justifies starting with headless.
Brand identity. If the sale of your products relies on storytelling, then you will require a robust content management tool. However, this feature is quite often the Achilles heel of e-commerce tools, as it is mainly focused on the product catalog and the purchase. The strength of a headless solution therefore enables the composition of a complete architecture by coupling it with a specialized headless tool. In the case of a CMS, solutions such as Strapi, Contentful or Prismic offer a perfect complement for managing content and media.
More customizable UX. Another critic that can be addressed to the all-in-one solutions on the market involves their UX. While there are options for customization with theme and templates, the navigation path remains relatively rigid. The benefits of the headless platform lie in their data orientation, making it much more interface agnostic. This makes it possible to design features that are perfectly tailored to your needs, based on all the information available in the data model.
If in doubt, you can opt for a “hybrid” tool that offers headless capabilities along with template management. This will allow a smooth transition should you change your strategy. Platforms like Shopify or Adobe Commerce offer both options.
Case study: Jacques Marie Mage
Jacques Marie Mage, a LA-based designer of high-end sunglasses and eyewear, was looking to redesign its online store in 2021. The clients wanted to revamp the shop to highlight its powerful brand identity based on visuals and brand content. They also wanted to improve their workflow for managing the product list and orders. This project offered an ideal use case for building a headless e-commerce.
The architecture selected by Source is based on a Shopify Plus plugged to a Prismic CMS to manage brand content and homepage marketing. An ERP is connected to Shopify to synchronize the catalog and orders.
Algolia was added as an external search engine to compensate for the very limited product search, and the need to search CMS and e-Commerce content in one place. Algolia is able to sync content from Shopify and Prismic, but also provides a geographic search system, which is very useful to create a store locator.
A beautiful website was created separately (the head) to showcase the catalog and content in an original way, also by Source in collaboration with designer Brijan Powell and creative developer Aristide Benoist.
Pitfalls to avoid with Shopify
Data model. Shopify is structured with a data model, but as the service continues to evolve, it is becoming more and more extensible. Do not hesitate to use metafields, which are now available on products, collections, and user accounts. However, the catalog remains organized around the collections and products. The navigation must be structured around this key concept.
Emails. Not everything in Shopify is headless. Some navigation steps require an email (account activation, password reset…) containing a link to the Shopify URL (https://XXXXX.myshopify.com/..../) which cannot be adapted. A workaround is to modify the Liquid templates installed by default to redirect to the headless website.
Third party apps. Marketplace applications available from the Shopify App Store should be chosen with caution. Most of them are designed to work with Liquid templates. Check first if an API exists, which will make it much easier to integrate with your site.
Checkout. The checkout flow is fully managed on Shopify, and only the Shopify Plus plan allows the rework of a dedicated template. Although the UI can’t be modified in depth, customization is sufficient to align the checkout with the brand identity, and to compensate for some of the limitations created with headless (adding a Back to Cart link, or a Go to Account link at the end of the purchase).
Another important feature is user account management. A session opened on the headless site is not passed to the checkout. To solve this, you need to make sure your user is logged in using Multipass (only for Shopify Plus), which will redirect to the checkout with authentication information.
In conclusion
Headless offers a flexible and powerful solution for branding, breaking out of traditional eCommerce conventions or combining various technical solutions, with a little more development effort.
The pitfalls listed above are not exhaustive and definitely not specific to Shopify. It is important to analyze the chosen e-Commerce solution in detail in order to identify all the limitations and to design a response that meets the customer’s needs.
