If you’re on BigCommerce, chances are you’ve heard about Stencil, BigCommerce’s new approach to theme and front-end development.
eBook
BigCommerce vs Shopify: Everything You Need to Know
Here at Groove, we’ve had the opportunity to work with Stencil on a few websites, and our development team can’t say enough about it. Here are 5 reasons you and your developers will appreciate making the switch.
Reasons to Switch to BigCommerce Stencil
1) Handlebar Language Equals Greater Flexibility
Gone are the days of the “dreaded global variable.” A global variable is a block of code typically found within a product page or email that cannot be changed or manipulated. If you’ve experienced this roadblock, you understand how frustrating it is to hit a dead end when you’re expecting to be able to make a change.
Stencil has done away with the global variable and uses handlebar templating language, which means your developers can manipulate the data any way they need to. This gives you the freedom and flexibility to make changes wherever necessary.
As Chris Cherupil, our Senior Web Developer, puts it: “Writing the styling for the website is much easier because you can write less code and reuse variables."
2) Local Development Equals Faster Turnaround
Local development means faster development time (a.k.a., your site is up and running sooner)! It also means that changes made to a dummy site do not affect your live site. This is important. Imagine making a code error and having your customers experience it in real time.
With Stencil, developers are able to make changes to a dummy site using current data. They can then share a preview of those changes with a client or the business by sharing an IP address prior to pushing the updates live.
“It’s really nice to be able to use live data in development,” says Groove Senior Web Developer, McKeever Conwell. “This makes the development process more streamlined and lowers the risk of errors."
Modern Standards Equal Faster Load Times>
We all know that site speed is crucial to success. According to our data, even a 1 second delay in page load time can cause as much as a 7% decrease in conversion rate.
Stencil does a good job of using modern standards to speed up a web page. In fact, using the default sample images, Stencil’s master theme, Cornerstone, gets a Google Page Speed score of 89 on desktop. This is well above the excellent mark of 85!
4) Browsersync Preview Equals Visibility
“One of the cooler features of Stencil is the ability to view your changes in real time on all devices,” notes Chris.
Go ahead: line up a desktop, phone, and tablet side by side. As the developer makes changes, you will see those changes reflected on each of the devices. This helps eliminate the risk of making changes to desktop that negatively affect mobile, or vice versa. It also improves development efficiencies, which business and developer alike can appreciate.
5) YAML Formatted Front Matter Equals Efficiency
What you don’t need to know is what, exactly, “YAML formatting” means. What you do need to know is that it is a modern javascript language that makes your site more efficient. One way it does this is through its features related to collections of data, such as segments of your product catalog (featured, best selling, etc).
Let’s say you wanted to load a portion of the catalog grid: 10 items out of a collection of 500. In Blueprint, you would have had to load the entire catalog, but hide what you didn’t want the user to see. Because the whole catalog was still loaded, this would slow down your page.
With Stencil, you can show a portion of the catalog grid without slowing down the page. The library is built to work with the data in a format that is easier to organize and move around, making your development team and your website run more efficiently.
The overarching theme of Stencil is modernization, and that’s ultra important to your development team, which makes it super important to you.
