GraphQL powered eCommerce with Snipcart

Learn how to use GraphCMS with Snipcart for delivering epic commerce experiences.

Jamie Barton
GraphCMS + Snipcart

eCommerce is one of the fastest growing use cases for headless content management over the last few years, as are the APIs powering checkout and payment. GraphCMS was built with scalability in mind, and has all of the tools you need to power a fully bespoke eCommerce experience that your customers expect.

Depending on your scale, and how much you need to integrate with other services, there are dozens of commerce service providers to pick from.

Snipcart does things differently when it comes to enabling eCommerce. Snipcart is a drop-in cart and checkout that you can add with a few lines of code to any website. It works with digital and physical products, as well as subscriptions and has an events API that you can hook into to develop custom pre/post checkout integrations.

Add to Bag

As a developer, Snipcart is completely agnostic to the what you build, and what you use for the frontend. Snipcart works well with your current inventory — which is great if you're looking to sell your GraphCMS backed inventory.

Let's take a look at a few ways you can use GraphCMS with Snipcart. I'll assume you're familiar with GraphCMS, so I will leave you to setup, configure and integrate Snipcart by following their documentation, and instantiate a GraphQL client for GraphCMS.

GraphCMS for ProductsAnchor

I'll be using a simple content model and relationships between categories, products, prices, and the enumeration for currencies.

  • A Category has many Products
  • A Product belongs to one Category
  • A Product has many Prices
  • A Price belongs to one Product
CategoryProductPriceCurrency
Name (String)Name (String)Amount (Int)EUR
Slug (String)Slug (String)Currency (Enum)GBP
Products (Relation)DescriptionUSD
Image (Asset)
Prices (Relation)
Category (Relation)

GraphCMS also gives you a "Commerce Shop" starter you can use to quickly bootstrap a project with some example data for products.

GraphCMS Project Templates

Fetching ProductsAnchor

You've probably seen a collection of all products before, to do this we can fetch all products, their fields, and relations with a single GraphQL query.

Product Grid

A query for this would look something like:

{
products {
id
name
slug
description {
html
}
image {
url
width
height
}
prices {
amount
currency
}
}
}

Fetching Products by CategoryAnchor

Similar to fetching all products, it's also common to show pages of products per category. We can use the GraphCMS GraphQL API to fetch a single Category by slug, and all of the products that belong to that category.

{
category(where: {slug: "tshirts"}) {
name
products {
id
name
slug
description {
html
}
image {
url
width
height
}
prices {
amount
currency
}
}
}
}

Product Display PagesAnchor

As with any eCommerce store you'll most likely want to show a page for your product, including any additional images, prices, description, related products, and that important "Add to Bag" button.

Product Display Page

Snipcart makes this all too easy with adding attributes to a div with the options you want for your "Add to Bag" button.

<button
className="snipcart-add-item"
data-item-id="your-product-id"
data-item-price="your-product-price"
data-item-url="a-link-to-this-page"
data-item-image="your-product-image-asset-url"
data-item-name="your-product-name"
>
Add to Bag
</button>

Let's imagine we have the following query to fetch products by the slug:

query ProductPageQuery($slug: String!) {
product(slug: { eq: $slug }) {
id
name
prices {
amount
currency
}
description {
html
}
image {
url
}
}
}
}

You'll remember with the content model we had above that a Product has many Prices. Snipcart supports currencies, so we can specify the current for our product when adding to cart. You'll need to configure currencies within your Snipcart project for them to work properly though!

Hopefully this post has given you an idea of how you can use GraphCMS as your PIM. Using GraphCMS as a PIM can be done at scale in a similar way..

It's Easy To Get Started

GraphCMS plans are flexibly suited to accommodate your growth. Get started for free, or request a demo to discuss larger projects with more complex needs