A 2021 shopper survey by iPaper discovered that 66% of web shoppers select to not go to ecommerce shops that supply a poor person expertise (UX). And there’s nothing that screams unhealthy UX like touchdown on a Magento retailer present process upkeep.
The default Magento 2 upkeep web page shows an uninformative Service Quickly Unavailable message that may confuse your prospects. Some guests may assume you’ve shut up store.
To forestall such outcomes, we’ve created this information that can assist you create a customized Magento 2 upkeep web page with data that encourages guests to return to your retailer.
Right here’s what we’ll cowl:
The Magento 2 Upkeep Mode in a Nutshell
The Magento 2 upkeep mode is without doubt one of the 4 operation modes by which you need to use the Magento software. When Magento is in upkeep mode, the entrance finish is offline, and guests are redirected to a Service Quickly Unavailable web page.
The Magento 2 upkeep mode helps check new modifications because it permits you to enable a number of IP addresses to retain entry to the entrance finish. That means, you’ll be able to check design and theme modifications or troubleshoot bugs in a manufacturing retailer.
You possibly can allow upkeep mode in Magento 2 with the next command:
$ php bin/magento upkeep:allowAs soon as enabled, Magento provides the .upkeep.flag file to the var/ folder within the challenge root listing. When you’ve exempted a number of IP addresses from being redirected to the Service Unavailable web page, it consists of these in a separate file known as .upkeep.ip in the identical folder.
When a customer reaches your web site, Magento checks for the upkeep file within the var/ folder. And if the file exists, it checks for the .upkeep.ip file containing the listing of exempt IP addresses.
In case of a match, it directs the customer to the entrance finish. And if the IP isn’t listed within the .upkeep.ip file, it redirects them to the upkeep web page.
Right here’s what the default upkeep web page seems to be like:
Steps To Create a Customized Magento 2 Upkeep Web page
Now that you just perceive Magento upkeep mode and the way it works, let’s discover the way to create a customized upkeep web page in your on-line retailer.
Notice: Magento gained’t show the upkeep mode web page in developer mode. Ensure you’re operating Magento in manufacturing mode earlier than following our tutorial.
Step 1: Log In to Your Magento Server and Duplicate the Default Magento Upkeep Pores and skin Folder
Entry the Magento command line interface (CLI) over SSH and go to the pub/errors/ folder within the Magento root listing.
Duplicate the default/ folder utilizing the next command:
$ cp -R default customizedThe above command copies the contents of the default folder into a brand new folder known as customized. That means, the default folder could be a fallback for when the Magento error processor can not discover our customized template.
Step 2: Create Your Customized 503 Upkeep Web page Utilizing HTML and CSS
Navigate contained in the newly created folder as follows:
$ cd customizedEdit the 503.phtml file contained in the folder utilizing your most popular textual content editor and change its code with the next:
<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license particulars.
*/
?>
<h1>We’re Quickly Offline</h1>
<p>
We’re conducting routine upkeep to enhance your purchasing
expertise. Listed below are some methods you'll be able to attain us within the meantime:
</p>
<p><sturdy>E mail: </sturdy><a href="mailto:#">help@instance.com</a></p>
<p><sturdy>Telephone: </sturdy><a href="tel:#"> (555) 555-1234</a></p>
<h2>We’ll be again on-line shortly!</h2>
<p>— Instance.com</p>The above code is an easy responsive upkeep web page template. Be sure that to edit the data inside it, such because the enterprise title, e mail tackle, and telephone quantity, earlier than pasting the code.
Subsequent, we’ll create a CSS file to model our customized Magento 2 upkeep web page.
Navigate to the CSS folder contained in the customized listing and create a backup of the default .css file as follows:
$ mv kinds.css kinds.css.bakThen, create a brand new CSS file named kinds.css and insert the next code inside it:
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license particulars.
*/
physique {
show: block;
max-width: 750px;
background: #0092C8;
shade: #fff;
font-family: Helvetica, sans-serif;
font-size: 18px;
line-height: 1.5;
margin: 0 auto;
padding-top: 150px;
text-align: left;
}
a {
shade: #000;
text-decoration: none;
}
a:hover {
shade: #fff;
text-decoration: none;
}
h1 {
font-size: 50px;
font-weight: 700;
margin: 0 0 20px;
}
h2 {
font-size: 30px;
font-weight: 700;
margin: 0 0 10px;
}Step 3: Create an area.xml File
Now, it’s time to edit the native.xml file to instruct Magento to make use of our newly created customized Magento 2 upkeep web page.
Navigate again to the pub/errors/ folder utilizing the next command:
$ cd..Copy the pattern native.xml file to create a brand new one utilizing the next command:
$ cp native.xml.pattern native.xmlEdit the newly created file and change default contained in the <pores and skin> node with the title of the folder containing our customized upkeep mode web page. In our case, it’s customized. Right here’s what the file ought to appear to be:
After that, save the file and exit the textual content editor.
Step 4: Allow Upkeep Mode and Confirm Your Upkeep Web page Contents
Navigate to the challenge root listing and allow Magento 2 upkeep mode utilizing the next command:
$ php bin/magento upkeep:allowEntry the entrance finish of your Magento retailer in an online browser and confirm the web page shows accurately. Right here’s what it seems to be like for us:
Lastly, head again to the Magento CLI and disable upkeep mode utilizing the next command:
$ php bin/magento upkeep:disableUltimate Ideas: How To Create a Customized Magento 2 Upkeep Web page
We’ve proven you the way to create a primary customized Magento 2 upkeep web page with out a Magento extension. However that’s only a glimpse of what’s attainable. Mess around with the HTML and CSS to customise the upkeep web page to match your on-line branding.
And ensure you check this in a staging atmosphere earlier than implementing it in your manufacturing retailer. When you don’t have entry to a staging atmosphere, join Managed Magento Internet hosting with Nexcess to entry Magento-ready servers with devoted staging web sites.
Browse our plans to get began right this moment.