How to Customize Your Magento 2 Maintenance Page?
The Magento 2 maintenance page notifies customers that your site is temporarily unavailable once it is ready. The page can restrict access to the entire store or specific pages. By default, the Magento 2 maintenance page has a plain design. But you can easily customize it to make it more appealing and professional. This tutorial will guide you through customizing your Magento 2 maintenance page.
Key Takeaways
-
The default Magento 2 maintenance page is simple and user-friendly but lacks a personalized touch.
-
Customizing the Magento 2 maintenance page can improve your store's professional appeal during updates.
-
The maintenance page can be tailored to restrict access to specific pages or the entire store, providing flexibility.
-
This tutorial provides steps on effectively customizing your Magento 2 maintenance page.
-
Delve into Magento 2 maintenance page customization FAQs and ensure you thoroughly understand.
Why should you customize your Magento 2 Maintenance Page?
1. Branding
The default Magento 2 maintenance page may not align with your store's branding. By customizing it, you can ensure that your customers have a consistent brand experience even when your site is down.
2. Professional and Informative Page
A customized maintenance page shows that you are taking care of your customers. It provides them with a professional and informative page instead of a generic one.
3. Effective Customization
Create your custom maintenance page easily without needing a developer. Customize various elements like a countdown timer, subscribe button and more. Take advantage of the flexibility to design a unique and appealing maintenance page.
4. Customer Reassurance
When stores encounter technical issues or need updates, they can temporarily block the site to prevent any problems caused by maintenance. While this may disrupt the shopping experience, it helps prevent dissatisfaction. Providing proper information to customers about the temporary unavailability of the website can help reassure visitors.
5. Optimize Customer Experience
When customers take time to visit your site but cannot access it, it leaves them dissatisfied. To mitigate this, make sure your maintenance page clearly explains the situation and offers an apology for any inconvenience caused. Additionally, provide a clear timeframe for when the maintenance will be completed to keep customers informed.
Steps to Customize Magento 2 Maintenance Page
1. Log in to your Magento server and duplicate the default maintenance skin folder.
Go to the Magento command line interface (CLI) via SSH and then navigate to the pub/errors/ folder in the root directory of your Magento installation. To duplicate the default/ folder, use the command provided below:
$ cp -R default custom
The command above copies the default folder's contents to a new " custom " folder. This allows the default folder to fall back when the Magento error processor can't locate your custom template.
2. Create a Custom 503 Maintenance Page with HTML and CSS.
Access the recently created folder by following these steps:
$ cd custom
Open the 503.phtml file in the folder using your favorite text editor and edit it. Replace its contents with the following code:
<?php
/**
* Copyright (c) Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
?>
<h1>We’re Temporarily Offline</h1>
<p>
We’re conducting routine maintenance to improve your shopping
experience. Here are some ways you can reach us in the meantime:
</p>
<p><strong>Email: </strong><a href="mailto:#">support@example.com</a></p>
<p><strong>Phone: </strong><a href="tel:#"> (555) 555-1234</a></p>
<h2>We’ll be back online shortly!</h2>
<p>— Example.com</p>
Afterward, generate a CSS file to customize the appearance of the Magento 2 maintenance page. Go to the CSS folder within the designated "custom" directory and back up the original .css file:
$ mv styles.css styles.css.bak
Next, create a CSS file named styles.css and add the following code to it:
/**
* Copyright (c) Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
body {
display: block;
max-width: 750px;
background: #0092C8;
color: #fff;
font-family: Helvetica, sans-serif;
font-size: 18px;
line-height: 1.5;
margin: 0 auto;
padding-top: 150px;
text-align: left;
}
a {
color: #000;
text-decoration: none;
}
a:hover {
color: #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;
}
3. Create a local.xml File
Edit the local.xml file to tell Magento to use your new custom Magento 2 maintenance page. Go back to the pub/errors/ folder with this command:
$ cd..
Next, you need to copy the sample local.xml file for creating a new one with this command:
$ cp local.xml.sample local.xml
To change the newly created file, replace the word "default" inside the
Once you've completed that, make sure to save the file and then exit the text editor.
4. Enable Maintenance Mode and Verify Your Page Contents
Go to the root directory of the project and activate Magento 2 maintenance mode by executing the given command:
$ php bin/magento maintenance:enable
Open your Magento store's frontend in a web browser and confirm the page displays correctly. This will be your view in this case:
Now, return to the Magento CLI and disable maintenance mode with this command:
$ php bin/magento maintenance:disable
FAQs
1. How can I add a "Coming Soon" or "Under Construction" message during maintenance mode?
With Magento 2 maintenance mode, you can customize a responsive layout for your maintenance page, adding your Magento logo, theme, and an update message. You can also incorporate tools or extensions like countdown timers to create a sense of anticipation.
2. What role do plugins, modules, and extensions play in the maintenance page?
Plugins, modules, and extensions enhance the functionality of your Magento 2 maintenance page. They can be employed to add features like a newsletter subscription field, social media buttons like Instagram, or a reviews section for product feedback.
3 Can certain IP addresses still access the Magento site during maintenance mode?
Yes, Magento 2 has a feature that allows you to whitelist specific IP addresses. This way, developers can continue to work on the site or authorized users can still place orders while the maintenance page is displayed to others.
4. How do I ensure a good user experience during maintenance?
Keep your users in the loop by providing continuous updates about the service through news content and a progress bar. Ensure your page layout is responsive and aligns with your brand's theme. You can also add a touch of personalization, like a "thoughts” or “suggestions” box, to engage your users. Choosing reliable Magento hosting enhances site performance and security during maintenance, leading to an improved user experience.
5. How can I use extensions as a marketing solution on my Magento 2 maintenance page?
Magento 2 offers a variety of extensions that can serve as effective marketing tools during maintenance mode. Consider including a newsletter sign-up to capture emails or promote your products via a scrolling list. This can keep visitors engaged and informed about your services, even when you're under maintenance.
6. How can I manage my product files and order numbers during maintenance mode?
Magento 2's backend remains fully functional during maintenance, so you can continue managing product files and order numbers. You could use this time to update product descriptions, images, or stock levels or to process pending orders. It’s important to back up data before maintenance to ensure no information is lost.
7. Can I update my Magento 2 version while in maintenance mode, and how can it affect my account?
Yes, updating your Magento 2 platform version is possible during maintenance mode. It's recommended to do so to access new features and security updates. Be sure to backup your account, as the update could affect your custom themes, extensions, and configurations, ensuring a smooth transition to the new version.
Summary
The Magento 2 maintenance page is a chance to engage customers and promote your brand during downtime. Customize the page's design, use extensions, and manage your backend effectively for a positive user experience. Optimize your store's performance, security, and uptime using a trusted managed Magento hosting provider. It'll ensure smooth operations, even during site maintenance.
