Hello!
I would like to replace the 404 text with an image. Is that possible? I tried adding an image banner on the 404 page but it just looked way too big. I’m using the colorblock theme.
Topic summary
A user wants to replace the default 404 error text with a custom GIF image while avoiding issues with sizing and padding.
Initial Problem:
- Adding an image banner section caused the image to become too large
- Unwanted padding appeared at top and bottom
- Uncertainty about centering the image properly
Solution Provided:
Another user shared custom CSS code to be added to the image-with-text section:
- Hides the text portion using
display: none - Centers content with
justify-content: center - Controls image size with a width property (200px suggested, adjustable)
- Option to remove width constraint to maintain original image dimensions
Outcome:
The CSS solution successfully resolved the issue, allowing the GIF to display at the desired size without excessive padding.
What Image do you want to add?
In the customizer, you can select the “404 Page” and edit it just like you would edit any other page.
This gif.
I’d prefer the image stays smaller and doesn’t get blow up like it does with the image banner section. I tried image with text too but I’m not sure how to center the image and I don’t like all the padding the section has on the top and bottom.
Save it like this, and share a preview link. I’ll share the CSS code you’ll need to center and style it correctly.
https://ervc2tvz9evg3yux-89464668454.shopifypreview.com
Thank you so much! Its a minor thing but I love the small attention to details on websites.
Awesome thanks!
In the image-with-text section, add this code to the Custom CSS at the bottom.
.image-with-text__text-item {
display: none;
}
.image-with-text__grid {
justify-content: center;
}
.image-with-text__media-item {
width: 200px;
}
If you want to keep the original image size, remove the last portion. Or adjust the width to adjust the image size.
Thank you so much! That worked perfectly 