As an OpenCart store owner you are most probably aware of the Maintenance mode functionality embedded in OpenCart. The maintenance mode allows you to ‘turn off’ your website for your customers while it’s being worked on. When the mode is on, your customers will see a page that informs them that your website is down due to a scheduled or unscheduled maintenance. Enabling this mode is the easy and smart way of preventing your customers from the negative experience of encountering errors and warnings when trying to access your website. 

The maintenance mode page itself means that the website is currently not working. However, it is always nicer for the customers to see a maintenance mode that catches their attention and makes them want to come back. In this blog post we will show you how you can achieve that in your OpenCart store by following the following three steps:

1. Enable your Maintenance Mode
2. Change the text in your Maintenance Mode
3. Customize your Maintenance Mode page

Enable your Maintenance Mode

We shall start with enabling the Maintenance Mode. Login to the admin panel of your website and navigate to Settings=>Store. Choose the store in which you want to enable the mode and click Edit. Go to the Server Tab and find the Option: Maintenance Mode. Check the Yes option and Save the changes. 

Note that if you are logged in to your admin panel and you access your store, you will see it with the maintenance mode turned off. You can either start a new session and clear your cookies, or you can open up your website in an Incognito Window if you want to check how the other users will see your website while in maintenance mode. 

The default Maintenance Mode in OpenCart 2.0.x should look something similar to this one:

Change the text in your Maintenance Mode

In order to change the message of your maintenance mode, you will need to modify the language file of the maintenance mode page. To do so, you will have to locate the maintenance.php file in the following location on your server: admin/catalog/language/english/common/maintenance.php. You can either use a FTP client such as FileZilla or Dreamweaver, or you can access the file through your Cpanel=>File Manager and then edit the file by right click on it => Edit. In both cases you will see the following code:

<?php
// Heading
$_['heading_title']    = 'Maintenance';
// Text
$_['text_maintenance'] = 'Maintenance';
$_['text_message']     = '<h1 style="text-align:center;">The website is currently down for maintenance. <br/>We expect to be back in a couple of hours. Thank you for your patience.</h1>';
?>

The highlighted text is the one that can be replaced with whatever you wish. After modifying the file make sure to save it and upload it to your server.

*Note that the following file path is for a webstore that uses English language. If your store uses another language or is multi-store, you will need to modify the file in the following location: admin/catalog/language/your-language/common/maintenance.php

**Note that the text message is encapsulated in title tags: <h1></h1>, it is centrally aligned: style=”text-align:center;” and there is a new line after the first sentence: <br/>. These elements are known as HTML text formatting elements. You can find more information about them and how to use them here: http://www.w3schools.com/html/html_formatting.asp

The end result of the changes in the text should be something similar to this one:

Customize your Maintenance Mode page

Apart from just changing the text of your maintenance mode you can do some further modifications that will make the page even cooler. You can add images and styles to your page so that it can grab the attention of your customers and make them want to come back. I suppose that most of you have come across some catchy Maintenance Mode designs and in the following paragraph we will show you how you can achieve this.

1. You need to upload the images that you would like to use in your Maintenance Page in the following folder: catalog/view/theme/default/image
2. After that you need to locate the following file: catalog/view/theme/default/template/common/maintenance.tpl and open it for edit.
3. Edit the template file:

• You will notice that the template file contains the $header and $footer variables. They are used to display your OpenCart header and footer. The other variable is the $message, which you have already changed in the language file
•  If you want to add the image that you have uploaded to your server you will need to add the following script wherever you would like the image to be displayed:

     <img src="catalog/view/theme/default/image/pic1.png" width="380" height="350" />

         Where src is the name of the image with the path to it and the width and the height of the image set its dimensions. If you have more than one image just add the code for each image:

      <img src="catalog/view/theme/default/image/pic1.png" width="380" height="350" />
      <img src="catalog/view/theme/default/image/pic2.png" width="380" height="350" />
      <img src="catalog/view/theme/default/image/pic3.png" width="380" height="350" />

• You can also set different styles to the div containers by using the style=”” element as shown in the example below.

     <div class="container" style="background-color: rgb(246,246,246); text-align:center;">

         For more information you can check out the following link: http://www.w3schools.com/html/html_css.asp

• You can also add some other custom text and hyperlinks as shown in the example below:

     <h3> While waiting you might be interested in browsing our products in   <a href="http://www.opencart.com/index.php?route=extension/extension&filter_username=iSense">OpenCart</a></h3>

          Where the <a></a> tags encapsulate the hyperlink and in the href parameter you should put the URL of you link.

​Here is the example code that we generated for the maintenance.tpl page is the following:

<?php echo $header; ?>
<div class="container" style="background-color: rgb(246,246,246); text-align:center;">
  <div class="row">
    <div class="col-12" style="background-color: #212325; color: #FFF; font-family:Arial Narrow; padding:50px 20px;"><?php echo $message; ?></div>
    <img src="catalog/view/theme/default/image/pic1.png" width="380px" height="350px" />
   <h3> While waiting you might be interested in browsing our products in
        <a href="http://www.opencart.com/index.php?route=extension/extension&filter_username=iSense">OpenCart</a>
    </h3>
  </div>
</div>
<?php echo $footer; ?>

It outputs the following maintenance page.

We hope that you will find this tutorial helpful and that you will think twice about the appearance of your maintenance mode and the impression it leaves on your customers. As a conclusion we are suggesting you to check some creative and inspiring maintenance modes examples, which would not leave you indifferent towards these companies and their websites:

Twiiter:

Digg:

StumbleUpon:

37signals: