You can use the built-in Custom CSS feature to change the appearance of the demo bar so that it can appear as a full page or pop-up message. This adds a layer on top of your existing theme, instead of a bar at the top of the webpage.

This is a different process than disabling your eCom store.

Our Support team can assist with the fixed solution outlined here, but editing the CSS may cause issues requiring third-party support for further customization.

The default appearance of the demo bar is a grey bar that appears at the top of your webpage:

These instructions will change the demo bar to a blue full-screen message on your webpage:

Adding the custom CSS

You can change the way the demo bar appears on your website. To accomplish this, follow these instructions:

1. From your eCom Back Office, in the sidebar on the left, click Design.
2. On the right-hand side of the screen, click Advanced.
3. On the top right-hand side of the screen, click Customize CSS.
4. Copy the following code:
   

   .wsa-demobar {
     font-size: 2em !important;
     color: #333 !important;
     padding-top: 200px;
     height: 100% !important;
     width: 100% !important;
     position: fixed;
     top: 0;
     left: 0;
     z-index: 9999;
     background: #a7c7dc !important; /* Old browsers */
     background: -moz-linear-gradient(top, #a7c7dc 0%, #85b2d3 100%) !important; /* FF3.6-15 */
     background: -webkit-linear-gradient(top, #a7c7dc 0%,#85b2d3 100%) !important; /* Chrome10-25,Safari5.1-6 */
     background: linear-gradient(to bottom, #a7c7dc 0%,#85b2d3 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   }
   .wsa-demobar a {
       display: none;
   }
   .wsa-demobar .close {
       display: none !important;
   }
   

5. Paste it in the Custom CSS window.
6. Click Save.

Translating messages

You can use the translation feature in your eCom store to change how messages appear in different languages, with a limit of 255 characters per message. The steps below explain how to translate the specific messages This store is under construction and Any orders placed will not be honored or fulfilled, but the same instructions can be followed for other translation keys as necessary.

1. From your eCom Back Office, in the sidebar on the left, click Content > Translations.
2. Select the This store is under construction or Any orders placed will not be honored or fulfilled translation keys from the list.
   • If they are not on the list, click Modify translation to search for them.
3. Enter the message to replace each translation key, in the Translation to fields. 
4. Click Save.
5. Repeat the steps for the other translation key from step 2.

Enabling the demo bar

Follow these instructions to make the changes you've made visible by enabling the demo bar.

1. From your eCom Back Office, in the sidebar on the left, click Settings.
2. Under General Settings, click Advanced.
3. In the STORE section, turn on the switch beside Show demo bar.

Displaying the demo bar as a message

You can display your demo bar as a floating message on your website that users can read and dismiss. You can use the CSS code below to display a message by adjusting how the demo bar functions.

Example CSS code

This CSS code can be applied to your website to have the demo bar appear as a popup message instead of a banner.

1. From your eCom Back Office, in the sidebar on the left, click Design.
2. On the right-hand side of the screen, click Advanced.
3. On the top right-hand side of the screen, click Customize CSS.
4. Copy the following code:
   

   
   /* eCom (C-Series) Demo Bar - Creating a message box BEGIN */
   div.wsa-demobar {
     top: auto !important;
     bottom: 100px;
     border-radius: 10px;
     padding: 10px;
     width: 20% !important;
     height: auto !important;
     position: fixed;
     font-size: 11px;
     text-shadow: 0px 0px 3px black !important;
     right: 30px;
     left: auto !important;
     background: #333333 !important;
     box-shadow: 5px 5px 5px hsla(231, 92%, 49%, 0.11) !important;
   }
   
   /* If you want to delete the "Return to backoffice" link */
   .wsa-demobar a { display: none; }
   
   /* If you want to have this displayed without being able to close it */
   .wsa-demobar a.close { display: none !important; }
   /* eCom (C-Series) Demo Bar - Creating a message box END */
   

5. Paste it in the Custom CSS window.
6. Click Save.

Test your changes

As with any design change, you should always test your changes to see if you're satisfied with the end result. You can open a private browsing window and go to the homepage of your eCom store to see how the changes will look to your customers.