As companies continue to search for optimization and differentiation in the increasingly competitive online commerce space, turning to headless solutions allows businesses to break away from templated e-commerce solutions to create highly performant, unique e-commerce sites.
We can all agree that online shopping is a trend that is here to stay. It’s estimated that by 2025, 25% of total retail shopping globally will be done online. Having a highly performant, unique e-commerce platform has become a must for businesses to take advantage of the massive source of revenue that can come from online shopping.
By 2025, 25% of total retail shopping globally will be done online.
Many of the major players in the e-commerce platform space have developed great tools that allow people to easily get an online store up and running. The beauty of these solutions is that they are designed to be user friendly, giving people with little technical expertise the opportunity to run an e-commerce shop. Many of these platforms provide predefined store templates for users to choose from that can be populated with products and any supporting content. In this way, these e-commerce platforms act as the Content Management System (CMS) that stores content and displays the front-end of the store, along with powering the back-end functionalities, like checkout or inventory, that make the commerce side of the site work.
While the templated approach of these traditional e-commerce platforms work for many people, some may find that they are looking for more flexibility of the front-end of their store. This may be because they want to use custom designs to differentiate from competitor websites, there’s the need to support localized content, or simply wanting to build the front-end with a different tech stack than what is defined by the e-commerce platform. To support this, many e-commerce companies have introduced headless e-commerce solutions, where products and store functionality is served from the e-commerce platform via an API to be consumed by the front-end of your choice.
While going the headless e-commerce route opens up a lot of flexibility and customization, it also means that there is no predefined template or front-end to start with. It also means that you need to decide where your site content will be stored, as you are no longer using the e-commerce platform as an all-in-one solution. You may think to simply hardcode your design and any additional content – and although this may provide some of the customization you’re looking for, it still has the limitation of needing developer support to edit or add content to the site.
What if I told you that there’s a way you could have both – a tool that allows non-technical users to author and edit site content while still using the data and functionalities from the e-commerce platform. This is one of our favourite solutions for clients looking for a custom e-commerce site; using a headless e-commerce platform, like Shopify, with a headless CMS, like Sanity.
Sanity Headless CMS
If you are unfamiliar with the different types of Content Management Systems, check out this article giving you a breakdown of what is a headless CMS in 30 seconds.
One of the biggest benefits of using any headless CMS is gaining the flexibility of separating your content from your front-end presentation layer. Within the CMS is where the majority of your site content is stored and managed – this can include (but is not limited to!) text, images, videos, rich text and even page layouts. By separating the content from the front-end, it allows the content to be delivered to a wide variety of front-end solutions via an API, and can be displayed in different ways depending on the device.
A popular headless CMS product, and one that we love to use, is Sanity.io. Sanity is a powerful and flexible headless CMS that offers a lot of benefits to developers, content creators, and businesses. Here are some reasons why we love using Sanity:
- Customizable Content Models: Sanity allows you to create custom content models that fit your specific needs. You can define your own schema and structure for your content, which gives you the flexibility to store and manage data in a way that makes sense for your project.
- Real-Time Collaboration: Sanity provides a real-time collaborative environment for content creation and editing. This means that multiple people can work on the same content at the same time, and changes are instantly visible to everyone.
- Fast and Scalable: Sanity is built on a scalable and highly performant backend architecture that can handle large amounts of data and traffic. This means that your site or app will be able to handle increased traffic and content without slowing down.
- Rich Text Editing: With Sanity, you can create rich, multimedia content using a powerful and intuitive rich text editor. This makes it easy to add images, videos, and other media to your content.
- Developer-Friendly: Sanity is designed to be developer-friendly, with a robust set of APIs and SDKs that allow you to integrate with a wide range of front-end frameworks and tools. You can also use your preferred development tools, such as Git and npm, to manage your code and content.
- Affordable: Sanity offers a variety of pricing plans, including a free plan, which makes it accessible to businesses of all sizes. Additionally, their pricing is based on usage, so you only pay for what you use.
- Ease of Use: Sanity has a great blend of intuitive, easy-to-use features along with the ability to customize almost anything you want – even down to the look and feel of the editor interface used to manage content.
Using a tool like Sanity gives you the advantages and flexibility of headless content management. But you may be wondering, how can I use a tool like this if I want to create an e-commerce site? How would I maintain consistency between the content in my CMS and the back-end commerce functionalities in my e-commerce platform? This is another reason that we love using Sanity: the Sanity Connect Shopify integration.
Sanity Connect Shopify Integration
If you’re using Shopify as your e-commerce platform and want to use Sanity to manage your site content, there is a great tool available called Sanity Connect for Shopify. Sanity Connect is a Shopify app that allows Shopify merchants to sync and manage their products between Shopify and Sanity. With the integration, merchants can use Shopify to create and manage their product content, including descriptions, images, variants, and metadata. This content can then be synced to Sanity, where it is used to create product pages, collections, or in various content throughout the site.
The integration provides a seamless workflow for managing product content, as well as the ability to use Sanity's powerful content modeling and customization capabilities. It also helps ensure consistency and accuracy across all product content, which can improve the customer experience and drive sales. It’s also incredibly easy to use – you just need to install the app from the Shopify app store, and follow the prompts to begin syncing your store data to Sanity.
The Sanity Connect interface allows you to sync data with the click of a button
To make things even easier, Sanity has also set up a studio template that will give you predefined content and product schemas that match the shape of the Shopify data that is synced via the Sanity Connect app. Using this template can really speed up the setup process when using Shopify and Sanity together; you simply need to run the following command in your local shell where you replace PROJECT_ID and DATASET_NAME with those from the project your Shopify store is connected to:
npx @sanity/cli init --template shopify --project PROJECT_ID --dataset DATASET_NAMESummary
Now that we have our front-end content stored in Sanity, and our back-end commerce functionalities from Shopify, we’re ready to build a custom headless storefront. As we consume data and functionality from both of these tools via an API, we’re able to use whatever framework we’d like to build the front-end experience for our customers. Some popular frameworks to use with headless products include Next.js or Shopify’s Hydrogen framework.
Regardless of the front-end framework you choose, with this type of architecture you can optimize your content, site and entire e-commerce platform to create a world-class experience.
Still interested in learning more? Check out this video where we walk through the steps of using Sanity Connect to sync data between Shopify & Sanity:
