Migrating from BigCommerce Blueprint to Stencil: A New Zealand Retail Odyssey

In the ever-evolving landscape of digital commerce, platform migrations can be as crucial as they are challenging. This narrative dives deep into our most recent migration project for a prominent retailer with an annual turnover of NZ$2 million. Set against the backdrop of New Zealand's thriving retail environment, we endeavoured to preserve the essence of their brand while adopting a more advanced platform.

1. The Spark: The ‘Why’ Behind The Shift

A pivotal moment in any business’s journey is recognizing when a change is not just beneficial, but essential. Our esteemed client, an influential retailer, had seen commendable success on the Blueprint platform. But as with all technological tools, time exposed its shortcomings. Blueprint, once a beacon of e-commerce functionality, started to exhibit cracks in its foundation, especially as our client's operations grew. Several issues began to emerge:

2. Protecting Our Taonga (Treasure): Backing up Blueprint

In the digital landscape, preparation isn't just about looking ahead; it's about ensuring the past is safely preserved. Before venturing into the migration process, we were acutely aware of the perils that could emerge, particularly when tampering with live data on a bustling e-commerce platform. Mistakes, however minor, could lead to significant disruptions, customer dissatisfaction, or even worse, loss of invaluable data. To circumvent these potential pitfalls, our approach was twofold:

3. Setting the Base Camp: Stencil's Development Environment

To climb higher, a strong foundation is essential. In our migration journey, this meant: Stencil CLI: Our digital ‘Swiss Army Knife’. Following the installation of Node.js and npm, we were all set with the Stencil CLI.

Stencil CLI: Essential to interact with Stencil.

For a more in-depth guide, refer to the official documentation

4. Drawing Inspiration: The Versatile Cornerstone Theme

Every artist requires a canvas, and for BigCommerce developers, the Cornerstone theme is the perfect starting point: Familiarize yourself with Cornerstone on its GitHub repository.

5. The Ascent Begins: Stencil Theme Installation

With our gear in place and route mapped out, we embarked on our migration trek. Kickstart your theme creation with the Stencil CLI:

6. Strengthening Communication: API Account Integration

An essential aspect of theme customization involves setting up store-level API accounts: Learn more about Store API accounts from the BigCommerce Support.

7. Crafting the Narrative: Tailoring the Theme

Modify the config.json file to customize your Stencil theme, from API credentials to storefront design.

8. Bridging the Old and New: Transitioning Templates

Transitioning from Blueprint to Stencil isn't just about moving files over—it's akin to translating a story from one language to another, ensuring none of its essence is lost in the process. When it came to the template files, we undertook a systematic approach:

9. Preserving Beauty: Migrating CSS

The look and feel of a website play a monumental role in user experience. As such, migrating the CSS – the stylistic backbone of the site – was a task of paramount importance. By placing equal emphasis on both the functional (template) and the aesthetic (CSS) components, we ensured that our client's transition from Blueprint to Stencil was not only seamless but also enhanced their digital storefront's performance and user experience.

10. Bringing Life with Images: Import & Optimize

Images play a vital role in e-commerce: 1. Import First: Upload your images to your BigCommerce store. 2. Paths Matter: Ensure image file paths in Stencil are correctly linked with the CDN for optimized delivery. (example) This code ensures that images are served through BigCommerce's CDN, optimizing image delivery. 3.Adapting to Viewers: Leverage responsive images using the srcset attribute to cater to diverse screen sizes. Here's an example: 4. Boosting Performance with Lazy Loading: Improve page load times by loading images lazily.

11. Carving the Path: Fine-tuning the Design

Migrating to a new platform often reveals aspects of design that can be optimized. With Stencil’s enhanced capabilities, we saw an opportunity to refine.

12. Adding the X-factor: Snippets & Widgets

With Stencil’s modular structure, snippets and widgets play a pivotal role in adding custom functionalities.

13. Ensuring Harmony: App Compatibility

It's vital that third-party apps harmonize with the platform they're on.

15. Ensuring Perfection: Rigorous Testing

A migration isn't successful until it's been battle-tested.

In Conclusion:

Our meticulous approach to

migrating from BigCommerce Blueprint to Stencil

was a blend of strategy, precision, and dedication. Today, our client boasts an online platform that’s not only technologically advanced but also captures the essence of their brand. For businesses considering a similar leap, our journey serves as a roadmap, highlighting both the challenges and triumphs of such an endeavour. Here's to harnessing technology for business growth!