If you want to start your journey with BigCommerce, whether for development, testing, or customization, you’ll first need a developer sandbox. This allows you to experiment without affecting a live store.
In this guide, I’ll walk you through:
- Setting up a BigCommerce Developer Sandbox
- Installing and configuring Stencil CLI
- Setting up local theme development
Setup a BigCommerce Developer Sandbox
To start with your first BigCommerce website, you need to get a developer sandbox; simply fill out this form, and BigCommerce will create the sandbox for you.
Next, you’ll need to fill in this information, store name, first name, last name, email address, and phone number; all are required.
Once submitted, you’ll receive a confirmation email to confirm your BigCommerce account; once confirmed, you’ll be redirected to your store to create a password; after that, you can log in to your store.
BigCommerce Storefront build
In summary, there are to ways to setup your storefront with BigCommerce.
- Customized Stencil theme
- Headless with Catalyst framework
In this blog, I’ll be covering the Stencil theme setup. For more information on what Stencil is you can read more in BigCommerce documentation here.
To locally develop and customize any stencil theme with no impact on the live storefront during the development process, you’ll need to install and use Stencil CLI.
Installing Stencil CLI
Install dependencies using Chocolatey
- Open PowerShell as an administrator and run the following command
# Install Chocolatey
iex ((New-Object System.Net.WebClient).DownloadString("https://chocolatey.org/install.ps1"))- Install git if you don’t have it
choco install git- After that, install nvm windows
choco install nvm;- Close and reopen the PowerShell as an administrator so it can recognize the nvm command and run the following command
nvm install 20.16.0; nvm use 20.16.0- Finally, Install Stencil CLI
npm install -g @bigcommerce/stencil-cliTo install Stencil CLI on other operating systems, check out this link.
Setting the local development for Storefront
Now that you have installed Stencil CLI, setting up your local environment to connect a local theme with your storefront is the next step.
Create Stencil API Credentials
You’ll need an access token to your Store API in order to do the local setup.
- Start by going to your storefront’s settings page from the main menu
- Then scroll down to the API section and click Store-level API accounts.
- Now click on Create API account.
- In the Token type field, go ahead and chose “Stencil CLI token”
- Choose a name for the account and type it in the name field.
- Choose “local development only” for the Stencil-CLI access level.
- After that, Click Save
- BigCommerce will create an access token and download the information.
- Please save the data, since it’s the only copy you can access.
Downloading a theme
BigCommerce uses a theme called Cornerstone as the main building block, and it’s the default theme used in your storefront that was created when you created a BigCommerce account.
- Clone the Cornerstone theme from its GitHub repository
git clone https://github.com/bigcommerce/cornerstone.git- Then, install npm modules
npm install- After that, to start serving a live preview of your storefront, you need to create a ‘.stencil’ or ‘config.stencil.json’ configuration file. You can do that by running the following command, replace the url with your store url and access token with the token you obtained from the previous step.
stencil init --url https://yourstore.com/ --token store-access-token --port 3000- To serve a live, Browsersync enabled preview of the theme, run the following command
stencil start- If everything works correctly, you’ll have a local site that is synced with your live storefront
Open your browser and go to http://localhost:3000, you will see your storefront but this one is served directly from the local source code.
Wrapping up
Now that you have a fully functional local BigCommerce development setup using Stencil, you’re ready to start customizing your store to match your needs.
This guide provides a foundation for developing eCommerce sites with BigCommerce. From here, you can:
- Explore Stencil’s file structure & customization options
- Experiment with theme modifications & styling
- Dive deeper into BigCommerce APIs & integrations
Please share your thoughts or ask questions in the comments if you found this helpful. You can check my other blog posts if you like. Happy coding!
