Magento 2 Custom 503 Maintenance page

Magento2 Custom 503 Maintenance Page

I would start off by talking about the 503 Maintenance Page and how you can customize it and let your customer know they can still contact you.

(HTTP) 503 response code definition:

The HyperText Transfer Protocol (HTTP) 503 Service Unavailable server error response code indicates that the server is not ready to handle the request. Common causes are a server that is down for maintenance or that is overloaded.

Below is the basic magento2 maintenance page

How to Create a Custom Maintenance Page

You will want to navigate to your html/pub/errors directory, this is where all the changes will happen.

You will be tempted to change the 503 in html/pub/errors/default directory, however this is the wrong way to go about creating a custom 503 page, unless at some random update you want to lose your page.

First we will want to copy the html/pub/errors/default to a new directory

example:

cd html/pub/errors/
cp -rf default custom

Next go into the new custom directory and start editing your 503.phtml

Once you are all finished, you will want go back out to the html/pub/errors directory

First, you have set the xml file

cp local.xml.sample local.xml

Next you will need to edit the local.xml file to use your new custom directory files

vim local.xml

Near the top of the file you will find:

<config>
    <skin>default</skin>
    <report>

You will need to change this to use the custom directory:

<config>
    <skin>custom</skin>
    <report>

Overall you can change any of the files in this directory to have custom 503, 404 and more..

Now lets enable maintenance mode and show off your new custom 503 page

bin/magento maintenance:enable