Article Teaser
Sabina, Frontend Developer

By Sabina

July 05, 2023

Streamlining BigCommerce with a Staging Environment: Bye-Bye Production Nightmares!

Imagine a scenario where you meet a client who runs a bustling shop with a significant number of visitors. They express their desire to update the visual elements and implement various upgrades, all of which require thorough testing before being implemented. On top of that, they have encountered unexpected customizations in their originally chosen theme. Complicating matters further, the client has little to no technical knowledge about BigCommerce and operates in a different time zone. At first glance, this combination may seem like a recipe for disaster. However, fear not! In this article we will explore some ideas and solutions to address these challenges and ensure a successful implementation.

Video and written content include all the same conclusions but it’s not a transcription

Is testing on production your BigCommerce nightmare?

1s.jpeg

The Power of Previewing

When it comes to updating themes, one simple yet effective approach is to upload the theme without immediately applying it. Instead you can utilize the "Customize" feature to preview your pages in Page Builder. This allows you to get a relatively accurate representation of your content, ensuring around 100% accuracy. With the "Preview" option you can navigate your website as you normally would. While this method is straightforward, it doesn't provide a way to compare two versions of your theme.

Consider Multiple Storefronts

Another option, albeit one that requires some investment, is to set up multiple storefronts. Create a separate storefront, specifically designated for testing purposes, and call it "staging." Here you can experiment and build content in Page Builder, comparing the changes across different storefronts to find what suits your needs best. This approach offers more freedom to iterate and test but it does come with additional costs. However, if you have a developer on your team, there might be a more cost-effective solution.

2s (1).jpeg

Leveraging Stencil CLI

If you have a developer or technical expertise available, using Stencil CLI can be a viable solution. By running the command "stencil start" with the "--tunnel" flag, you can obtain a publicly accessible URL for testing purposes. However, this approach may not be the most efficient for quality assurance workflows. It requires someone to run the server in a local environment and distribute a new URL each time. Moreover, if the person responsible for running the server operates in a different time zone, it can introduce additional challenges.

3s.jpeg

An Enterprise Solution: StagingPro

For Enterprise users there is an integration specifically designed to address these challenges. StagingPro allows you to have two separate BigCommerce stores—one for staging and one for production. This integration facilitates the migration of data and content between the two stores, providing a seamless workflow. However, it's worth noting that StagingPro may not fully support widgets at the moment. If you have access to this enterprise feature, it is certainly worth exploring as a comprehensive solution. But what about those who are not Enterprise users?

6s.jpeg
7s.jpeg

An Alternative Approach

In a previous case with one of our customers, we devised an alternative solution that could work for non-Enterprise users. We created a sandbox store, hidden behind the "Not active" flag, ensuring only those with the access code could access it. We exported the active theme from the customer's production store and applied it to the Cornerstone theme. Utilizing API calls, we copied categories and imported example CSV files for the necessary products and images. Though copying product images required some determination, we managed to achieve it.

8s.jpeg

The Benefits

The recreated sandbox store serves as a dedicated playground for testing new features, applying and evaluating widgets (many of which offer 14-day trials), and testing visual customizations. The key advantage of this approach is that it allows you to experiment without any consequences on your production store. For optimal results, aim to recreate your production store as closely as possible. While certain widgets may not be available, this approach provides a solid starting point.

While the challenges of testing and implementing BigCommerce visual updates in complex scenarios can seem overwhelming, there are several strategies at your disposal. Whether it's utilizing preview options, considering multiple storefronts, leveraging Stencil CLI or exploring enterprise features like StagingPro, you can find a solution that suits your needs. Additionally, the alternative approach of creating a sandbox store can be an effective way to test new features and customizations without impacting your production environment. With these ideas in mind, you can confidently navigate the process of updating and testing BigCommerce visual elements.

The article is a complementary part of a presentation I did during the BigCom DevX event organized by Space48. Huge thanks for giving me the opportunity to make the speech and present my BigCommerce testing experience.

Would you like to innovate your ecommerce project with Hatimeria?

Author
Sabina, Frontend Developer
Sabina
Developer

She is a vegan software engineer who fuels her coding sessions with leafy greens and oat lattes. She is passionate about both animal rights and writing clean, efficient code. Her ultimate goal is to change the world, one line of code and tofu burger at a time.

Read more Sabina's articles

Interested in something else?

Office

Meet the team

Learn more about company and the team.

Join Us

Join us

Make an impact on your career.