In October 2015 BigCommerce gave developers early access to their new theme platform, Stencil. Stencil is BigCommerce's new theme platform that incorporates the latest best practices in technology, design standards, conversion, and SEO. Since then, we've worked out how to maximise the capabilities of the platform, to customise existing themes and develop new ones. We're pleased to be the first "Stencil Ready" BigCommerce Partner in Europe [1
There are 'techy' reasons why we like Stencil, but also compelling reasons for store owners to upgrade from the old platform - Blueprint [2] - to Stencil.
Benefits of BigCommerce Stencil
Stencil offers developers:
- Local theme development (on our computers, rather than online)
- Development in languages and standards we know and love (e.g. Handelbars, Sass/SCSS, YAML)
- Browsersync to preview changes in real time across mobile, tablet, and desktop
"Stencil is a great example of how a theme engine should be. It's an absolute joy to develop on, making it easier for us to turn a client's vision into reality."
- Lead Developer @ Flair
"OK, but what can it do for me?"
5 Reasons to Upgrade from Blueprint to Stencil
If you want to improve the speed of your website, and make adding new features easier in the future, we recommend an upgrade to Stencil. Here are 5 reasons why:
- Fully Responsive
We regularly see 50% or more of traffic on our client's stores coming from mobile devices. Stencil showcases your products and services better on any device. - Faster Website
Page speed is vital for customer trust and conversion. Stencil uses modern standards to speed up web pages, and efficient code to only load needed data (rather than load everything and hide some of it in Blueprint). - Faster Development
With Stencil we can build and customise themes on our computers but use your product data and images etc., without disrupting your live store. You can see a preview of those changes before we make them live. This streamlines the whole process for a quicker launch. [3] - More Flexible
Logic-based templates allow us to manipulate store data to add features and customisations that were previously impossible. - Improved Storefront Editor & In-built Features
This enables you to customize, manage, and preview storefront attributes - colors, fonts, number of items displayed, etc. – with no coding.
"I'm convinced, how do I upgrade?"
How to Upgrade to a BigCommerce Stencil Based Theme
The Control Panel stays exactly the same, but the front end of your store changes. You have options...
- 'Reset' your theme
If your store doesn't have customisations you might be happy with an 'off the shelf' Stencil theme. You can get a Free or Premium theme from the Theme Marketplace in your Control Panel, or purchase a theme from a developer, like us, and upload that theme to your store. The Storefront Editor lets you make lots of changes, but if you need any further tweaks, just get in touch. - 'Refresh' your store with a new design
Choose a Redesign based on an existing theme, or a unique Bespoke Design tailored to your business, and we'll create a shiny new design to wow your customers. - 'Upgrade' your theme
Moving your current store design to Stencil is possible, but we can't just 'flick a switch'. Often our Theme Onboarding service is the least disruptive and most cost-effective option for your store. We can also quote for transferring designs or customisations from your existing store, contact us to find out more.
"I need more information, what's different in Stencil?"
Differences Between Stencil and Blueprint Themes
Here's some key differences:
| Feature | Stencil | Blueprint |
|---|---|---|
| Theme Features | ||
| All free and premium themes fully responsive | ✓ | ✗ |
| Display payment icons in footer | Easily configured in the Theme Editor. | Requires HTML/CSS customization. |
| Toggle 'Powered by BigCommerce' in footer | Easily configured in the Theme Editor. | Requires HTML/CSS customization. |
| "On Sale" Buttons on Products | ✓ | Only on Select Themes |
| Theme Configuration | ||
| Merchandising controls (listed below) saved per theme | ✓ | ✗ |
| — Number of featured products displayed on the home page | Easily configured in the Theme Editor. | Must be configured in Store Settings. |
| — Number of most popular products displayed on the home page | Easily configured in the Theme Editor. | Must be configured in Store Settings. |
| — Number of new products displayed on the home page | Easily configured in the Theme Editor. | Must be configured in Store Settings. |
| — Number of blog posts displayed on the home page | Easily configured in the Theme Editor. | Must be configured in Store Settings. |
| Cross-device preview (mobile, desktop, tablet) | ✓ | ✗ |
| Preview checkout while adjusting theme configuration | ✗ | ✓ |
| Checkout Experience | ||
| Add non-Google Analytics tracking codes to checkout page | ✓ | Requires HTML/CSS customization. |
| Support for multiple shipping addresses | ✗ | ✓ |
You can read more about moving from Blueprint to Stencil on the BigCommerce Developer Pages.
If you have any questions, or would just like to discuss further, we’re happy to help.
Endnotes
[1] We were the first "BigCommerce Certified" partner outside of North America, and the first "Preferred" Partner outside of the USA.
[2] According to BigCommerce: "Blueprint, [the] previous theme framework, was built on a rigid, proprietary codebase, making it difficult for developers to customize and extend theme functionality."
[3] With Blueprint we used to work on a live store, or a development store with 'dummy data', then transfered the designs to the live store. For you to see changes with your own data and assets (text and images), we had to work on the live store, or transfer your data to a development store, but this added time and cost to a project.