When you maintain your Magento store, your store will be normally not accessible, you want to notice visitors that your website is being maintained. How can we do this?
In this tutorial for beginners, we will find out how to put a Magento store to maintenance mode and how to customize Maintenace Page so that it can keep visitors coming back to your website and not feeling annoying.
Put your Magento store to maintenance mode
It’s simple to put your Magento store to maintenance mode, use your file manager to upload an empty file named: maintenance.flag and upload it to Magento root folder. I will be like this
After uploading, go to your website to see the maintenance mode enabled like this
Allow access exception for maintenance mode
After enabling Maintenance mode, you will not be able to access frontend store, even you already logged in as Admin. We need to add an exception for your IP address so that you can still access your Magento store as normal.
To allow and IP to access store during maintenance, open index.php in Magento root folder, go to line 47 and add the following code:
| 1 2 | $ip = $_SERVER['REMOTE_ADDR']; $allowed = array('x.x.x.x','y.y.y.y'); |
whereas x.x.x.x, y.y.y.y are IPs that are allowed to access store during maintenance mode.
To find out your own IP, visit https://www.whatismyip.com/
Now try to access store with Maintenance.flag enabled to see the result.
Quick tip: Do you know that Maintenance.flag is 1 of the reason that causes Magento Error 503 Service Temporarily Unavailable
Customize maintenance page
By default the maintenance mode page looks like this:
Now we will customize this default page so that it will has better looking and provide more information
To edit maintenance mode page, go to /errors/default/503.phtml, edit file and enter the following code
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!doctype html> <title>Magento Maintenance mode</title> <style> body { text-align: center; padding: 150px; } h1 { font-size: 50px; } body { font: 20px Helvetica, sans-serif; color: #333; } article { display: block; text-align: center; width: 650px; margin: 0 auto; } a { color: #dc8100; text-decoration: none; } a:hover { color: #333; text-decoration: none; } </style> <article> <h1>We'll be back soon!</h1> <div> <p>Sorry for the inconvenience but Magentoexplorer.com is performing some maintenance at the moment. If you need to you can always <a href="mailto:tutsmagento@gmail.com">contact us</a>, otherwise we’ll be back online shortly!</p> <p>Visit our <a href="https://www.facebook.com/mgtexplorer/ ">Fanpage</a> for updating news and tutorial</p> <p>— Magentoexplorer.com</p> <img src="https://magentoexplorer.com/wp-content/uploads/2015/04/magento-explorer-logo-main.png" class="logo-image" alt="Magento tutorial"> </div> </article> |
Next, we will need to remove the wrapper so that the page will display independently, go to /errors/default/page.phtml, edit this file and remove everything inside, then put the following code
| 1 2 3 4 5 6 7 8 9 | <?php /** * Magento maintenance PAGE * Created to replace the 503 maintenance notice * Tutorial written by https://magentoexplorer.com/ */ require_once $contentTemplate; ?> |
Now save the file, flush Magento cache and you will have a page like this.
You can use your html/css knowledge to create more beautiful maintenance pages for Magento, like these example
Example 1
Example 2
Example 3:
Conclusion
Today, every single page on your e-commerce store is important as they can drive sales with a good optimization. I hope you guys can make the most out of Magento maintenance mode page after reading this Magento tutorial.
Drop a line here if you have any question or suggestion.
3 Comments
Hell Daniel, very helpful tutorial you have done here for customize Magento maintenance mode page.
Very helpful post. It will be better if can be done through admin panel.
followed this exactly as written and it all works except that even after entering my IP i still get the maintenance page and not my site
help please!