A Staging Environment is available to preview any changes you wish to do before applying them to your productive Storefront. To begin previewing your Storefront, you must first define its options by selecting the 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, you should first 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 utilizing the options to add custom CSS & Javascript code in order to further customize the look and feel. To utilize those tools, copy and paste your custom code inside the empty respective code boxes located in the Staging tab.

Preview your Staging Storefront

After saving any 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 done. 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 done, you can publish them by selecting Publish to Storefront.