In this blog post, we’ll guide you through setting up a custom error or maintenance page in Fastly CDN for your Magento 2 store.
For Adobe Commerce stores with Fastly CDN, creating a custom error or maintenance page ensures downtime looks professional and branded. Fastly, Adobe’s preferred CDN partner, allows customization of error responses via its powerful configuration tools.
When is the custom page shown?
A 503 error from Fastly means something went wrong, and the message “Service Unavailable” shows up by default. This can confuse customers and looks plain. To improve this, you can create a custom 503 error page with a friendlier design or message.
In the following scenario fastly shows the 503 error or maintenance page:
- If the backend (origin) returns an error with a status code over 500.
- If the backend is down, unhealthy, or times out.
In Adobe Commerce on cloud infrastructure, you can adjust specific Fastly response pages to better communicate with your users during certain events.
Here’s what you can customize:
Server Errors (500 or Higher): These occur during internal server issues, timeouts, or when your site is down for maintenance. You can design a custom error page to explain the problem and reassure visitors with an expected resolution time or alternative contact options.
WAF Blocking Events (403 Forbidden): This happens when the Web Application Firewall (WAF) blocks requests that seem suspicious or harmful. You can create a custom page to inform users why their request was denied and guide them on what to do next.
How to Set Custom Maintenance Page in Fastly CDN
To set custom Error page, go to:
- Log in to the Admin.
- Select Stores > Settings > Configuration > Advanced > System.
- In the right pane, expand Full Page Cache > Fastly Configuration > Custom Synthetic Pages.
- Click on the set HTML and add the HTML code, you can refer below example.
- After adding HTML Code, Click on Update button.
- Click on Save Config at the top of the page to save the updated configuration file.
- Go to the Cache Management page, select Flush Magento Cache.
Example Code for Custom Maintenance Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>503 Service Unavailable</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background: #f9f9f9;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
color: #333;
}
.container {
text-align: center;
padding: 20px;
}
.container img.error-image {
max-width: 300px;
margin: 20px 0;
}
.container h1 {
font-size: 3rem;
color: #ff5f5f;
}
.container p {
margin: 10px 0;
font-size: 1.2rem;
color: #666;
}
.buttons {
margin-top: 20px;
}
.buttons a {
display: inline-block;
margin: 5px;
padding: 10px 20px;
font-size: 1rem;
text-decoration: none;
color: #fff;
background: #333;
border-radius: 5px;
transition: background 0.3s ease;
}
.buttons a:hover {
background: #ff5f5f;
}
@media (max-width: 768px) {
.container h1 {
font-size: 2.5rem;
}
.container p {
font-size: 1rem;
}
.buttons a {
font-size: 0.9rem;
padding: 8px 15px;
}
.container img.error-image {
max-width: 200px;
}
}
</style>
</head>
<body>
<div class="container">
<img src="error.webp" alt="Server Issue" class="error-image">
<h1>Server Issue</h1>
<p>We're experiencing technical difficulties. Please check back soon.</p>
<div class="buttons">
<a href="javascript:history.back()">Go Back</a>
<a href="/contact">Contact Us</a>
</div>
</div>
</body>
</html>
Output of Custom Maintainance Page
Now when Fastly returns 503 error, instead of default error page your custom maintenance page will be shown like below.
Tips for Custom Error Pages
- Be Informative: Let customers know why your site is down and when to expect it back.
- Add a Contact Option: Include customer service links for urgent queries.
- Test Before Deployment: To ensure your page renders correctly across devices.
Frequently Asked Questions
No, Fastly requires a static HTML page since it serves the page directly from its cache.
Use status code 503 (Service Unavailable) and include a Retry-After header to inform search engines when to check back.
Simply click on Remove HTML from the configuration page from where you set the maintenance page.
Yes, simulate a condition in Fastly to trigger the custom page for specific IPs or environments.
By following this guide, you’ll ensure your store maintains a professional appearance, even during maintenance or unexpected errors.
Let me know in the comments if you are having any queries.
If you love this tutorials, feel free to share with colleagues or bookmark this to visit later.
If you are interested in receiving snippets for enhancing your Magento 2 skills, don’t forget to subscribe to my newsletters for amazing tutorials at https://jigarkarangiya.com/newsletter/
Thank you
Reference Links:
You may also like,
Magento 2: How to Apply Patch?
Leave a Comment