(00:01)
All right, Stencil Local on BigCommerce. You’ve probably been hearing about it. If you’re watching this video, maybe you’re thinking about developing on BigCommerce, or maybe you’re trying to get it to work, and it’s just not working for you. You want to see what it actually looks like. Is it working?
I’m going to walk you through how it works in this video, and a little bit about the install, so you can see it in action and understand what Stencil Local Development is.
(00:34)
First of all, my name is Kal. I’m a developer, a store owner, and I run the ecommerce growth community for store owners just like you and me. If you find this video helpful, I post more ecommerce videos every week, so subscribe and hit the bell to see more content like this.
All right, let me share my screen, and we’re going to dig into it.
Setting up API Account
(01:12)
The first thing we need to do is create an API account. To do this, in your BigCommerce store, you must be logged in as the store owner—only the store owner can create an API account.
Go to Advanced Settings > API Accounts > Create API Account
Create a Stencil CLI token.
Name the account (I’ll call this one “Kal”) and click Publish if you want to push from local to live. If you don’t do this, you can still make changes live, but you’ll have to bundle, save it as a file, and manually upload it to the store.
(01:47)
Now it’s going to give us a couple of things. First, a text file, and second, a terminal quick start guide. I’ll copy this, but you can do the same stuff using the text file.
Download the Theme
(02:21)
Next, go to Storefront > Themes, and you need to download a copy of the theme. If the theme here is the base version, you can’t edit that, so make a copy and rename it something that makes sense (I’ll just use today’s date).
(03:00)
Once renamed, download the current theme to your computer. This will take a minute.
Terminal Setup
(03:41)
While that’s downloading, I’ve opened a terminal here on my Mac. If you’re on a PC, you’d open your folder.
Now, before we continue, check out the Stencil CLI installation instructions. You’ll find directions for Mac, Windows, and Linux.
Mac Users: If you’re on an M1 chip, follow the additional instructions to use the Rosetta terminal. It’s recommended to install Node 12.13.1, as newer versions may not work as well.
Starting Stencil CLI
(05:07)
Once you’ve followed those instructions, you’re ready to start. Open the folder where you downloaded the theme, and from the terminal:
Navigate to your theme folder.
Verify Stencil CLI installation by typing stencil. If it works, you’ll see a list of commands.
Type stencil init. It will ask for the URL of your store.
If you copied the command from the quick start, it should fill in the token and URL automatically.
Choose port 3000 for your local environment.
(06:48)
If you didn’t copy the quick start, run stencil init manually:
Enter your store’s public URL.
Copy and paste the access token from the downloaded text file when prompted.
Running the Theme Locally
(09:33)
Now that we have everything set up, type stencil start to begin the local server. If you get an error, you may need to run npm install first to install the necessary dependencies.
(11:11)
Once installed, type stencil start again. This will open your theme on localhost. If everything is set up correctly, you’ll see your local site running on port 3000. Your local theme is now connected to BigCommerce, pulling in product and category data from your live store.
Editing Code Locally
(13:06)
Let’s say you want to make a change to your header. For example, we’ll change the header background color to a light gray:
Open the theme files in your code editor (I’m using Visual Studio Code).
Modify the CSS file for the header.
Save the changes.
When you refresh the local site (command+R), you should see the updated style immediately. This local environment lets you code and see changes without affecting your live site.
Pushing Changes to Live
(17:09)
Once you’re satisfied with the changes in your local environment, you can push them live:
Stop the local server (ctrl+c in the terminal).
Run the command stencil push to bundle the theme and upload it to your store.
(18:21)
It’ll ask if you want to apply the new theme to your store. If you select yes, the new version will be live on your store immediately.
Best Practices & Final Notes
(22:04)
A good practice when pushing new versions is to date the theme, so you can easily roll back if needed. Open config.json, update the theme name, and then push again.
(23:49)
This is why developers use local development environments:
It lets you code and test changes without affecting the live store.
You can avoid issues like breaking your site while customers are browsing.
It’s faster and safer compared to coding directly in the live environment.
Conclusion
I hope this walkthrough was helpful! If you liked it, give me a like and subscribe for more ecommerce tips. If you get stuck on anything, leave a comment and let me know—I make videos weekly and would love to help you out!
