How to Custom Maintenance mode Page in Magento 2

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 using Better Maintenance extension which is a superb

Table of Contents

• What is the maintenance page?
• Merits from using custom maintenance page mode
  • Flexible customization
  • Live up to customer demand
  • Show some respect to the customers
• How to customize maintenance page
  • How to Configure
    • General Configuration
    • Display Setting
      • Clock Setting
      • Subscribe Setting
      • Footer Block
      • Social Contact
    • Maintenance Page Setting
• Display Maintenance Page during maintenance time
• 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 sites 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 countdown timer, share on social sites, register emails to pile up the email list. All of this should be available when you are using the sites.

Merits from using 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 dissatisfied should be some part mitigated if your maintenance page clearly explains and apologize for the inconvenience.

How to customize maintenance page

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

1. 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.

2. 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 blanked or choose None as Subscription type, there will be no description appear 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.

1. Social Contact

You can add social contact to keep in touch with the 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, 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.

Display Maintenance Page during maintenance time

Thanks to the better maintenance module, owners can inform the customer about the store maintenance progress, which is a proper explanation, and an apology to keep the customers continues to come back to the sites. The below screenshot is an example of a maintenance site that is created by flexible customization.

Wrapping it up

Custom maintenance by Magento 2 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.

EXPLORE MAGENTO 2 BETTER MAINTENANCE EXTENSION!