A Step-by-step guide to integrating your BigCommerce store with the Drupal CMS

The BigCommerce for Drupal module, created by Acro Media in partnership with BigCommerce, was released early this year and brings together two different platforms – BigCommerce, the open SaaS ecommerce platform, and Drupal, the open source content management system. The result provides a wonderful new way for retailers to implement an innovative and content rich headless ecommerce strategy. If you use one and would like to have the capabilities of the other, the BigCommerce for Drupal module is the bridge you need. With this module, you can use Drupal as the powerful front-end CMS with BigCommerce as the easy-to-use and scalable ecommerce backend.

This post is a step-by-step guide for people who want to know how to install the BigCommerce for Drupal module and get started with both platforms. If you just want to know more about the BigCommerce and Drupal together as ecommerce solution, check out this post instead.

How this module works

Here’s a quick overview of how this all works. The BigCommerce for Drupal module integrates BigCommerce and Drupal together, but each platform is still used for different tasks.

In BigCommerce, you configure products, categories, shipping, taxes and everything else for the ecommerce side of your site. BigCommerce is also where you go to manage orders as they come in.

Drupal is then used for the website frontend and theming. Product and category information from BigCommerce are synced to Drupal, importing them as Drupal Commerce products so that they can be displayed and used like any other Drupal-based content. Any non-commerce content is also managed within Drupal. When a customer goes to checkout, a BigCommerce checkout pane is embedding in the Drupal site to securely process payment and save customer and order information.

Setup BigCommerce and Drupal

On to the guide! Follow these steps and you’ll have your BigCommerce and Drupal store configured in no time!

Prerequisites

This guide already assumes that you have the following ready.

1. A BigCommerce account and store created
   You will need to create a BigCommerce account with at least one product, shipping method and payment method configured in your BigCommerce store. Do this here, not in Drupal.
   
   NOTE: BigCommerce currently offers a 14-day trial period, so any one can go and create and configure a store easily for free. For this demo, I signed up for that and created some random products to use for testing.
   
   
2. A working Drupal 8 site
   You should have a Drupal 8 site with the Commerce module enabled and a default store added (via Commerce > Configuration > Store > Stores). You don’t need to do any other setup here yet or enable any of the other Commerce modules like checkout or payment. BigCommerce is going to handle all of this for you.
   
   
3. An SSL certificate for your Drupal site
   Your Drupal website needs to have an SSL certificate active for the BigCommerce checkout form to render. This is required because it ensures security for your customers at checkout, so make sure you install one.

BigCommerce for Drupal setup guide

With the prerequisites done, here’s what you need to do to the the BigCommerce for Drupal connection made.

Step 1: Create a BigCommerce API account

1. Go to your BigCommerce store admin page and navigate to Advanced Settings > API Accounts.
   
   
2. Click on “Create API Account” button and select “Create V3/V2 API Token”.
   
   
   Fig: BigCommerce Store API Accounts page
   
   
3. Provide a name (i.e. Product Sync) and select the scope for each features (i.e. if you don’t want the ability for the Drupal admin to modify product information, you can set the scope for “Products” as “read-only”).
   
   
   Fig: API configuration in BigCommerce
   
   
4. Click “Save” to save your changes. Once saved, you will see a summary and a prompt to download a file. Download it and keep it safe. Once you create an API account, you can’t modify the keys (but you can always make a new one).
   
   
   Fig: BigCommerce API Credentials dialog box

Step 2: Download and configure the BigCommerce for Drupal module

1. Get and install the BigCommerce for Drupal module.
   
   TIP: This module requires a bunch of other modules to work. To get the BigCommerce for Drupal module and all of its dependencies at the same time it’s recommended to use Composer instead of manually downloading it. Running the following command within your Composer based Drupal project will get everything you need.
   
   

   composer require drupal/bigcommerce

2. In Drupal, navigate to module configuration page at Commerce > Configuration > BigCommerce > BigCommerce Settings.
   
   1. Fill in the API Path, Client ID, Secret Key, and Access Token that you received when creating the BigCommerce API.
      
      
   2. Hit “Save”. If everything is correct, you will see a message saying “Connected Successfully”.
      
      
      Fig: BigCommerce Configuration page in Drupal site
3. Next we configure the Channel Settings. This will create a storefront url for you in BigCommerce which will match the one that is generated on the Drupal side.
   
   
   1. Select “Add new channel” from the select channel list.
      
      
   2. Provide a channel name.
      
      
   3. Click the “Create new BigCommerce channel” button. You will then see a Site ID and Site URL on the setting page.
      
      
      Fig: BigCommerce configuration page in Drupal
4. Now in the same Channel Settings area, click on the “Update BigCommerce Site URL” button. This lets you confirm that the url generated is actually sent to the BigCommerce, otherwise the checkout form will not be loaded on your Drupal site.
   
   You can also confirm the channel connection in from within the BigCommerce admin dashboard by visiting the Channel Manager admin page.
   
   
   Fig: Channel Manager storefront confirmation in BigCommerce

Step 3 : Sync products, variations and taxonomies from BigCommerce

1. In Drupal, navigate to the product synchronization page at at Commerce > Configuration > BigCommerce > BigCommerce Product Synchronization.
   
2. Click the “Sync Products from BigCommerce” button and ta-da, all the products, variations, and categories will be synced to your Drupal site in an instant.
   
   Alternately, you can also synchronize via the following Drush command. Advanced Drupal users can use this command on cron to do automatic syncing.
   
   

   drush migrate:import --group bigcommerce

   
   Fig: Product Synchronization page
   
   
   Fig: Syncing from BigCommerce in progress
   
   NOTE: If you run into errors when syncing products, it probably because you don’t have a store added in the Drupal Commerce module yet. Add one at Commerce > Configuration > Store > Stores.
   
   TIP: Any time you make changes to the products in BigCommerce, visit this page or use the Drush command to synchronize the changes. Before syncing, you’ll also see a message telling you that updates are available.
   
   
3. Confirm the products have synced by visiting the Product page for Drupal Commerce at Commerce > Products. A list of all of the products brought in from BigCommerce will appear here.

Step 4 : See the BigCommerce checkout in action

1. Now that everything is set up, go to a product page, and it to your cart and proceed to checkout.
   
   If everything was done correctly, you will be able to see the BigCommerce checkout form embedded in to your Drupal site! Hurray! All of the shipping methods, payment methods, tax calculations, and other BigCommerce store configurations will be seen in the embedded form here.
   
   If you don’t see the checkout form make sure that your channels settings are correct that that you have an SSL certificate installed.
   
   
   Fig: Drupal’s checkout page with embedded BigCommerce checkout form
   
   
   Fig: Drupal’s checkout page after order complete
   
   
2. Once an order has been placed, the order information will be stored in Drupal (at Commerce > Orders) and will also be sent to BigCommerce (at Orders > View).
   
   
   Fig: BigCommerce backend View Orders page

Additional notes

The BigCommerce for Drupal module is ready for production and available for all to use. When writing this guide, there were some additional notes that I wanted to share.

• At this time, product management should always be handled within BigCommerce and then synced to Drupal. Currently there is no option to bring back a product if you delete it in the Drupal side, so be careful.
• A development roadmap for the module can be found here. It outlines future features and plans.
• If you use the module and find any bugs or want specific features, please add them to the module issue queue here.

Acro Media is a BigCommerce Elite Partner

Acro Media is the development team partnered with BigCommerce that made the BigCommerce for Drupal module a reality. We have many, many years of ecommerce consulting and development experience available to support your team too. If you’re interested in exploring Drupal, BigCommerce or both for your online store, we’d love to talk.