BigCommerce Blueprint to Stencil: A Guide for Store Owners

You’re an ecommerce veteran. Your BigCommerce store has been operating for years. Unfortunately it has been years since you’ve changed your theme or redesigned your store. Does this matter? Your store has finally reached the point where your growth may be limited because you can’t include all of BigCommerce’s latest features and some apps you’d like to use are incompatible with Blueprint. It is time for a change.

It is time to change your theme from the old BigCommerce Blueprint to Stencil, the newer framework for design. This guide will walk you through everything you need to know about transitioning from Blueprint to Stencil, ensuring your store remains competitive and user-friendly.

What is BigCommerce Blueprint?

The BigCommerce Blueprint is the original theme framework that BigCommerce offered to create themes for their stores. It provided a robust foundation for building and customizing BigCommerce websites, allowing store owners to create unique shopping experiences. In later years, all Blueprint themes had either a mobile option or were responsive to fit all screens. However, some Blueprint themes offer a poor mobile experience.

Advantages of using Blueprint

Blueprint was known for its simplicity and ease of use. It allowed for straightforward theme development and customization, making it accessible even to those with limited technical skills. However, as the e-commerce landscape evolved, so did the need for more advanced features and capabilities. It also produced fast storefronts.

The transition to Stencil

What is Stencil?

Initially offered in 2016, Stencil is BigCommerce’s current theming engine. It has been designed for greater flexibility and improved performance. Stencil leverages modern web development technologies to deliver a superior user experience and allow you to create nearly any front-end experience you want to offer. You have even more control than with Blueprint.

Why BigCommerce moved from Blueprint to Stencil

The move to Stencil was driven by the need for a more powerful and versatile theming framework. Stencil addresses many of the limitations of Blueprint, providing store owners with the tools they need to create fast, responsive, and highly customizable websites. It also now includes the Pagebuilder feature which allows store owners to further customize any theme without hiring a programmer.

As a firm that builds custom BigCommerce sites, we use Pagebuilder to make a custom site, even more user-friendly. Store owners can change images and other blocks of content quickly without hiring a coder. Think “custom” site but with the ease of change of an out-of-the-box theme.

Key features of Stencil

Modern Front-end Framework – Stencil uses the latest web development standards, including Handlebars.js and YAML, to create dynamic and engaging storefronts. Stencil uses common programming languages, like Javascript, and HTML, making it easier to find good developers. Competitors often use a proprietary language that requires specially trained programmers.

Improved Performance – Stencil websites load faster and perform better, enhancing the overall shopping experience for customers.

Enhanced Customization Options – Stencil offers a wide range of customization options, allowing store owners to tailor their websites to their specific needs and branding.

Benefits of migrating from Blueprint to Stencil

Better User Experience – Stencil’s modern framework ensures that your store looks and functions beautifully on all devices, providing a seamless shopping experience.

Mobile Responsiveness – Stencil is designed with mobile users in mind, ensuring that your store is fully responsive and optimized for smartphones and tablets. Blueprint themes often had a separate M. site which is less than optimal for user experience.

SEO Advantages – Stencil’s clean code and improved performance can improve search engine rankings, helping you attract more organic traffic.
More Plug-ins – Stencil is compatible with all plug-in apps in the current marketplace and many more that may not be listed. In some cases the feature can now be built in directly, saving the cost of a plug-in.

The migration process can be challenging

Common Migration Issues

Migrating from Blueprint to Stencil can present challenges, including data loss, SEO issues, broken functionalities, and design inconsistencies. It’s essential to be aware of these potential issues to prepare adequately.

The product catalog system has changed. All Blueprint stores are on what is known as “V2.” The admin layout is different and V2 requires option sets to manage variants. Migrating from V2 to V3 is not seamless; significant care must be taken to prepare your catalog for the newer system.

Proper planning and thorough testing are crucial to overcoming migration challenges. Utilize BigCommerce’s resources and consider hiring a consultant to ensure a smooth transition. Good preparation will prevent big problems.

Hiring a BigCommerce Consultant

A BigCommerce consultant is an expert in BigCommerce platforms, specializing in migrations, customizations, and optimizations to enhance your online store’s performance.

Benefits of Hiring a Consultant

Hiring a consultant can save you time and ensure your migration is handled professionally. They can provide valuable insights and recommendations tailored to your business needs.

Finding the Right Consultant

Look for consultants with a proven track record, positive client reviews, and expertise in BigCommerce. Platforms like LinkedIn, Facebook, and BigCommerce’s partner directory are good places to start.

Step-by-Step Guide to Migration

Pre-Migration Preparation – Begin by auditing your current store to identify essential data and customizations. Plan your migration strategy carefully to minimize disruptions. This will also design metrics and KPIs you can later use to gauge the value of your theme change. This step can also suggest changes that will increase your conversion rate and revenue.
Data Backup and Security – Ensure all your data is backed up securely before starting the migration. This step is crucial to prevent data loss and maintain business continuity. Some tools do a better job of this including StagingPro (very, very worth having for more than just migrations and backups), or Rewind (just backups).

Theme Customization

Customize your new Stencil theme to match your brand’s look and feel. Take advantage of Stencil’s advanced customization options to enhance your store’s appearance and functionality. You’ll love the new Page Builder feature that makes it super easy to create editable fields throughout your website without requiring a developer.

One difference with Stencil is that development can occur offline via the development platform Stencil CLI. Some changes must be done offline via the development environment. This means less disruption to your live site but also can mean that you do need a developer to make some customizations, especially custom scripts.

Testing and Quality Assurance

Stencil themes can be previewed through your store’s admin panel so you can review changes before making them visible. However, this preview feature uses currently live content so some changes may not be visible in the preview.

This is one of the primary reasons StagingPro is so beneficial. It creates a full staging or “preview” environment for more thorough testing before relaunch. Actual testing of the features and functions new to your site really is a “must-have.”

Thoroughly test your new Stencil store to identify and fix any issues before going live. This step ensures that your store functions correctly and provides a smooth user experience.

Going Live

Once you’re confident in your new store’s functionality, it’s time to go live. Monitor your store closely after the migration to address any post-launch issues promptly.

Customization Tips for Stencil

Using Handlebars.js – Stencil uses Handlebars.js for template rendering, allowing you to create dynamic and interactive storefronts. Learn the basics of Handlebars.js to make the most of this feature.
Leveraging Front-Matter – Stencil’s front-matter syntax enables you to define variables and configurations for your templates. This feature simplifies customization and enhances template management.
Custom Widgets and Snippets – Create custom widgets and snippets to add unique functionality to your store. These reusable components can save time and improve consistency across your site. Your custom widgets can be used in conjunction with the Page Builder.
Maximize the use of Page Builder – While this may seem counter-intuitive if you pay an ecommerce agency to build your new site, the use of widgets via the Page Builder allows you, the store owner or manager, to make easy changes without a developer.

Tools and Resources

Recommended Tools for Migration – Utilize tools like BigCommerce’s Migration Tool and third-party applications such as Rewind or Staging Pro to streamline your migration process.

BigCommerce Resources and Support – Take advantage of BigCommerce’s extensive resources, including documentation, forums, and customer support, to assist you during the migration.

Frequently Asked Questions

Common questions about stencil

What are the main differences between Blueprint and Stencil?
– The programming framework is different. Blueprint is obsolete.
How long does it take to migrate to Stencil?
– This depends on your existing store. It may be as simple and fast as applying a new theme. Conversely, the change marks a great time to see if your site is built to best practices for conversions. Use data that you already have about your shoppers to gauge what features your store needs.
Do I need coding skills to use Stencil?
– Technically, no you do not. If you stick to the Page Builder for changes then no coding is required. However, most stores will be considerably faster if custom-built so that excess features and code don’t slow your site down. You may also want custom features to best suit your market.
Hiring an experienced firm can also result in a faster website as the extras included in most paid themes can be excluded if not needed. The very code that makes a paid theme versatile does mean it will include features, fonts, and scripts you don’t need and can slow your site.

Addressing Migration Concerns

Will my SEO rankings be affected during migration?
– They may. This is one reason an audit before making changes is in order. You can prepare in advance to minimize any SEO disruption.
How can I ensure a smooth transition without downtime?
– Truthfully, use Staging Pro. It’s the best way to fully test your new design before launch.
What should I do if I encounter issues during migration?
– Your entire development team should be on hand so you can handle issues immediately.

Future of BigCommerce customization

Upcoming features and updates – Stay informed about upcoming features and updates for Stencil to keep your store ahead of the competition.
New features are often only available on Stencil – you’re missing out on conversion-improving changes if you’re still on the old framework.
Staying ahead with continuous improvement – Continuously improve your store by leveraging new features and staying up-to-date with best practices in e-commerce customization.
Update your theme every year or two – The core themes used to create Stencil themes are updated regularly. If you fail to keep up, you may miss important features. Additionally, older theme versions are often incompatible with the tools required for a proper update. Staying current prevents a host of problems. While you do NOT need to do every update, you will want to do this every couple of years or you may lose the ability to use newer features.

Conclusion

If you’re still on Blueprint, your store is behind the 8 ball. It’s time to make the jump. Migrating from Blueprint to Stencil is a significant step toward enhancing your BigCommerce store.