If you are familiar with the ecommerce agency BigCommerce, then you might already know about BigCommerce Stencil Theme development. BigCommerce has implemented a new approach viz. Stencil Framework, with the help of which, developers can create custom interfaces.
What is Stencil?
Stencil is one of the next generation ecommerce solutions of BigCommerce, which works as a cosmetic tool for the users and allows them to customize their store’s appearance without much coding. Users can easily install code files on the local server, make customizations as per their requirements and later publish them onto live website. All of this can be done by synchronizing BigCommerce database with your local server.
BigCommerce Stencil Theme Development
Stencil Theme Ecommerce development requires following key components:
- BigCommerce merchant account
- Linux or Windows local server
- Stencil CLI
With BigCommerce Stencil themes, developers can access all the advantages of a hosted platform via a reusable template called ‘Cornerstone’. It is a platform which developers can use to build their custom template and then publish it as BigCommerce’s custom interface.
This way, developers save a lot of time, as Cornerstone theme comes all-included with various elements of an ecommerce template.
Installation of Stencil CLI (Command Line Interface)Users can install Cornerstone theme on their local server with the help of Stencil CLI program. Once installed, users can easily get access to the theme files, make customizations, package the custom template and publish it onto BigCommerce’s live merchant account.
For this entire setup, Stencil CLI makes use of NodeJS.
Step 1:
Download the Cornerstone theme from BigCommerce and place it in the ‘www’ or ‘.htdocs’ folder (depending on your local server client) on your device.
Step 2:
Once downloaded, open the program and run it with following command:
npm install -g @bigcommerce/stencil-cli
Just as you run this command, the Cornerstone theme installation will begin.
Once done, you will be asked URL of your ecommerce store’s homepage, username and API account details of your BigCommerce store and the port on which you wish to run this server.
As you provide these details, a secure connection will be created for your custom theme development with Stencil CLI.
Initiate stencil and active the connection.
Step 3:
Whenever you want to work on your custom template, pass following commands in the terminal:
stencil init
stencil start
This will initiate Stencil CLI and allow you to edit Cornerstone theme on your local server.
Step 4:
Define custom templates to be created in Cornerstone directory such as Category, Brands, Product and Content pages.
Step 5:
Now, with the help of Handlebars, users need to define blank HTML files and folders.
Once you define the folders and files, then map the pages you want to create to specific URL in the .stencil file of your cornerstone theme’s version. All of this can be done via above template.
Step 6:
Since all required template files are mapped to specific URLs, you can easily customize your version and it will be reflected on these URLs.
Step 7:
Once all the customizations are done, you can publish the custom template onto live website.
This is to be done by:
- Creating a theme bundle to compile your theme as a zip file: stencil bundle.
- This theme bundle is pushed to live website in the form of a theme package: stencil push.
Wrap Up:
Setting up BigCommerce Stencil Theme allows you to reap maximum benefits out of BigCommerce’s capabilities. It saves a lot of valuable time of developers, as it demands minimal coding. Hope this quick guide helped you with the setup of BigCommerce Stencil theme development.