This article explains how to create a full page maintenance/offline post. 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.
By default, the demo bar looks like a gray bar that appears at the top of your web page. It contains a maintenance notification and a link to the eCom Back Office.
Deze instructies veranderen de demobalk in een blauw volledig scherm bericht op je webpagina. In de instructies wordt er uitgelegd hoe je het bericht kunt vertalen. Standaard ziet het er zo uit:
NOTE
Our support team is dedicated to helping you with your eCom store. Editing your theme's CSS can lead to design or functionality issues. When this happens, our support team may not have the knowledge needed to resolve the issue in your store's CSS code. In these cases, they may recommend the following:
Contact a third-party developer to resolve the issue.
Removing the CSS changes to bring the original theme back to the default design.
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 web page, you can stretch it the entire length of the page using a custom CSS. Follow these instructions to do this:
From your eCom Back Office, click Design in the bar on the left.
Click Theme Settings on the right side of the screen.
At the top right of the screen, click Custom CSS.
Copy the following code:
.wsa demo bar {
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 demo bar a {
display: none;
}
.wsa demo bar .close {
display: none !important;
}Paste it into the custom CSS window.
Click on Save.
2. Translation of the demo bar message
The default text of the demo bar reads as follows:
This store is under construction. Any orders placed will not be honored or processed.
You can use the translation feature in your eCom store to tailor the message to your needs. If you're happy with the default setting, skip these instructions.
There are two different sentences that you need to translate: “This store is under construction” and “Any orders placed will not be honored or processed”.
To translate this message:
From your eCom Back Office, click Content > Translations in the left sidebar.
Click on Overwrite translation.
In Overwrite translation, enter: This store is under construction and select This store is under construction when it appears.
Click on Create.
Under Translate to X language enter the desired message to replace it This shop is under construction up to 255 characters.
Click on Save.
Repeat steps 1 to 6 for the second part of the message: Any orders placed will not be honored or processed.
3. Activate the demo bar
So far, no visual changes have been made to your website. Follow these instructions to make the changes you've made visible by enabling the demo bar:
From your eCom Back Office, click Settings in the left sidebar.
Under General Settings click Advanced.
In the STORE section, turn on the switch next to Demo bar.
4. Test your changes
As with any design change, you should always test your changes to see if you're happy with the end result. Open a private browser window, go to the front page of your eCom store and confirm that the changes apply. With knowledge of CSS, you can customize how the maintenance message looks.