By Rajendra Bhochalya
What are BigCommerce stencil themes, and why should you be using them for your online store?
Offering a user-friendly, robust, and flexible alternative to the previous “Blueprint” framework, BigCommerce stencil themes are transforming how developers and everyday business owners design sites with BigCommerce.
The Stencil theme engine, responsible for powering BigCommerce’s Cornerstone theme, offers more features and functionality than the previous engine. Plus, it helps to ensure your site is optimized for the search engines, boosting your ranking potential.
Here, I’ll share everything you need to know about BigCommerce Stencil themes, and why I think they’re a huge improvement over BluePrint themes.
Key Takeaways:
- Stencil themes are themes built with BigCommerce’s new theme engine, Stencil. These themes offer greater SEO, technical, security, and speed capabilities.
- The Stencil engine improves the development and design experience, offering access to a flexible code base, and an intuitive Page Builder for merchants.
- Stencil’s theme framework offers almost 160 variations, compared to the 58 variations available through the BluePrint theme.
- The Stencil theme engine also powers BigCommerce’s Cornerstone theme, which can be used by developers to create industry-specific theme designs at speed.
What are BigCommerce Stencil Themes?
Stencil themes are themes created with “Stencil”, BigCommerce’s latest theme engine. This engine incorporates industry best practices in design standards, technology, and search engine optimization (SEO), allowing developers and business leaders to build attractive, interactive storefronts.
Stencil themes are supported by most desktop and mobile browsers, and the Stencil framework even forms the foundation of Cornerstone, the building-block theme provided by BigCommerce to developers who want to rapidly create new templates for the platform.
Aside from being packed with new features and functionality, the Stencil theme engine also gives merchants access to an intuitive “Page Builder”, which allows them to customize the look and feel of a storefront without coding.
For instance, you can rapidly adjust a theme’s colors, banners, footer, headings, typography, and more, without technical knowledge.
Stencil vs BluePrint: What’s the Difference?
The BigCommerce Stencil theme framework is intended to replace the legacy engine “BluePrint”, used by BigCommerce developers in the past. Although this framework was relatively popular, it was built on a rigid, proprietary codebase. This made it harder for developers to make granular changes to a theme’s functionality and appearance.
Stencil themes, on the other hand, are built using open-source, non-proprietary code, which reduces the learning curve for developers. Additionally, Stencil themes give developers and business leaders more of the tools they need to improve the storefront experience for customers.
BigCommerce has made significant efforts to improve speed, security, and performance for Stencil themes, which is why countless developers are switching away from the legacy system.
The Core Features of BigCommerce Stencil Themes
Compared to the BluePrint theme engine, I believe the BigCommerce’s Stencil theme framework is a huge step forward for both merchants and developers alike. Here are some of the most impressive features you can access by switching to Stencil.
Real-Time Data Synchronization
Keeping your theme’s data and content up-to-date across all devices is crucial to offering users a consistent experience on your store.
BigCommerce Stencil themes update in real-time across all devices, ensuring users access the latest data. This enhances the shopping experience, and minimizes the risk of discrepancies as customers move between devices.
Developer-Friendly Components
Unlike the rigid BluePrint engine, the Stencil theme framework is open-source, helping developers to make seamless updates, and adapt their theme with ease.
You can verify codes without affecting your live, cloud-based environments. You can also test, update, and view the storefront locally, giving you a risk-free and efficient way to work on storefronts.
Google AMP Support
Although many themes built with BluePrint were mobile responsive, the Stencil theme framework is more focused on responsivity. They’re already equipped with Google Accelerated Mobile Pages (AMP) functionality, allowing for streamlined mobile web browsing and reduced page loading times.
This significantly improves the shopping experience for customers. In fact, BigCommerce found that AMP-enabled pages even increase click-through rates by around 20%.
Automated Image Optimization
Personally, I’d never buy anything from a company with poor images on its ecommerce site. Everyone wants great product images to help them visualize what they’re buying.
The introduction of Akamai Image Manager into the Stencil theme framework means your store can automatically resize images based on the device, boosting loading times by up to 70%. This ensures you can provide all the visual content customers need to make purchasing decisions.
Improved User Experience and SEO
According to BigCommerce, Stencil themes perform well on the Lighthouse performance scale, with a score of 90 for desktops, and 74 for mobile devices.
This indicates you can deliver a better user experience with Stencil themes. These themes also support rich snippets, which help you stand out on the search engine result pages, and ensure search engines can understand your page content.
Simple Customization
BigCommerce Stencil themes are designed to be easily customizable, even if you don’t have a lot of coding knowledge. Merchants can use the Page Builder tool to adjust various aspects of their website, based on the needs of their target audience.
You can even localize pages for specific customers, based on their location, adjusting language and currencies.
Read more:
What Can You Do with BigCommerce Stencil Themes?
BigCommerce Stencil themes deliver excellent experiences for both developers, like me, and non-developers (merchants and business owners). Here’s a quick look at what both groups can do with the new theme engine.
Non-Developers
Non-developers, such as business owners and merchants, can access various straightforward customization options that allow them to enhance their storefront without coding. The Page Builder allows for modifications to fonts, colors, layouts, and even the number of featured products on a page.
With a drag-and-drop interface, users can add text blocks, carousels, banners, and images to their pages, alter the default layout to match their brand identity, and more. There’s no need to hire a developer to make granular changes to the theme’s appearance and features.
Developers
For web developers, the BigCommerce Stencil theme engine introduces countless customization options. You can access underlying theme code through a browser, to make adjustments and integrate specific apps into an ecosystem.
Developers can even use the Handlebars templating language to create dynamic content for a storefront, allowing for more personalized customer experiences.
Plus, the Stencil CLI tool offered by BigCommerce gives developers holistic access to all theme files. Although you will need a knowledge of HTML, JavaScript, and CSS, you’ll be able to make specific changes to themes without restrictions.
Getting Started with BigCommerce Stencil Themes
Ultimately, BigCommerce Stencil themes are efficient, fast, and SEO-friendly themes, ideal for the modern ecommerce landscape. The Stencil framework improves experiences in BigCommerce for merchants and developers, and allows them to create better customer experiences too.
You can learn more about how Stencil themes work, and what you can do with them as a developer or merchant on the BigCommerce help center. Or developers can check out the Developer website for BigCommerce, for more documentation.
