Preview Your Storefront on the Staging Environment

Owned by Apostolos Karakaxas
Last updated: Jan 13, 2023 by Oleg Melnykov
3 min read

A Staging Environment is available to preview any changes before applying them to your productive Storefront. To begin previewing your Storefront, go to BSS Setup → Administration → System Options → Storefront Configuration and by clicking the Staging tab.

In this section, you may test custom CSS or Javascript, as well as preview the Nebula and Basic templates.

The following options are available to preview in the staging environment:

  • Template – Select Nebula or Basic.

  • Theme – Choose one of the available themes. This applies only to the Basic template.

  • Apply Rebranding – Enable this to apply any changes made in the Rebranding tab. For the changes to appear on the Staging environment, they must be saved first.

In the Custom CSS and Custom JavaScript fields, you may provide custom code to use on your Storefront.

Rebranding for Staging Storefront

If you wish to add some custom elements based on your rebranding, enable the Apply Rebranding checkbox.

Then, select the template you have selected for your staging environment and change the rebranding options available per template found in the Rebranding tab.
 

 

You can further rebrand your Staging Storefront, by adding custom CSS & Javascript code in order to further customize the look and feel. Copy and paste your custom code inside the respective code boxes in the Staging tab.

Preview your Staging Storefront

After saving changes you would like to preview, select Preview Storefront to Staging Mode to view how your Storefront will look like with the changes you have made. A new browser tab opens to preview your changes.

We have added a device emulation tool (highlighted in green at the top left part of the page) to help you identify the display differences of your Storefront being displayed on various devices such as desktop monitors, tablets, and mobile phones. You can deactivate this tool by clicking the X Close button. When you close the device emulation tool, you will be able to continue the preview but your screen will start depicting the desktop view (full width) of the Nebula template.

To exit or close the preview, just close the web browser's tab.

When you are satisfied with the changes you have made, you can publish them by selecting Publish to Storefront.