Skip to main content
Blog BigCommerce

A Guide to BigCommerce Store Upgrade from Blueprint to Stencil

Hari Kumar MuthuKrishnan
August 20, 2020 |

Whenever you feel like your website needs an upgrade, it is perhaps already a little too late. All successful online stores keep up with their future goals and decide on their transformation processes accordingly. It can be due to the Google algorithm or simply because you want to become a social-first brand. In this article, we would particularly be covering the nuances of redesigning your BigCommerce store:

Redesign your BigCommerce store

  • Site designs and functionalities are Outdated
  • Store Revenue/Sales getting reduced
  • The store has a very bad user experience
  • Store having an older version of the framework
  • BigCommerce store design is not exactly up to the mark

If anyone of the above reasons falls in our case, then surely we need to redesign our website. We start by checking on the BigCommerce framework for the same: 

If you are using the Bigcommerce platform for your store, you might have heard about the words Stencil and Blueprint (2 Bigcommerce Frameworks). Bigcommerce launched Stencil in the year 2016 as a new framework following the Blueprint. If you are still using your store under the Blueprint framework you are missing out on some additional benefits of the Stencil framework. 

Main Advantages and Reasons for switching from BigCommerce Blueprint to Stencil Framework

  • SEO Friendly : Store owners may have a fear that switching from Blueprint to Stencil framework will cause SEO downgrade. This might not occur in our case since we are not moving over the platform to the platform to think about SEO ranking. We are not fully migrating the store to a newer platform, we are still in the Bigcommerce Platform.We just make an upgraded design for our website. So after the store revamps to the stencil framework, Google recrawls our newly redesigned/revised store and will find our upgraded DESIGN with the improved CODE. Additionally, it gives you quite a huge repository of BigCommerce store templates. Bigcommerce Stencil framework supports rich snippets which are essential for our stores to stand out among our competitors’ stores. Rich snippets give customers information they need more quickly, and they provide immediately relevant content that is more visible in search results.
  • Stencil Framework and CLI: The CLI enables developers to design their themes locally, with full access to all assets in the store without having any impact on the merchant’s live storefront. which facilitates the developers to test their sites locally.The blueprint framework does not support local testing. Testing is done after applying the theme to our live website.

  • Storefront Customization and Preview Option: Every merchant can easily buy a new theme in Bigcommerce Theme Marketplace, upload them in their store, and can perform theme customization on their own without developer knowledge. Bigcommerce provided new support for theme customizing in the admin panel for stencil themes for non-developer use.

    Preview option helps the merchants to view their store without affecting the storefront and saying GOODBYE to the risk of making errors in the storefront.

  • Modern Front-End Development Framework: The stencil has overcome with global variables and limited editing capabilities which Blueprint uses for customization by implementing Handlebar Templating language, which is very easy for developers to develop, design with less coding
  • AMP feature: BigCommerce has created its base stencil theme named “Cornerstone” with the updated features and functionality over Blueprint themes. Bigcommerce also regularly reproduces an updated version of Base Cornerstone themes with the latest feature and functionalities. Bigcommerce Cornerstone theme natively supports Google AMP (accelerated mobile page), which ensures faster page speed and greater website experience on Mobile device
  • Additional Features: Stencil Framework uses Akamai Image Manager, which optimizes our site images based on the device size, which makes the images get loaded faster for the visitors. Stencil also uses a lazy loading feature for images which also enhances the website’s load speed and user experience.Stencil framework combines all the CSS files and JS files as a single JS and CSS file which reduces HTTP requests for increasing the site loading speed. 

Bigcommerce still supports Blueprint framework themes for old merchants created their stores before, but Bigcommerce won’t be providing any updates on the Blueprint themes. So our site will be stagnated with what features we are having currently which will reduce our Store Sale and Revenue.

Basic steps to be followed while switching from Blueprint to stencil framework for the existing websites

         Blueprint website analyze:

  • Initially, we need to analyze the entire website functionalities, design, and shopping flow process.
  • Need to create documentation to list down all the functionalities available in the Blueprint website considering both default functionalities in BC Blueprint theme as well as custom functionalities developed in all the pages(Home page, Category page, Product page, Static web pages, Blog pages, Cart and Checkout page).
  • Need to check the entire Blueprint theme coding to check whether custom scripting is added for tracking, Custom App functionality codes, etc.

    Stencil theme analyzation and functionality revamp:

  • Bigcommerce has created its base stencil theme named “Cornerstone” which is the first theme to support new theme-related features and improvements. Cornerstone theme is of free of cost and is always available at Github (https://github.com/bigcommerce/cornerstone)
  • After analyzing the entire blueprint theme code, functionalities, and design. We need to check whether all the functionalities listed down in the document are natively available in Stencil themes or need to be custom developed here at stencil themes.

    Check BC marketplace Theme – Design revamp:

  • We need to find out in which theme we are going to develop. If we need to design our store with the older view of the Blueprint website, we can even check with the BC Marketplace themes whether we have any theme available with a similar design.
  • Or we can completely redesign our BigCommerce Latest version Cornerstone theme.

    Install Custom Scripting:

  • We need to check and move all the custom scripts of apps/tracking codes, etc existed in the old Blueprint theme to Stencil theme file or the footer script/script manager/ Web Analytics in BC admin panel

    Checkout Revamp:

  • BigCommerce by default recommends “Optimised one-page checkout”. If the Customer wants any custom functionality or major design works on the checkout page. We must recommend them with the Custom Checkout SDK.
  • Checkout SDK: Checkout JS SDK is a wrapper for the BigCommerce Storefront Checkout API. It allows a developer to create a custom checkout experience to move a customer through the checkout process.

    QA Process:

  • After website revamp, We must completely check QA the entire website and track down whether all the existing functionalities and design in the old website are developed in the stencil theme and working properly

“Why  are you still waiting, Everyone is moving forward together, Now it’s our Time”

Hope the article was useful. Please feel free to get back to us if you want to know more about your BigCommerce store.

Hari Kumar MuthuKrishnan

Hari Kumar MuthuKrishnan has been in the tech industry for the past 3+ years and works as a software engineer with DCKAP. He is an avid reader and loves to learn about everything that eCommerce offers. As of now, he is working on many projects entailing BigCommerce and is always trying to innovate with new eCommerce trends.

More posts by Hari Kumar MuthuKrishnan