Stencil and You: Leveraging the Built-In Power of BigCommerce for Design and Analytics

One of the primary advantages of using BigCommerce is the front end that is built upon Stencil, a flexible and powerful framework that continues to improve. It lets developers build sites that match the wildest creativity of a designer and empowers storeowners to take charge of their data. In this article, we’ll take a brief look at what Stencil is, and more importantly, why you should care!

How BigCommerce works

As a former educator, I know the importance of reviewing the basics, even for advanced students. So let’s go over some of the foundational ideas behind BigCommerce as a platform and how developers think about a website. Your BigCommerce site is made up of two major components, the back end and the front end. The back end is where you manage orders and customer data, add and modify products. This experience will be the same for all BigCommerce storeowners, and requires outside applications and custom programming to extend and add new functionality. The front end is how you engage your customers and build an experience with your brand. On BigCommerce, the front end is coded in HTML, CSS, and JavaScript built on one of two frameworks, Blueprint and Stencil.

Before we get into the nitty gritty, it’s worth laying out two important terms: hard-coded and dynamic. Hard-coded describes when something is coded with all of the same conditions and will always have the same result. It’s a manual process and when you want variation, you need to create different versions of everything. To use a simple math analogy, hard-coding is like the statement 2 + 3 = 5, you put two and three together and you will always get five. Dynamic describes when something is coded using variables to generate a different result depending on the values for those variables. For a developer, this means the process becomes automated: you create one version or template, and then parse out the data. To continue our math analogy, dynamic is similar to a2 + b2 = c, where the formula is always the same, but the results are different depending on your input.

Blueprint is the legacy BigCommerce framework, what powered the front end of older sites and is still behind some functional pieces of all sites such as transactional emails, one-page checkout, and developer checkout. Blueprint themes can only be live edited, which means that there was no staging environment or local testing available before the theme went to production. The page structure was formed around Snippets and Panels, two smaller portions of code that would be combined to form a single page. You can easily recognize Blueprint themes from their variable structure, featuring %% around the field, like %%GLOBAL_ProductSku%%. Its base theme was Classic Next.

Stencil is the new and current BigCommerce framework. On a Stencil theme like Cornerstone, the current base theme, it powers the homepage, content pages, product details and category pages, search, and the Optimized One Page Checkout. Developers are able to work on the themes locally, meaning they can prepare and design in a safe environment before launching. It uses a special language known as Handlebars to govern logic statements, and is easily recognized by its variables featuring curly brackets – or, if you turn your head, handlebars – {{product.sku}}.

Pitting them head to head, we can see the differences clearly. Stencil is intelligible to the moderate-level user and uses more dynamic development, while Blueprint has more hard-coding and static development. While Stencil can use Handlebars, manual logic statements must be used for Blueprint. Stencil also has more variables available on each page, which means increased possibilities for both design and analytics, while Blueprint has significant limitations on those variables.

So what?

Stencil’s advantages mean greater flexibility – you can have front end designs that reflect your store and your brand, not just a template. There is also flexibility in adding new features. BigCommerce’s primary benefit is that it is a SaaS solution, and to take advantage of that, you will want to roll in new features and functionality as quickly and efficiently as possible.

Stencil also means quicker production time. Being able to use local development means that there is faster development and the ability to test and preview before going live, which will reduce costs. You should be spending your money on your business, not on fixing bugs.

Related to this is the fact that Stencil allows easier manipulation of elements. Instead of dozens upon dozens of hard-coded snippets and panels with complex JavaScript, you can use Handlebars to iterate and simplify. To the average storeowner, this might not seem as important, but to a developer, this is hours of work (and money) immediately saved.

Stencil exposes a vast amount of data, which means you can learn what your customers are doing and seeing, allowing you to increase your conversions by focusing on what is important and avoiding what is not.

The best part is that it keeps improving! The Stencil framework is constantly updated and new features keep rolling out. With exciting new tools like the Script Manager rolling out all the time, the possibilities for your site keep expanding.

What is Script Manager?

Script Manager is a tool that came out a little earlier this year that might not seem very flashy, but offers incredible new functionality. Previously, if you wanted to use something very common like Google Analytics, you faced a number of limitations. There was no way to have a script tag fire on every page, as order confirmation and checkout were always separated from the rest of the theme. If you needed something universal, you used the “Google Analytics” box within your Advanced Settings. But here you were stuck with only a handful of variables and if you needed more, you were out of luck.

Script Manager changed all of that. It allows you to inject JavaScript onto specific page types, in either the header or footer, at the click of a button. You can separate Store Pages (i.e., homepage, PDP, category) or designate the checkout, order confirmation, or the entire site! Just as important, you have full access to Stencil objects. Script Manager then becomes a gateway to Google Analytics Enhanced Ecommerce, Google Tag Manger, or other outside analytics or tag management software, as everything that is available within your theme is now available to these third party systems!

More Data

Ultimately, Stencil means more data, with greater, easier access. Implementation partners such as Americaneagle.com, third party applications, and store owners themselves can harness this information to do much more to improve the customer experience as well as provide important data to improve your store’s performance! With Stencil, your website can grow as rapidly as your business.

Contact Us Today!

About the Author

Michael Vasta

Michael
Vasta