Introducing the BigCommerce Channels Toolkit

Uwana Ikaiddi
BigCommerce Developer Blog
6 min readJun 30, 2020

--

BigCommerce’s Channel Manager enables merchants to discover, connect to, and manage their internal and external sales channels (ex. Amazon, Facebook, and Instagram). These external sales channels extend the control panel experience, including enabling merchants to manage orders from external channels alongside their BigCommerce storefront orders. This capability allows merchants to fulfill internal and external channel orders in the same way, without needing to manage multiple control panels for multiple channels.

With the Channels Toolkit, any BigCommerce partner can create and list a sales channel app on the App Marketplace for any merchant to install. Additionally, approved apps developed by select partners will be marketed and discoverable from directly within the Channel Manager in every store’s control panel.

Channels Toolkit Overview

The Channels Toolkit provides our partners with everything they need to build apps that enable merchants to manage selling products on BigCommerce and external platforms. The toolkit allows developers to create apps that provide functionality such as:

  • Listing products and running campaigns for multiple channels
  • Receiving and fulfilling BigCommerce and external channel orders
  • Repricing tools to help manage pricing across platforms

While 3rd-party developers always had the ability to build external channel integrations, the Channels Toolkit extends the functionalities available to developers, and as a result the possible features for merchants, by providing the following resources.

API Endpoints

The Channels & Listings API endpoints allow merchants to manage product data for specific sales channels and product listings, rather than only at the BigCommerce product catalog level. This includes overriding fields with different values, whether necessary for merchandising, external channel requirements, enabling a different language, or more. In addition, the Orders API is channel-aware, allowing orders to be associated with their corresponding channels by creating an order with a channel_id.

The endpoints also provide merchants with greater flexibility in creating differentiated shopping experiences, as they can track and analyze how their products are performing for each individual sales channel.

UI Components

Derived from our BigDesign library, these reusable components are built to be compatible with BigCommerce’s design guidelines and color palette, while being fully flexible, responsive, and accessible. The components enable you to create an app that looks and feels native to BigCommerce, which allows merchants to focus on scaling their businesses, and not on learning a new workflow every time they extend their offerings. BigDesign also enables you, as a technology partner, to launch your app more quickly, as it provides the building blocks and components needed to quickly create a great user experience.

Sample App Frameworks

Our sample app frameworks provide the basic scaffolding to get our partners started on their development quickly. This starter kit acts as a reference implementation for some of the API endpoints and UI components mentioned before.

Channel-Specific Catalog Management Capabilities

Previously, all functionality for creating and managing listings could only be supported within the app itself. BigCommerce now supports the ability for merchants to list and manage products from within the native BigCommerce control panel. This is possible thanks to our new API endpoints and how they integrate within the control panel.

This enhanced capability provides workflow improvements for merchants. It enables partners to build more robust and complex integrations for external channels, as they are able to retrieve any channel and listing data that is relevant to a specific sales channel.

Types of Channels

How you build your channel app will depend on what kind of channel you are building for and the functionality that is required or desired. At BigCommerce, we categorize channels into four main types:

1. Point of sale (POS).

A physical system used by merchants to process transactions, maintain their product catalog, track customers, and more.

Examples: Vend, Bindo, Springboard

2. Storefront.

A platform that enables merchants to power an online storefront outside of BigCommerce for selling their products. This is also used for internal BigCommerce storefronts.

Examples: WordPress, Drupal, Acquia

3. Marketplace.

A platform where merchants list their catalog and sell their products, with transactions processed by the marketplace platform.

Examples: Amazon, eBay, Facebook Marketplace

4. Marketing.

A platform that merchants use to communicate their brand and products with their shopper base, seeking to drive discovery and conversion. These channels do not support checkout directly.
Examples: Instagram, Pinterest, Google Shopping

While our current focus is on foundational and point-of-sale use, we will continue to roll out additional functionality for each type of sales channel.

Demo: Building a channel app

Channel apps can support multiple channels. This could be a better path for you, especially if your app already groups several sales channel platforms together in your app.

Let’s do a quick demo to illustrate what you can do with the Channels Toolkit. We’ll run through how you create a channel via the API through your app that appears in the BigCommerce store’s control panel.

1. Creating your app.

Because the Channels Toolkit is built to help BigCommerce partners, this demo assumes you’re familiar with our API environment and how to build apps on our platform. If this is your first time developing with us, check out these handy resources:

2. Creating a channel.

Once a merchant installs the app from within BigCommerce, it’ll redirect to your callback URL. At this time, you will need to create a channel so that it is registered to the merchant’s store. This will enable you to later pull catalog and listing data for that specific channel via the API and allow the merchant to list products to this channel from within the BigCommerce control panel.

To add a channel to a store, send a POST request to /stores/{{STORE_HASH}}/v3/channels:

POST https://api.bigcommerce.com/stores/{{STORE_HASH}}/v3/endpointX-Auth-Token: {{ACCESS_TOKEN}}X-Auth-Client: {{CLIENT_ID}}Content-Type: application/jsonAccept: application/json[{    "type": "type of channel",    "platform": "sales channel platform",    "name": "name of the sales channel",    "external_id": "",    "status": "connected”,    "app": {        "id": 123, // ID of the app        "sections": [{            "title": "Overview",            "query_path": "overview"            }, {            "title": "Settings",            "query_path": "settings"            }]        }}]

The app object enables you to build a deeply embedded app experience for merchants in a few ways. By providing the app id, it allows us to create a link to the channel app directly from the main screen within the Channel Manager where merchants manage all their sales channels.

The sections field then enables you to insert the navigation bar sections shown to merchants within the BigCommerce control panel navigation panel. When the merchant selects a section, BigCommerce passes the selected section to the app iframe URL as a parameter, like so:

https://<store_url>/manage/channel/2/app?id=5&sectino=overview

By using sections and hooking directly into BigCommerce’s navigation, you can create an even more deeply embedded and native feeling experience for merchants.

Note: The app field and its subfields id and sections are required for all partners building select apps, and highly recommended for all partners, due to the native experience it creates for merchants within the BigCommerce control panel.

Response:

{"id": 15001,
"type": "pos",
“platform”: “square”,
"name": "Square",
"external_id": "External-15001",
"app": {...},
"created_at": "2020-06-30T12:00:00Z",
"updated_at": "2020-06-30T12:30:00Z"
}

You’ll get an id for the channel back within the response, which will be used as the channel_id in future requests. Let’s assume the channel_id is 15001 within this demo.

After you create a channel, it will show up in the product list within the store control panel, and the merchant will be able to choose which products should be available on that channel. The orders section also updates to include a filter to show which orders came in from the channel.

The channel name displays as the human-readable name in the UI.

Channels show up in the BigCommerce control panel when you are listing to a channel or managing its orders.

Optionally, it can also house additional information we use to alter BigCommerce checkout redirects, so the shopper is redirected back to the channel that referred them, whether it be an external site or app.

Conclusion

We are excited to extend the functionality available to developers and the flexibility of our platform with the release of the Channels Toolkit. If you’re interested in creating sales channel apps, check out our Channels Toolkit overview for more information.

If you’re interested in becoming a partner, check out our Becoming a Partner page.

We can’t wait to see what you create!

--

--