Starting BigCommerce Development: The Main Pillars

If you’re on the cusp of delving into BigCommerce and need help conceptualizing just how developing with a SaaS platform works, make sure to check out the first article in my series: Thinking in SaaS.

Now we’re going to zoom in a little to survey the major tools and concepts you’ll need to familiarize yourself with for your BigCommerce journey. If you have a good handle on what BC is and are ready to roll up your sleeves, but you’re wondering about the best place to start amid a dizzying array of documentation, I think you’ll benefit from this bird’s-eye overview.

The BigCommerce Application

As a preamble I hope you won’t find patronizing, it’s important to emphasize that, if you’re new to BigCommerce, you shouldn’t neglect to make the native eCommerce functionality your first stop. Sign up for a store and become well versed in the ins and outs of BigCommerce’s native features before becoming deeply entrenched in your dev-focused study. You might be surprised how many more concepts will click when you’ve taken the time to familiarize yourself with the nooks and crannies of configuring and managing your store.

At a Glance

In this tour, we’re going to look briefly at these main “pillars” of BigCommerce development:

• BigCommerce APIs
• Stencil and Page Builder
• Single-Click Apps
• Custom Checkout
• Webhook Events
• Your Favorite Application Framework

Our review of each will hardly be extensive - only a summary of its concept and purpose. But the goal is to help you compartmentalize. I tend to choose one of these areas to focus on at a time, and each new tidbit I learn as I level up my BigCommerce skills gets filed into one of these categories. You have your own goals for your custom storefront, and understanding these pillars will help you decide where to focus first.

BigCommerce APIs

The web API is the beating heart of custom development with the platform, and you’re unlikely to be creating BigCommerce experiences for long before needing to interact with the API in some form or other.

The BC motto of “open SaaS” means that there is API coverage for very nearly anything you could want to do with your store. In fact, we’d do better to refer to it as a suite of APIs rather than a singular entity: There are REST management APIs for manipulating your product catalog, customers, orders, store settings, etc; REST content APIs for managing the pages and widgets on your store; increasingly robust GraphQL APIs for an emphasis on fast and efficient data fetches from the storefront; and specifications for Provider APIs that allow your own apps to supply custom tax and shipping information.

The various APIs come with different endpoints and authentication techniques, each appropriate to a unique purpose. There’s enough to wrap your head around here, in fact, that an overview of the BigCommerce APIs will be the focus of the next article in this series! This makes for a good first topic of study if you’re looking to create apps or headless implementations, or a secondary one even if you’re focused on building storefronts on the native front-end.

Stencil and Page Builder

Stencil is the engine underlying BigCommerce’s native front-end and the development framework for customizing it. If you’re building out a storefront (unless you’re using BC in a headless context), you’re building a Stencil theme and using the Stencil CLI development environment to do it.

Stencil uses Handlebars for its templating syntax, Sass as a CSS preprocessor, and webpack for asset bundling. It also comes with its own style framework built on top of Foundation, as well as several other powerful tools for rapidly developing your content presentation. The default Stencil theme for BigCommerce stores is the open source Cornerstone, which will likely be your starting point for your own.

Page Builder warrants a mention among our pillars, even though it’s not a development tool per se. Page Builder is a powerful graphical content management tool that allows for creating robust content directly within your BigCommerce admin. It’s seamlessly integrated with Stencil themes for content placement. And like virtually all other aspects of the platform, the “widgets” at its core can be managed entirely with the API, making it a viable tool for front-end presentation for your custom apps!

Single-Click Apps

“App” is a broad designation in our ecosystem of tools and concepts, likely to enter the lexicon of your architecture in any number of ways. An app is less of a “pillar” in our list and more of a final construct that likely comprises several of the others. 

So what we’re covering here is a very specific kind of app: The BigCommerce Single-Click App. While these live outside your BC store like any other web application, they are registered in the BC dev tools portal to be “installable” from within your store admin; all apps on the BigCommerce marketplace are of this type. This is facilitated by an OAuth workflow your app must accommodate, and that workflow is the real pillar of study here. Whether your companion app must be a Single-Click App depends on your requirements, though there’s a case to be made for it as a standard practice. If your needs tend toward custom back-end functionality, this topic is likely to be your second focus after the APIs.

Custom Checkout

Customizing checkout in BigCommerce is its own animal, separate from the Stencil architecture. The main BC checkout interface lives outside your Stencil theme, and thanks to the benefits of letting BigCommerce shoulder the burden of PCI DSS compliance, many headless implementations still direct customers to the SaaS-hosted checkout as well.

When you must customize the checkout experience, though, the tools are there. BigCommerce allows you to host your own checkout interface; the robust Checkout SDK is available for fast-tracking the critical functions you need, or you can even start with the open source native checkout interface itself. Just be aware that the merchant takes on some degree of responsibility for PCI compliance (though the burden can be mitigated to a large extent with secure hosted payment integrations).

Webhook Events

This is perhaps the “little brother” among its siblings in this list, but BigCommerce webhooks do represent a category of their own. Much of your custom dev work will utilize the APIs for operations initiated by your own apps, but sometimes it’s BigCommerce that needs to do the initiating. When you must rely on BC to notify your applications when certain things happen, that’s where webhooks come in.

There are a host of possible events for which you can register webhooks, from cart updates to order placement to customer registration to the installation of Single-Click Apps. You register a webhook using one of the BigCommerce APIs, so this topic technically represents a subset of that whole.  Yet the directional flow of data when events occur makes webhooks worthy to be considered their own category for learning.

Your Favorite Application Framework

This pillar might seem hokey, but I’ve emphasized before and will again: There’s really no such thing as “developing on BigCommerce” (Stencil themes aside). Nearly all the topics we’ve covered here are merely tools in your toolbelt; it’s up to your own application to make them do something together! And this is the real wide open ocean of your BigCommerce voyage; how you build your applications is entirely up to you!

Your path might not intersect with the need for a web application framework if you stick solely to theme-building with the native capabilities of Stencil. But for all other use cases, whether you’re tackling a headless storefront or building side apps to power custom features, you’ll have to decide on your toolset. 

I’m not here to tell you whether the best framework for your BigCommerce-powered applications is Next.js, Laravel, Django, Rails … But if you come from a background where your toolset was chosen for you and the freedom to pick your own is a little intimidating, just remember one thing: Choosing the “perfect” web framework isn’t nearly as important as just starting to write real code! So don’t overthink it, grab a framework that uses a language you know, and start making your BigCommerce store do something awesome!