Creating a Magento 2 Custom Maintenance Page: A Step-by-Step Guide

Sometimes a store may need to work and upgrade the site in a period. For example, you may want to build new themes, fix the site problem, or add new plugins that change the behavior of your sites. During the adjustment stage, your website may seem broken to the visitors. If you have a lot of traffic, then it is best to prevent customers from seeing the maintained sites. It will create a bad user experience and makes people feel your brand is unprofessional.

You can deal with the issue by creating a maintenance page to navigate them from the editing site until the maintenance process wraps up. Although it is quite unpopular to apply maintenance pages, the store still needs it.

That is when you need to learn about how you can quickly create these pages. For me, I would highly recommend you use Magento 2 Better Maintenance extension which is considered an effective solution for customizing pages, conveying messages clearly, and speeding up the procedure.

Table of Contents

• What is the Maintenance Page in Magento 2?
• Merits from using Magento 2 Custom Maintenance Page mode
  • Flexible customization
  • Live up to customer demand
  • Show some respect to the customers
• How to create a Magento 2 Custom Maintenance Page without using an extension?
• How to create the Magento 2 Custom Maintenance Page with the Mageplaza Better Maintenance extension?
  • General Configuration
  • Display Setting
    • Clock Setting
    • Subscribe Setting
    • Social Contact
  • Maintenance Page Setting
  • Features of Mageplaza Better Maintenance extension for Magento 2
• Wrapping it up

EXPLORE MAGENTO 2 MAINTENANCE EXTENSION!

What is the Maintenance Page in Magento 2?

The maintenance page is created to inform customers that your sites are down and unable to access until the pages are ready. This page can block visitors from viewing the whole store site or several pages.

The page not only works simply as some notification with simple words. It should include information like information when the site is available or extra actions on sites such as a countdown timer, sharing on social sites, registering emails to pile up the email list. All of this should be available when you are using the sites.

Website Support
& Maintenance Services

Make sure your store is not only in good shape but also thriving with a professional team yet at an affordable price.

Get Started

Merits from using Magento 2 Custom Maintenance Page mode

Flexible customization

Instead of having a developer design the maintenance page, you can create a custom maintenance page on your own with simple settings on the backend. Although you are not a coding expert, admins and owners can create an appealing maintenance mode site with variable customizing function. These functions have Countdown timer with multiple template selections, subscribe button or social contact, and other elements on the page such as title, description, text color. You can take advantage of this marvelous flexibility to design your unique maintenance page.

Live up to customer demand

Whenever stores have any technical issue/ updates, you can instantly block the current site to ease any issue which can cause by your repaired sites. Although maintenance sites can interfere with your store shopping journey, stores can prevent any dissatisfaction when experiencing the sites. Also, proper information from the site’s customer will comfort your visitors when they cannot access the website temporarily.

Show some respect to the customers

It is quite rude when customers paid their free time to visit your site, and they cannot access it. The feeling of dissatisfaction should be some part mitigated if your maintenance page clearly explains and apologize for the inconvenience.

How to create a Magento 2 Custom Maintenance Page without using an extension?

So, we have provided you with some basic information about what Custom Maintenance page. Now, let us show you how to create a Magento 2 Custom Maintenance page for your online store by yourself.

Step 1: Create a new theme

• In your Magento 2 installation directory, navigate to app/design/frontend
• Create a new directory for your theme, for example Custom/maintenance
• Inside the maintenance directory, create the following directories: web/css, and Magento_Theme
• Inside the Magento_Theme directory, create another directory named layout
• Your theme directory structure should look like this:

app/design/frontend/Custom/maintenance
├── web
│   ├── css
│   └── js
└── Magento_Theme
    └── layout

Step 2: Create the maintenance page layout XML

• Inside the layout directory, create a new XML file named maintenance_page.xml
• Open the maintenance_page.xml file and add the following content:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="page.wrapper">
            <container name="maintenance.container" htmlTag="div" htmlClass="maintenance-container" before="-">
                <block class="Magento\Framework\View\Element\Template" name="maintenance.content" template="Magento_Theme::maintenance.phtml" />
            </container>
        </referenceContainer>
    </body>
</page>

Step 3: Create the maintenance page template

• Inside the Magento_Theme directory, create a new directory named templates
• Inside the templates directory, create a new file named maintenance.phtml
• Open the maintenance.phtml file and add the HTML content for your maintenance page
• Customize the content and design of your maintenance page according to your requirements

Step 4: Activate the new theme

• In your Magento 2 installation directory, open the app/design/frontend/Custom/maintenance directory.
• Create a theme.xml file with the following content:

<?xml version="1.0"?>
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Custom Maintenance Theme</title>
    <parent>Magento/blank</parent>
    <media>
        <preview_image>media/preview.jpg</preview_image>
    </media>
</theme>

• Add a preview image for your theme by placing an image file named preview.jpg inside the media directory.

Step 5: Configure Magento to use the new theme

• Log in to your Magento 2 admin panel.
• Go to Content > Design > Configuration.
• Click on Edit for the appropriate store view or website.
• In the Applied Theme section, select your custom maintenance theme.
• Save the configuration.

Step 6: Enable maintenance mode

• Access your server via SSH or FTP.
• Navigate to your Magento 2 installation directory.
• Run the following command to enable maintenance mode:

bin/magento maintenance:enable

Now, when you access your Magento 2 store, it should display the custom maintenance page you created. Once you’re ready to disable maintenance mode and resume normal operations, run the following command in your Magento 2 installation directory:

bin/magento maintenance:disable

Remember to clear the Magento cache after making any changes to ensure that the new maintenance page is properly displayed.

How to create the Magento 2 Custom Maintenance Page with the Mageplaza Better Maintenance extension?

This sufficient function is featured Better Maintenance module provided by Mageplaza. If you feel curious how “hard” can it be to custom this page, then continue this section.

For any function to work correctly, it requires the general function to be set appropriately in the general configuration. Thus, you can read the Better Maintenance user guide for detailed guidance to deploy this module.

And, the custom maintenance mode page will be created with ease when you follow my instructions below:

In the Admin Panel, choose Stores > Settings > Configuration, then select the Better Maintenance tab in the Mageplaza extension.

General Configuration

After you click on the Better Maintenance tab, the general configuration grid will appear to set several fields:

• In the Enable field, admin can turn on the module by selecting Yes.
• In the Real-Time of Website field, the module will be based on the timezone of the websites to display the current time. You cannot fix the time directly in this field, but it can be checked at Configuration, Locale Options in General Options of General tab
• In the End Date Time field, you can choose the time maintenance process to wrap up. Based on the end date, the countdown timer will count down until the finished date. The maintenance period starts from the save configuration time to the end date.
• In the Redirect To Page field, continue to select a specific page to navigate customers to the maintenance site by choosing Maintenance Page. Keep in mind that any store link will be redirected to the selected page except for Whitelist IPs and Whitelist Page Links.
• For the Auto Switch to Live Site Mode field, set Yes to change back to live site mode when it comes to End Date Time. If you set No, the page will shift to live sites only when the admin turns off.
• For Whitelist IP(s) field, the setting will let visitors who have the specific IP address can access the page without being redirected to Maintenance Page. The value allows using commas to separate 1 IP addresses, multiple IP addresses, 1 range of IP addresses, or multiple IP address ranges, IP addresses. You can allow IP addresses as follows:
  • 10.0.0.10, 10.0.0., 10.0.., 10.0.0. - 123.0.0., 12.3..* - 222.0..
  • Symbol “*” in range 0 - 255
• For the Whitelist Page link(s) field: you can cross-out the pages which are not affected by the maintenance process. Inserting the page links in separate lines will help customers access these pages normally.

Display Setting

Clock Setting

The clock displayed on the maintenance page provided by Mageplaza is capable of multiple styles (Simple, Circle, Square, Stack, Modern), background-color, clock interior color, and the color of the clock number. In detail, admins can save time using the ready-to-use template to create the best or create a unique one for their sites, which suits their store theme.

Subscribe Setting

Another beneficial tool that can be displayed on this page is subscription. If the customer arrives at the sites and unable to access the official page, they can subscribe to keep frequent contact with the store. It will be a great tool to increase the number of subscriptions and also to retain customers when they are unable to visit the sites.

There are 2 primary subscriptions. which are newsletter subscriptions and account registration:

• For the newsletter subscription, the customers will enter their email and click on the subscribe button. The admin can easily control the information in the backend by accessing Marketing > Communications > Newsletter > Subscribers.
• For the Account Registration, the visitors will create an account to receive the email newsletter. If you left the Subscription Description field blank or choose None as Subscription type, there will be no description appearing on your maintenance page.

Moreover, the module allows admins to customize the label button to show different languages, and adjust the color of the button text and button background to suit the admin intentions.

Social Contact

You can add social contact to keep in touch with customers via social sites before they bounce off the site. You can interact with the customers via Facebook, Twitter, Instagram, Google+, Youtube, Pinterest. You only need to add your social site links, and the icons will appear on the frontend. Besides, you can modify the label for the social contact field and label color.

Maintenance Page Setting

In this final section, you will make the general modification for the page route, layout, page title, description, text color, logo, background type, progress bar, and HTTP response header.

In specific, the progress bar is the section that shows the progress of your site maintenance process. If you apply it to the store sites, you can customize the Progress Value, Progress Label, Label Color, Progress Bar Color.

You can send the page status to Google via HTTP Response Header:

• 503 Service Unavailable

• 200 OK

Finally, users can preview their page instead of accessing the Frontpage. The preview page will show the exact content on the front page. To use it, you can click on the Previewing button. Furthermore, you need to remember that is you uploading files, and it is essential to save the configuration before previewing.

Features of Mageplaza Better Maintenance extension for Magento 2

The Better Maintenance extension for Magento 2 by Mageplaza helps you to prepare for new products and services while also informing customers that your website is currently undergoing maintenance or an upgrade. Visitors to the store are comfortably informed of the status of repair work and the launch date thanks to the Better Repair module.

Here are the outstanding features that this extension brings to customers:

• Coming Soon page and Maintenance page redirection: a new destination for redirecting customers when your stores have to update or fix errors.
• Ready-to-use countdown timer during maintenance: a countdown timer displayed to reduce confusion and comfort customers about launching time.
• Subscribe or social contact to maintain customers’ connection: a subscription section on Coming Soon/ Maintenance Page to collect customer information
• Customize Maintenance Page & Coming Soon Page: store owners can freely adjust these two pages’ layout, title, text color, description, even image and video, etc.
• Make an exception by whitelist: Whitelist IPs that are added in the backend can continue to visit the store website without having to navigate.
• Quick preview: This is a incredibly convenient and time-saving method for administrators to test out different changes to the appearance of the page.
• AVADA Marketing Automation by Mageplaza (recommended): This is a all-in-one platform designed for email marketing with many innovative features such as Welcome series, Order follow up, Advanced Segmentation, and so on.

Wrapping it up

Create a Magento 2 Custom Maintenance page will make users’ work tasks more manageable. Whenever your site needs to be updated or fixed, our free maintenance module will help you navigate customers to a maintenance mode page in a short period on the admin panel. Even the non-developers will able to take the initiative to create this page without the interference of the developers or complex coding process.

Hence, the Better maintenance extension does provide a coming soon page which you can give customers some hints and notifications to attract buyers to visit the sites on the day it is released.