We spend a lot of time here at IntuitSolutions thinking about the ways that we can extend our expertise in building BigCommerce stores to our clients in order to make the entire design and development process as easy and streamlined as possible. It’s for this reason that we developed and are sharing the ThemeBridge, a unique app which affords developers and their clients a simple sandbox for previewing BigCommerce themes.
On the surface, it seems like a pretty straight-forward task: to take BigCommerce designs and display them in a way that can be shared freely. But there were actually quite a few technical hurdles we had to overcome in order to extend this additional functionality to the BigCommerce platform. Our app ThemeBridge essentially mimics the way that the BigCommerce Stencil CLI affords an environment for developers to quickly write and preview code against live store data. Our implementation takes these components that are provided by BigCommerce and puts them all under one roof, allowing for you to truly preview your theme in a “sandbox” or staging environment with the information that’s already available from your production store — no code or tedious set-up work required.
In non-technical terms, this means that with the ThemeBridge app, there will always be a separate environment to display themes against real store data without impacting your actual BigCommerce store. It even works with all the other apps that you have installed!
Use Cases
If you’re a developer who finds yourself frequently creating sandbox stores for your clients, the ThemeBridge will save you hours of work setting up and reviewing each sandbox with all of the involved parties. No more duplicating product data across two stores — just install one app on your production store and you will know, for sure, what the theme will look like when it’s live. Imagine all the hours of development time you’ll save when setting up a preview for your theme changes only takes as long as installing an app!
Though we would never admit it, the transition between a sandbox store and a live, production store can sometimes be a little stressful. Because the two environments are not perfect mirrors of each other, there’s no way to be 100% confident that nothing would have ever fallen out of sync between the two. With the ThemeBridge, you don’t have to worry about that anymore — what you see is always what you’ll get.
Additionally, if you run a BigCommerce store and shop out your work to multiple agencies, you can add the ThemeBridge as part of your review process. Just instruct your partner to upload the theme via the app, and you’ll automatically find a link which you can share internally to review all changes before they go live on a store. This is perfect for environments where multiple developers have their hands in the pie at the exact same time, because you’ll be able to identify immediately if any changes have been accidentally broken or overwritten when the theme is applied to your live data.
Essentially, if you’ve attempted to preview a BigCommerce theme, no matter what role in the process you find yourself in, this app is for you!
Challenges, Solved
Before the ThemeBridge, BigCommerce did not have an environment to preview your theme against your real store data without creating a sandbox store. BigCommerce uses a custom templating engine, Stencil, to interpret the data that BigCommerce has for each element of your store — like, for example, your products — and display it in a custom way defined by your theme. Stencil is built to leverage the features built into your customer’s web browsers to serve content as quickly and beautifully as possible; and, if you have experience working with IntuitSolutions, you know that we have leveraged Stencil to take advantage of technologies that already exist to serve your content faster, like image lazy-loading and Google’s AMP specification.
However, the implementation for previewing this engine is actually a very complicated task. We were able to solve this problem by creating an array of servers, handling the user interactions with the app in one location separate from the location which serves the theme content. By synchronizing the user decisions with server infrastructure specifically designed to serve your custom content, we can take care of the code tasks that need to be done as quickly and efficiently as possible without impacting the user experience in any way.
To go into the nitty-gritty technical details, we built upon the technologies that are commonly used for BigCommerce themes, including the Stencil CLI and Node. But we also brought our own expertise to the table to develop an environment to synchronize and deploy themes, written in a combination of PHP with a custom templating engine, React for the user interface components (which is a JavaScript framework), Node for the deployment of the themes and the event listener which ensures that user input is translated to changes with your deployed themes, and MySQL to store all of our data. This was an ambitious project which involved several developers on our team who wrote, tested, and deployed thousands of lines of code.
We built this app to be future-proof, with toolkits for deployment and testing to ensure that it is as reliable and sustainable as BigCommerce itself. We know that trusting other companies with your infrastructure can sometimes be a difficult task, but we have taken every step to ensure that that trust is well placed in our application! The ThemeBridge is designed from the ground up to make BigCommerce development as easy and frustration-free as possible, and we’ve reflected that idea in our code, our infrastructure, and our design.
Our Passion
We had a lot of fun building this app! Though we use the ThemeBridge for our projects internally, we were also motivated to execute this idea just by the sheer complexity of the project. We saw this as an opportunity to provide a valuable service to anyone involved in BigCommerce stores, but also take a lot of pride in the challenges we faced and the creative solutions involved in solving them.
We at IntuitSolutions are always excited for the types of difficult tasks — every idea for a store that you might think is too complicated for the technology that currently exists, or every workflow problem that you face with your BigCommerce store — we see these as incredible opportunities to do work that we’re passionate about and proud of.
So, please, don’t hesitate to reach out to us! We’re glad that the ThemeBridge is available for all BigCommerce stores and are looking forward to the future challenges to come.
