How to make a good looking Magento offline page?

In the world of developing Magento webshops we often need to block visitors seeing webshop frontend. Some of the reasons are:

  • Webshop is down or encounters some problems so customers cannot buy anything. Chasing bugs and fixing them may require a lot of time. That must be done directly on live environment in order to make webshop available to customers as soon as possible because we don’t want them to see problems on live site. If they see these problems, it’s more likely that this experience shall make them go to another webshop
  • Setting up develop/staging/live environments and restrict for non-allowed visitors.

Instead, your visitors should see a page like this: “Hey, we are offline, come back later” or something like that. In these situations, we must have fast solution to trigger offline mode as fast and simple as on/off switch, and prevent customers see something they shouldn’t.

Long story short: instead of this ugly Magento BSOD (image below)

magento bsod


or this 503 page (image below)



It would be way better to see something like this (image below)

Magento offline page

Do you agree?

Idea is to have one dummy file as on/off switch, and let code do the rest.

Files we add:

  • offline.flag (let’s call it: “the switch”)
  • offline.html (offline page, here you are free to make static HTML page that customers will see instead of crashed/unfinished site)

Place both files in Magento root. You may change names as you wish, but then don’t forget to update it in code. Code we add in index.php:

# allowed IP addresses 
$ips = array('','yyy.yyy.yyy.yyy','zzz.zzz.zzz.zzz');
# "the switch" 
$offlineFile = 'offline.flag';
# IP of visitor. Don't forget proxies

And find logic for default Magento BSOD (first line should be like: if (file_exists($maintenanceFile))) and replace these 4 lines with:

if (file_exists($offlineFile) && (!in_array($remoteIP, $ips))) {
    header("Location: {{{WEBSHOP URL}}}/offline.html");    
} else {
    if (file_exists($maintenanceFile)) {
        include_once dirname(__FILE__) . '/errors/503.php';

Why is this useful?

  • Independent to Magento
  • Simple and fast way to switch on/off offline mode without having to enter admin (for some Offline maintenance extensions you have to be logged-in in admin to enable offline mode in a first place, but many times you cannot even log in)
  • IP whitelist who can access website, while rest of your visitors see Offline page (important!)
  • Editable Offline page file in root that can be changed independently to Magento

In meantime, while writing this blog post, I came up with an idea to modify Magento core, so in case of frequent crashes – we automatically switch to Offline mode. Something to think about… Maybe in next blog post!

Until then – happy coding!


Frontend Magento Developer @ Younify