Magento 2 Maintenance Page – Best Examples To Optimize User Experience!

Magento 2 maintenance page

Magento 2 Maintenance Page – Best Examples To Optimize User Experience!

Let’s get this out of the way first – no one likes an unavailable website! 

However, website maintenance is unavoidable. In that case, a well-designed announcement page is your best choice to steer away from the bad user experience. 

Let’s make a simple comparison. Which one you would rather put on when your site is down?

This generic 503 page: 

default magento coming soon page

Or this vibrant and interactive one:

bss commerce magento 2 coming soon page design

COP THIS DESIGN and CUSTOMIZE your Magento 2 Maintainance Page NOW!

You already have your answer!

But first.

Why and When Do You Need a Maintenance Page for Your Magento Store?

Magento 2 is a powerful ecommerce platform. It allows users to do a lot of live updates, publish and edit while running the store at the same time. However, inevitably, we will face some conflicts along the way. 

maintenance runing
Courtesy of Paperpillar


Depending on the severity of those bugs, you need to make the best decision to protect your bottom lines. Which is turn your site off completely. 

But put your website in maintenance mode is not only caused by server overloading or bugs. Scheduled routine maintenances and upgrades are essential to your store’s health and longevity. 

under scheduled

LEARN ALL about put Magento in maintenance mode effectively and strategically. 

Moreover, with a planned update, you can minimize customers’ dissatisfaction by scheduling for non-peak hours. This way, you keep the number of customers getting affected as low as possible. 

But, and this is a huge but, you’re on the Internet! Your visitors and customers live across the globe with different timezones. Therefore, the non-peak approach is not an optimized solution.

In this case, it’s best to notify your plan first hand with a clear message on: 

  • What you’re doing
  • Why 
  • How long will it take

Now, let’s see and learn from some best blueprints on the Magento 2 maintenance mode page.

Magento 2 Maintenance Mode Page Best Examples & Best Practices

A petit (but important) message

This is important before we get to learn about what makes an effective Magento 2 maintenance page. 

This page IS NOT an error page. 

it is not an error page
Courtesy of Mat Voyce

Customers face the error page when they connect to the server but can’t access the destination page. This inconvenience is caused by overloading or broken links. 

However, the coming soon page is intentionally put there. 

Keep that in mind.

#1 Make it brand-related

Keeping your brand identity consistent is a must and you should expand it to the maintenance page as well. Just imagine how disconnected your customers feel when they encounter a completely different page when trying to reach your site.

Color, font, text, copy, slogan – make them integral to your website!

Nike 

Let examine the Magento 2 custom maintenance page of Nike.

nike time out page

As you can see, they keep it minimalistic. The copy headline for the page is short and powerful just like their infamous slogan “Just Do It”. 

Moreover, the subtle gradient gives off a different and modern to the design while keeping it in-line with the normal theme of the Nike website.

nike example

Colorlib.

This one is a WordPress Theme provider and their maintenance page is absolutely worth a shout out.

colorlib template

Here, you notice they sync the color of the CTA with their “.” in the brand name. In addition to that, it’s vibrant, interactive, and fun – which is all essential to a theme designing website.

They also effectively use the space for more email leads and promoting their social profile. The countdown clock is also a nice touch.

#2 Acknowledge that it’s an inconvenience to the visitors

There is no other way to put it – it’s a fact. Visitors obviously lost their time just to see that you’re in an outage. Here how we’re gonna do:

Simply acknowledging that this causes visitors pain! Honesty is always appreciated.

Subsequently, you can go about it in 3 ways

  • Sorry to your customers.
  • Thank them for their patience.
  • Or both

Come with it should be a detailed answer for your downtime, tell the visitors what’s going on and a time window would be excellent.

Apartment Guide

Here is an excellent maintenance announcement copy. They have everything:

magento maintenance page template with crafted copies
  • Their brand name.
  • Why visitors can’t access the site.
  • Promise to make it available as soon as possible.
  • Sorry for the inconvenience. 

It’s ideal to keep your Magento 2 custom maintenance page short and sweet but still compassionate like this. 

7/17 Credit Union

If you’re providing service/solution as your main products, definitely check this Magento 2 maintenance page form out:

credit union magento 2 maintenance page

Not only do they acknowledge they cause an inconvenience for their customers with the down website, but they also provide a solution!

This feature is critical because service ecommerce (in this case, banking)  needs a 24/7 smooth workflow. Be smart and always run your business with alternative solutions by the side for cases like this. 

Moreover, you can see they include hotline numbers to further ensure their customers can access other support outlets quickly and effectively.

All and all, this one is a staple to learn and put Magento in maintenance mode.

#3 Form a user roadmap

Put on a Magento 2 maintenance mode page doesn’t mean you can’t navigate customers to other lanes.

magento 2 maintenance page with navigation
Illustration by OrangeSprocket

In fact, providing extra hyperlinks is essential to make your page interactive. Which ultimately translates to better user experience.

Moreover, you can use the page to promote other integral parts of your online business.

Let’s pick some brains!

Indus

While being ambiguous about the reason for the update is controversial, their attempt to redirect visitors is quite impressive.

indus magento 2 custom maintenance page

First, they put the CTA for an email subscription. You’ll never go wrong with building your email leads.

Furthermore, they put on their social profile including LinkedIn, Facebook, Twitter, and Youtube. Which provides their portfolio (LinkedIn), social context (Facebook&Twitter) with a touch on visual presentation (Youtube).

This format is a foolproof Magento maintenance page template that you definitely should learn and copy! 

Digg

What if you don’t have a social profile to share? Provide your visitor with other similar niche websites with your Magento 2 maintenance page!

Take Digg’s maintenance page for example:

digg magento maintenance page template

At first glance, you might think this one is a self-sabotage move. Why do you navigate your customer to your rivalry? 

But, this one is a long game. You make the first move by giving other competitors a favor which can ask for in return later. Everything on the market is based on benefit and there’s no lifetime rivalry in the business world!

On the other hand, you appear more professional in the customers’ eyes – a huge bonus point! This one is also a great way to make search engine bots don’t meet a dead end on your website – a great tactic for maintaining SEO equity.

#4 Give customers visual progression for your maintenance

Instant feedback goes both ways. While customer feedbacks are important to make immediate changes on your part, feedbacks from you/your team during the downtime give visitors a sense of involvement with your business.

When you let them know what’s going on, they clearly see your effort as counting them in your work and ethics. Subtle yet powerful move!

Here is a great example of a Magento custom maintenance page.

upwork magento custom maintenance page

You have a detailed and easy-to-understand message, live updates, history, and recorded issues. 

Rather than providing a generic notification, you give your customers what the changes are and how they can improve the visitors’ experience later on. 

#5 Promise on time for back-to-normal

Always, always make sure you have this when you put Magento in maintenance mode. “Coming Soon” is ambiguous at best and damaging at worst.

Even if this is an unplanned outage, you need to provide a promised time window for your update. It helps you appear more professional and while notifying customers on when they can visit your site back!

Take App Manager 5.0 for example:

app manager 5

The countdown clock is an excellent element to present how long your update will be. It creates a hype surrounding your new website and urge visitors to look back at your website when it’s all set and done.

Consider adding this on your Magento custom maintenance page!

create magento custom maintenance page

Not only customers! You also need to notify web crawlers about the temporary status of your update!

If you take down your website temporarily, you must inform search engines about it. I briefly touch on extending the bot’s stroke with external links when your site is down.

However, it needs more on-page tactics on the Magento 2 maintenance page to notify search engines about maintenance. Make sure you have this file in your root server.

<?php
header(“HTTP/1.1 503 Service Temporarily Unavailable”);
header(“Status: 503 Service Temporarily Unavailable”);
header(“Retry-After: 3600”);
?>

You can also replace the 3600 (seconds) with time and date, for example: 

header(“Retry-After: Sun, 30 Aug 2020 14:00:00 GMT”);

Remember to convert your time to GMT beforehand, fill in the date, and you’re good to go!

Take away

So far, we’ve discussed and built the best, most user-friendly Magento maintenance page template. Please use this as a guideline to turn your maintenance around with better tactics to ensure customer satisfaction.

If you need help with your maintenance, we’re here to help as always!

SHARE your Magento maintenance demands and let us make your site run better than ever!

Don’t be afraid of updating your business, it’s the best way to keep up and extend your longevity.

Write A Comment

Name