How can I add an image to my 404 page using HTML?

Technical Q&A
1

Hi anyone, I’m trying to add an image to my 404 page, but I don’t really know HTML and I forgot where to add quotations or closes to the code (sure I’m explaining incorrectly)

I’ve already saved the image to my assets which is where I’m sourcing my image from. (If there’s a better way to do this as well, let me know.) After playing around with it I got the page to take off the broken image display to a picture that says no image.

Here’s what I have…

{{ 'general.404.title' | t }}

{{img src="asset_url | img_tag (cutie-OOPS.jpg)"; /}}

{{ 'general.404.subtext' | t }}

{{ 'general.404.link' | t }}{% include 'icon-arrow-right' %}

2

Hi @ChelsChels ,

To display your image you will need to change the image code to this:

<img src="{{ 'cutie-OOPS.jpg' | asset_img_url: '600x' }}" alt="Houston we have a problem the page could not be found">

The 600x controls the size of the image. The alt text is optional.

1 Like
3

Thank you SO MUCH it worked perfectly.

4

Hi

But where do I have to insert it? :tired_face: My code looks like this:

{
“sections”: {
“main”: {
“type”: “main-404”,
“settings”: {
“overlay_color”: “#ffffff”,
“overlay_opacity”: “0.35”,
“number_size”: “200”,
“subtitle”: “Oops … it looks like there was a typo somewhere!”,
“subtitle_size”: “16”,
“text_color”: “#232323”,
“btn_bgc”: “#232323”,
“btn_txtc”: “#ffffff”,
“btn_bdc”: “#232323”,
“btn_bgc_h”: “#ffffff”,
“btn_txtc_h”: “#232323”,
“btn_bdc_h”: “#232323”,
“btn_link_1”: “/”,
“btn_text_1”: “Return to Store”,
“btn_link_2”: “shopify://collections/all”,
“btn_text_2”: “Shop the Collections”
}
}
},
“order”: [
“main”
]
}

Please help!