Connecting to a BigCommerce instance

Owned by Michal Wojtas (Unlicensed)
Last updated: Nov 29, 2021 by Fabian Frei
5 min read

This page tells you how to configure the connection of a Styla front to a BigCommerce instance.
It also explains how product data is pulled by Styla from BigCommerce and what the data is used for in the Styla Frontend.

On this page:

Styla Frontend needs a source of product data to generate product and category pages and to handle purchase workflow. This source are the Management APIs provided by BigCommerce. Styla Frontend proxies the APIs and both pulls data from and pushes data to them.

In order to connect Styla Frontend to this API you will need to:

  1. create an API user for Styla in your BigCommerce backend and grant it all privileges needed,

  2. set the API user’s credentials in your Styla front settings (in the shop JSON node in FRONT CONFIGURATION).

Once these steps are completed (and page bases are set up), Styla Frontend will automatically generate category and product details pages.

Without the connection to the BigCommerce API, Styla will still be able to render pages you publish with the Editor but no product content will be delivered nor any shop functionalities work.

Creating API user in BigCommerce backend

You need to be logged in to BigCommerce with the shop owner account to go through the below steps. Lower privilege levels can’t access the “API Accounts“ tab nor manage the account’s domain.

  1. Enter the Advanced Settings > API Accounts tab in your BigCommerce backend.

  2. Click the blue Create API Account button top-left and then the Create V2/V3 API Token:

  3. On the resulting form with the API account settings, assign it the full rights scope and click Save bottom-right:

  4. In the last step you will be displayed the API credentials for the new user on an overlay and download a .txt file with the same credentials. Keep the file to fill in the credentials in Styla Admin (described below):

Setting up the API user’s credentials in Styla front configuration

Enter the credentials from the .txt file in the shop JSON node of the FRONT CONFIGURATION, as shown below:

Instructions on the specific fields below:

type - enter bigcommerce for accounts using the BigCommerce API

domain - enter your Styla front name

currency - enter your three-letter ISO currency symbol

client_id - enter the 10-character account hash present in your original BigCommerce shop URL

token - enter the ACCESS TOKEN from the .txt file

store_url - enter the original BigCommerce shop URL (the URL your BigCommerce backend runs on)

client_id - enter the CLIENT ID from the .txt file

client_secret - enter the CLIENT SECRET from the .txt file

channel_id - this field will be updated by Styla once you fill in all the other credentials. Without it the checkout process won’t work but rendering of product details and category pages will work already.

One more thing you will need for the checkout process to work is having your BigCommerce shop open. As long it is preview mode, neither checkout nor account creation will work.

Price-specific settings:

You can customise your price template and price using the entries in the shop_settings node as well. You will only need this if you check how prices are displayed and decide the default settings are not good enough. The general Styla’s approach to displaying data from the BigCommerce API is to display exactly what is set up in the BigCommerce backend.

Reindexing:

Once you have filled in all the credentials above, click the REINDEX button bottom of the FRONT CONFIGURATION page. This will make Styla fetch all the product data.

From this moment on any update done in your BigCommerce backend will be automatically taken over by Styla. You will only need to click the REIDEX button again if you switch to a different BigCommerce API user.

Subdomain for your BigCommerce:

Your purchase flow will only work without third-party cookies only if your BigCommerce runs on a subdomain of your main domain the Styla Frontend will use. So if your Styla Frontend will run on mydomain.com do the following:

  1. Create a checkout subdomain ie: checkout.mydomain.com in the web panel you manage your domains/DNS settings with.

  2. Enter this subdomain as the one your BigCommerce is displayed. You do this by entering https://manage.bigcommerce.com/ and then clicking on the store’s name and then clicking the Manage Domain link in the Details tab.

  3. Point the newly-created subdomain to your BigCommerce, as instructed in the Manage Domain steps. You do this in the same web panel you manage your domains/DNS settings with.

  4. Create and install an SSL certificate for your new subdomain in your BigCommerce at https://manage.bigcommerce.com/ssl_certs

Alternatively (especially if you use your BigCommerce at the moment) go through these steps directly before the go-live of your Styla Frontend.

FOR TESTING ONLY: Store / Checkout not on a sub-domain:

To make the checkout work on a different domain (as long as your end users have enabled 3rd party cookies in their browsers, which is the default in Chrome, but not in Safari), you should be able to set up the iframe working for the external domain as well.

To avoid the error message “Refused to frame 'https://yourdomain' because an ancestor violates the following content security policy directive: “frame-ancestors https://yourdomain”. You need to enable the X-Frame-Options as follows:

  1. Log into the BigCommerce admin panel and go to Store Setup > Store Settings.

  2. On this page under Storefront you will find the X-Frame-Options header which needs to be activated. Set to Allow from url and set its value to the domain your Styla Frontend will run on, so https://mydomain.com .

Sample screenshot

 

BigCommerce fields triggering Styla updates

The following product data fields, when updated in BigCommerce, will trigger content updates on Styla Frontend: