404 Page Customization Challenges - stuck on adding background & search bar

Store Design
1

Hello,

I am trying to customize my 404 page in my MINIMAL theme.

I want to remove the footer and add a background image, search bar and text. Currently I’m stuck.

Below is what I have done so far and I have wound up with a lot of nothing. I’m not sure where I have gone wrong so any help greatly appreciated.

Here is what I’ve done:

*duplicated my store; added theme.404-layout.liquid

*entered the code below to 404.liquid to link that to the new theme.404-layout.liquid :

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

{{ 'general.404.subtext_html' | t: link: routes.all_products_collection_url }}

{% layout "404-layout" %}

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

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

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

At the bottom of the 404-layout.liquid I added this code:

footer { display:none; }

At the bottom of theme.scss.liquid I added my image:

#custom-404-page {
background-image: url(“https://cdn.shopify.com/s/files/1/0570/1474/7276/files/404PAGEIMAGE.jpg?v=1644947421”);
}

My store is https://www.TheWaterCanShop.myshopify.com

Password is ahdohy

2

@Linnea641

sorry but your store doesn’t work how can i check and help you?

3

Hello @Linnea641 move the layout tag to the top of the file.

https://www.shopify.com/partners/blog/best-404-pages

https://www.shopify.com/partners/blog/84342470-the-power-of-alternate-layout-files-in-shopify-theme-development

4

Hi Paul

I placed the code below at the very top of the 404.liquid page - is that correct placement? Also the code highlighted in purple gives me an error code. (I have been working off this tutorial by Liam Griffin: https://www.shopify.com/partners/blog/best-404-pages ).

{% layout “404-layout” %}

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

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

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

thanks!

Lynda

https://www.TheWaterCanShop.myshopify.com

password: ahdohy

5

Hello @KetanKumar ,

Below is the code I put in my 404.liquid page so far. I need help with the following:

*make the type white and the link for “Home” a non-white color and place in center of page

*remove the header, nav bar and footer

*make the image fill the whole page — so far everything looks wonky when it renders. thank you! Lynda

https://www.TheWaterCanShop.myshopify.com

password: ahdohy


  

    # Oops, looks like we're lost in the plant jungle...
    # Let's get back Home

Here is what I want that page to look like:

tha

404PAGEMOCKUP1 copy.jpg
404PAGEMOCKUP1 copy.jpg800×450 114 KB

1 Like
6

@Linnea641

thanks for suggestion add

but sorry i can’t see your store

KetanKumar_0-1645296729238.png
KetanKumar_0-1645296729238.png1920×1080 125 KB

7

password: ahdohy

8

@KetanKumar

I added a transparent image instead. I have everything coded, except the image I have now is in the wrong position.

I want it to be below the text. Can you help me with that?

https://www.TheWaterCanShop.myshopify.com

password: ahdohy

thanks!!

Lynda

P.S. Here is what i have:

LyndaH1_0-1645298884156.png
LyndaH1_0-1645298884156.png1920×1040 348 KB

9

or anyone? thank you!

1 Like
10

@Linnea641

thanks for all

but sorry i can’t i think you have blocked my country

11

I’m sorry, I have not blocked any countries. how would I unblock?

12

@Linnea641

oh sorry for that i don’t know for your store app details

1 Like
13

@KetanKumar

I just emailed you

14

Yes,

15

Hi there,
shop is:
https://www.TheWaterCanShop.myshopify.com

password is: ahdohy