BigCommerce Stencil
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
| Name | Description |
|---|---|
BIGCOMMERCE_STENCIL_ACCESS_TOKEN | The BigCommerce access token used for deploying the Stencil theme via the API. |
Variables
| Name | Description |
|---|---|
BIGCOMMERCE_STENCIL_STORE_URL | Your BigCommerce store URL. |
CONSTRUCTOR_API_KEY | The key for your Constructor index. |
CONSTRUCTOR_BEACON_BUNDLE_NAME | The bundle name for your Constructor beacon. |
Updated 2 months ago