Getting Started With BigCommerce for Drupal

Acro Commerce’s own Chithra K has put together this handy, step-by-step guide to integrating your BigCommerce store with the Drupal CMS.

BigCommerce for Drupal setup guide

Step 1: Create a BigCommerce API account
Step 2: Download and configure the BigCommerce for Drupal module
Step 3: Sync products, variations and taxonomies from BigCommerce
Step 4: See the BigCommerce checkout in action

The BigCommerce for Drupal module, created by Acro Commerce 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 BigCommerce and Drupal together as an 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 front end and themeing. 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 embedded 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.

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 anyone 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.
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.
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 BigCommerce for Drupal connection made.

Step 1: Create a BigCommerce API account

Go to your BigCommerce store admin page and navigate to Advanced Settings > API Accounts.
Click on the “Create API Account” button and select “Create V3/V2 API Token”.

Fig: BigCommerce Store API Accounts page
Provide a name (i.e. Product Sync) and select the scope for each feature (i.e. if you don’t want the ability for the Drupal admin to modify the product information, you can set the scope for “Products” as “read-only”).

Fig: API configuration in BigCommerce
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 dialogue box

Step 2: Download and configure the BigCommerce for Drupal module

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
```
In Drupal, navigate to the 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
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 Drupa
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 BigCommerce, otherwise, the checkout form will not be loaded on your Drupal site.

You can also confirm the channel connection 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

In Drupal, navigate to the product synchronization page at Commerce > Configuration > BigCommerce > BigCommerce Product Synchronization.
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.
Alternatively, 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 is 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.
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

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 into 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 and 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
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 everyone to use.

I wanted to share some additional notes from when writing this guide.

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 on 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 Commerce is a BigCommerce Agency Partner

Acro Commerce is the development team that partnered with BigCommerce to make the BigCommerce for Drupal module a reality. We have many, many years of ecommerce consulting and development experience available to support your team, too.

We'd love to talk with you if you want to explore Drupal, BigCommerce, or both for your online store.

_{Editor’s note:}_{This article was originally published on December 2, 2019, and has been updated for freshness, accuracy and comprehensiveness.}