Commerce in Content With GraphCMS

GraphCMS is a headless, GraphQL-Native, Content Management System. It provides ultimate flexibility in how you create, manage and deliver your data in the era of the JAMstack and the omnipresent digital touchpoints.

With a powerful API primitive and a simple interface, the promise of the headless CMS allows you to ship content to any device, anywhere, at any time. Content is having a moment.

New to GraphQL? See what all the fuss is about 🚀.

But what about commerce? GraphCMS alone can't provide out of the box eCommerce experiences, but paired with other APIs, it's possible to connect GraphCMS with a variety of eCommerce APIs to deliver rich buying experiences.

Commerce comes in all shapes and sizes. A simple, embeddable cart might work for your project in the beginning. But, as you begin to grow your business, you will need an eCommerce platform that can scale in the same way GraphCMS can for content.

Online stores typically contain some sort of filtered category or collection view along with product details, cart, and checkout. Not all commerce solutions are going to provide the complex data requirements your business needs. When you want to complement product data with your logic, very few solutions give you the ability to do just that.

Since GraphCMS is a headless CMS, integrating a headless commerce API isn’t anything out of the ordinary.

With GraphCMS, you can have the best of both worlds; feature rich content paired with a seamless checkout experience, delivered via an API to power websites, mobile apps, blogs and more.

Where to begin

Deciding to move to a new CMS is a huge decision, and usually, one that stays with you for years.

The thought of embedding commerce into your GraphCMS-backed website can be relatively straightforward for small to medium business, but quite daunting if you already roll your PIM.

Thankfully, in the same way, a headless CMS can drive or enhance your existing content without you having to re-platform, we can use a headless commerce API to handle all of the business logic.

Headless commerce APIs

It feels like every day there is a new commerce solution emerging, trying to tackle a niche part of an ever-growing market. Thankfully there are a few who stand out in their niche.

Whether you're building a static site, mobile app or website, you'll be able to use any of the solutions below with GraphCMS. Let’s take a quick look at how each of the below offer something different to your content-in-commerce experience.

Moltin

Screenshot 2019-05-05 at 21.53.05.png

Moltin is a headless commerce API that was built with speed, flexibility, and control in mind. Moltin has no opinion on where you store your catalog or inventory, who you use as a payment gateway or how you embed commerce.

I may be a little biased on Moltin here, but if you already have your product data inside GraphCMS, you can continue your cart and checkout experience by making everything look and feel the same as your website or mobile app by any one of their cart, checkout, and payment endpoints.

Snipcart

Screenshot 2019-05-05 at 21.53.28.png

Probably one of the quickest ways you can embed commerce with a GraphCMS-backed website is by adding Snipcart. Snipcart provides a simple, HTML-driven API that allows you to easily add to basket and checkout with their powerful modal.

Snipcart is a great solution if you want an out of the box cart experience that works with your existing GraphCMS catalog and website. No backend logic required.

Commerce Layer

Screenshot 2019-05-05 at 21.54.31.png

Similar to Moltin, Commerce Layer is a headless REST-based API built for the JAMstack that gives you all of the APIs to handle all areas of commerce.

Commerce Layer has deep integrations with Zapier to automate workflows with thousands of apps. It also ships with a hosted checkout solution for those looking for an out-of-the-box solution, making it super easy for those who wish to offload all the business logic.

Saleor

A slight dark horse in the headless commerce space is the GraphQL-first eCommerce platform and is also completely open source. While quite new to the scene, GraphCMS users may find Saleor is a perfect fit for those who wish to go all-in on GraphQL.

Screenshot 2019-05-05 at 21.57.06.png

Shopify Buy Button

Who’s not heard of Shopify? Shopify made it super easy for creatives, hobbyists, artists, and businesses get online with no coding experience. It’s no surprise Shopify offers a Buy Button and hosted checkout similar to Snipcart.

Screenshot 2019-05-05 at 21.54.02.png

Roll your own

Depending on the complexity of your commerce needs, it could just as simple to schema-stitch your own add to basket and checkout mutations alongside your CMS endpoint.

There's a lot of logic involved when it comes to ecommerce, I'd recommend you save yourself time and money by using one of the platforms listed above, or another that fulfils your requirements.

Choosing the right commerce API

This can be confusing but it may help to think about how you wish to deliver commerce.

Is commerce something that feels native and integrates directly into your current design? Or are you looking for a solution that takes care of all the logic outside of your app, providing users a sense of familiarity when using recognized, hosted checkouts?

Only you know how commerce best fits in your application. The important thing to remember, you don’t always have to re-platform. The beauty of the headless approach is you can use as much, or as little of any of the solutions above with GraphCMS.

If you are new to building a site using a headless CMS, Jesse wrote a great article on building a database for Wine 🍷.

Are you ready?

Join our community of passionate developers!