How to Visually Distinguish Demo, Production, and Other Environments in the Virto Commerce Admin Panel
You can find many stories in IT forums about admins and developers who were confused about the environment in which they were working — in other words, they were in a Production rather than a test environment — which led to the loss of data, incorrect orders in ecommerce, and a negative impact on the brand’s finances, reputation, and more. Admins and developers are not perfect and can make mistakes. Besides, there are the added components of time pressure and getting tired at the end of the workday.
In addition, such errors are difficult to correct. You can’t be completely sure that a serious admin or developer setback can be fixed by restoring the state of the production environment using a backup. Quite often it turns out that the last backup was created several hours or even days before the failure event, and all later data is lost anyway.
So, the idea from Virto Commerce team is to design a simple solution to visually distinguish between Development, QA, Demo, and Production environments within the Virto Commerce application and software development environment for admins and developers on the partner or client side.
What Kinds of Environments Are There and What Do They Mean?
Let’s list the most common types of environments in which admins and developers work and give some short descriptions of them:
● Development [Dev] — the environment (database, website, VM, etc.) in which we deploy fresh code and see what happens.
● Test [QA] — where functionality is tested. The environment is filled with test data, which may reflect rare (in production) cases or be convenient for testing. While testing what is being prepared for production is going on here, the code for the next release is already appearing on Dev.
● Demo [Demo] (also known as Acceptance, UAT) — here the intermediate result is shown to the customer. While the semi-finished functionality deployed here is waiting for the attention of the customer, the code for the next release could already appear on [Dev].
● Intermediate [Stage] — this is also pre-production. The latest system backup from production is deployed here to check for version updates and revert back if a critical error occurs after the update.
● Production [Prod] — clean functionality of the application; your customers and partners work here.
Virto Admin Panel Distinguish Environments Settings
The method used in the Virto admin panel is intended to make an obvious aesthetic, stylistic change depending on the Demo or Production environment specified in the platform settings.
For example, you can customize the Login Screen for the admin panel. Here you can set the following things:
- Logo
- Background
- Background watermark (“Demo” or “Live”)
Changing the logo and the background for the Login Screen are especially convenient for Virto’s partners, where admins may work with Virto Commerce platforms for several different clients. Thus, the admin panel can be an easy way to visually distinguish which client’s work environment you are in.
After logging in, go to Settings>Theme settings>Login Screen. Here you can install the company logo, set a background for the login screen, choose a background watermark — either “LIVE” for Production or “DEMO”, or choose no background watermark. This customization is very simple — just drag and drop a background picture to the designated screen area and choose the watermark settings.
In the same way, you can set the Login Screen logo: choose and drag your logo to the designated screen area. Check that the new logo appears in the bottom preview box instead of the star logo and then click ‘Save’ at the top of the Admin panel.
Now you have a customized Login Screen with the new logo and background, featuring a LIVE watermark to remind you that you are working in the Production environment.
Additional customizations to establish visual distinctions for different environments is available in the Virto platform Configuration settings. Contact the Virto team if you need more details on how to handle the configuration keys.
Summary
When you come across Dev forums, you will find discussions on how to change the color for environments in Shopify, Spryker, SAP Console, IBM WebSphere Admin Panel, or other platforms. Even with some pretty complex tricks, such visual distinction is not always possible in these environments.
In Virto Commerce, however, you have the simple, easy solution for customizations as well as clear menu options to visually distinguish between any of the environments listed above.
Anticipating our clients’ needs and seeing the solution, the Virto Commerce team developed some nice backgrounds for our clients’ use at no additional cost. Use them for free for visual coding of your environments. We hope it saves you at least once from confusing the work environment — or from ever making that mistake again! If you already use a background or custom logo, please share it with the Virto community.
