How do I add an image to my 404 page?

Solved

How do I add an image to my 404 page?

punkinpancakes
New Member
4 0 0

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.

 

Screenshot 2024-09-01 020248.png

Accepted Solution (1)
HazilStudiosNYC
Shopify Partner
139 23 27

This is an accepted solution.

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.

Flo | Co-Founder and CEO; Hazil - Shopify Mentorship
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
-
Want fast help? Chat with me

View solution in original post

Replies 7 (7)

WalkYourStyle
Trailblazer
441 54 78

What Image do you want to add?

punkinpancakes
New Member
4 0 0

This gif.ceogeddbamxxbhrluxhh3io3ayuc.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. Screenshot 2024-09-01 134359.png

 

HazilStudiosNYC
Shopify Partner
139 23 27

Save it like this, and share a preview link. I'll share the CSS code you'll need to center and style it correctly.

 

Flo | Co-Founder and CEO; Hazil - Shopify Mentorship
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
-
Want fast help? Chat with me
punkinpancakes
New Member
4 0 0

https://ervc2tvz9evg3yux-89464668454.shopifypreview.com
Thank you so much! Its a minor thing but I love the small attention to details on websites.

HazilStudiosNYC
Shopify Partner
139 23 27

This is an accepted solution.

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.

Flo | Co-Founder and CEO; Hazil - Shopify Mentorship
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
-
Want fast help? Chat with me
punkinpancakes
New Member
4 0 0

Thank you so much! That worked perfectly 🙂

HazilStudiosNYC
Shopify Partner
139 23 27

In the customizer, you can select the "404 Page" and edit it just like you would edit any other page.
Screenshot 2024-09-01 at 1.43.07 PM.png

Flo | Co-Founder and CEO; Hazil - Shopify Mentorship
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
-
Want fast help? Chat with me