Preparing to Integrate the Extend App

Overview

This page will go over the following steps:

  • Creating a Stencil CLI Token and Installing Stencil CLI
  • Downloading and running your theme locally
  • Injecting the Extend SDK, Extend BigCommerce SDK, and some essential files that will be used throughout the integration.
Est. Time of Completion: 30 minutes


Configuration

Creating a Stencil CLI Token & Installing Stencil CLI

NOTE: Keep your Stencil CLI token safe. Anyone with the token will have full publish access to your site.

  1. Go to the BigCommerce dashboard and click on Settings

  2. Scroll to the bottom of settings and choose API accounts

  3. In the top right click Create API account

  4. Set the Token Type to Stencil CLI token and name it 'Extend Integration'

  5. For the 'Stencil-CLI access level' choose publish theme

  6. Click the Save button on the bottom right

  7. Copy the command under Terminal Quick Start and save it for later use

  8. Install the Stencil CLI tool on your machine. The Stencil CLI docs have different steps depending on your machine. Be sure to follow the steps listed that pertain to your operating system.

    1. Note: the latest version of Stencil CLI requires Node.JS v14. For best practice, Stencil also recommends that you use NVM to use different versions of Node.JS

Downloading & Running Your Theme Locally

  1. Make a new folder on your computer
 mkdir my-bc-store-name
  1. Go inside the directory:
cd my-bc-store-name

  1. Open your Terminal and paste the command you copied from Terminal Quick Start and choose the port. This will initialize the project.

  1. In your terminal prompt, run stencil download and chose yes to overwrite local files. This will download your BigCommerce live theme to your computer so you can work on it locally without modifying the live site.
  1. Once the theme has been downloaded, runnpm install to install all of your theme's dependencies.
  1. After installing the npm packages, run stencil start If all the files were pulled down correctly, you will be able to see your site by going to this URL: http://localhost:3000

Great work! We are now ready to begin the Integration. If you run into any issues during this integration process or have questions please reach out to our team through your Merchant Portal.