The BigCommerce Stencil framework allows you to easily create and customize your own storefront with BigCommerce. You can customize the themes, templates, and styles to create a unique brand experience for your customers.

Constructor provides a joint integration with Stencil, powering their default theme, Cornerstone. It provides:

• Automatic Beacon integration
• Category page powered by Constructor's Browse API
• Search results page powered by Constructor's Search API
• Quick search powered by Constructor's Autocomplete API
• Homepage and Product page recommendations powered by Constructor's Recommendations API

Prerequisites

Before you can start using this integration, there are a some things that you need. These include:

• A BigCommerce store
• A Constructor account
• Node.js >= v18
• Stencil CLI

Getting access

Before starting the actual integration, you'll need to obtain access to the Constructor Cornerstone repository. Get in contact with us at [email protected] to get access.

Initializing the project

Once you have access to the repository, it's easy to get started with your project.

Clone the repository

git clone LINK_TO_THE_REPOSITORY example-project-name

Navigate into project directory

cd example-project-name

Install dependencies

npm install

Configure environment variables

Copy the sample .env file using the command below, then fill in the values for each environment variable.

cp .env-example .env

Initialize Stencil

Run the Stencil command-line init command as shown below, then follow the prompts to configure your Stencil project.

stencil init

Run project

stencil start

Once the project has started up, your new website should be accessible at http://localhost:3000

Deploying your integration

Other than the features mentioned preceding, this integration also provides CI actions to run your unit tests, linter, and also deploy your changes to BigCommerce.

The deployment workflow automatically triggers on each push into the master branch and automates the process of deploying your theme to BigCommerce.

To make use of this workflow, all you need to do is configure the following GitHub Action secrets/variables:

Secrets

Variables