This article explains how to create a full-page maintenance / offline message. It uses the built-in Custom CSS feature to change the demo bar. This workaround only adds a layer on top of the existing theme, it doesn't remove any elements from the actual page.

For other ways to temporarily or permanently disable your eCom store, click here.

The default appearance of the demo bar is a grey bar that appears at the top of your webpage. It contains a maintenance message and includes a link to the eCom Back Office.

These instructions will change the demo bar to a blue full screen message on your webpage. The instructions explain how to translate the message, by default it will look like this:

1. Adding the custom CSS

   You can change the way the demo bar appears on your website. Instead of a bar at the top of the webpage, you can stretch it the full length of the page using custom CSS. 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 Theme settings.
   3. On the top right-hand side of the screen, click Custom CSS.
   4. Copy the following code:
      

      .wsa-demobar {
        font-size: 2em !important;
        color: #333 !important;
        padding-top: 200px;
        height: 100% !important;
        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.

2. Translating the demo bar message

   The standard text of the demo bar reads:

   This store is under construction. Any orders placed will not be honored or fulfilled.

   You can use the translation feature in your eCom store to change the message to suit your needs. If you are satisfied with the default, skip these instructions.

   There are two separate phrases you need to translate: “This store is under construction” and “Any orders placed will not be honored or fulfilled”

   To translate this message:

   1. From your eCom Back Office, in the sidebar on the left, click Content > Translations.
   2. Click Modify Translation.
   3. In Translation to override, begin typing: This store is under construction and select This store is under construction when it appears.
   4. Click Create.
   5. Under Translation to X language, enter the preferred message to replace This store is under construction up to 255 characters.
   6. Click Save.
   7. Repeat steps 1 to 6 for the second part of the message: Any orders placed will not be honored or fulfilled.

3. Enable the demo bar

   So far, no visual changes have occurred to your website. 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.

4. Test your changes

   As with any design change, you should always test your changes to see if you're satisfied with the end result. Open a private browsing window, go to the homepage of your eCom store and confirm that the changes are appropriate. With knowledge of CSS you can adjust how the maintenance message looks.