How to add css to a specific page (404)

Shopify Discussion
1

Hey there,

I am playing a bit around with the 404 page.

I have a 404.json and 404-template.lquid file and I want to add this walking man below the text/ image I have.

https://codepen.io/Paolo-Duzioni/pen/zPrqQy

It would be below code.

I tried by copy and paste to add it here and there but I got always an error. I guess I pasted it at the wrong position.

Can you advise? Thank you

// Walking Man
.sleep-walker{
position: relative;
height: 1px;
margin: 5rem 0 3rem;
background-image: repeating-linear-gradient(
to left,
transparent 0,
transparent .12rem,
rgba($black, .15) .125rem,
rgba($black, .15) .25rem
);
}
.man {
position: absolute;
top: -1.4rem;
left: 0;
width: 1px;
height: 2rem;
opacity: .6;
transform: scale(.5);
animation: walking 50s linear infinite;
.head {
position: relative;
width: .5rem;
height: .5rem;
transform: translateX(-1px);
border: 1px solid $black;
border-radius: 50%;
&::before {
content: ‘’;
position: absolute;
top: .28rem;
left: 0;
width: 170%;
height: 1px;
background: $black;
transform-origin: 0% 0%;
transform: rotate(-25deg);
}
}
.torso {
position: relative;
width: 1px;
height: 50%;
margin: 0 auto;
background: $black;
.arm-a, .arm-b{
position: absolute;
top: 10%; left: 0;
width: 100%;
height: 85%;
transform-origin: top center;
background: $black;
&::before {
content: ‘’;
position: absolute;
bottom: -.1rem;
left: 0rem;
width: .18rem;
height: .18rem;
border: 1px solid $black;
border-radius: 50%;
}
}
.arm-a{
transform: rotate(-20deg);
animation: walk1 1.3s linear alternate infinite;
}
.arm-b {
transform: rotate(20deg);
animation: walk2 1.3s linear alternate infinite;
}
}
.legs {
position: relative;
width: 1px;
height: 50%;
margin: 0 auto;
.leg-a, .leg-b{
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
transform-origin: top center;
background: $black;
&::before{
content: ‘’;
position: absolute;
bottom: 0;
left: 0;
width: 4px;
height: 1px;
background: $black;
}
}
.leg-a {
transform: rotate(-20deg);
animation: walk1 1.3s linear alternate infinite;
}
.leg-b {
transform: rotate(20deg);
animation: walk2 1.3s linear alternate infinite;
}
}
}

@keyframes walking {
0%{
left: 0;
transform: scale(.5) rotateY(0deg);
}
49.9%{
transform: scale(.5) rotateY(0deg);
}
50%{
transform: scale(.5) rotateY(180deg);
left: 100%;
}
100%{
transform: scale(.5) rotateY(180deg);
left: 0;
}
}

2

one more question.

Another thing in the 404 page is, that I want to link back to the homepage again. But I cant find it in the theme editor as a selection under button link.

The code looks like this:

“button_label”: “Home”,
“button_link”: “shopify://collections”,

“button_label”: “Home”,
“button_link”: “shopify://home”, → doesnt work..

Can you help?

3

Hey @DaveD
You can add CSS to a specific page only through this coding template

{% if page.handle contains 'YOUR PAGE URL AFTER /PAGES/' %}
      
   {% endif %}

Replace YOUR PAGE URL AFTER /PAGES/ with whatever your page url is,

For example if your page URL is: mywebsite.com - This website is for sale! - mywebsite Resources and Information.

then you’ll only add 404-error in the code

4

@Moeed Thank you for the fast reply but I dont get it.

Where do I add the programming part which u mentioned? I need to select one of the files in the editor or? So do i take the 404.json file?
As you can see I am a beginner… maybe I shouldnt play around with those functions yet :grin:

5

Send me your 404 page link

6

First, add the following HTML code to your 404-template.liquid file, right below the text/image you want the walking man to appear under:

Then, you need to add the CSS styles for the walking man. Since the provided CSS uses SCSS variables, you will need to replace the $black variable with an actual colour value, like #000 for black.

Here’s the updated CSS with the colour value replaced.

/* Walking Man */
.sleep-walker {
  position: relative;
  height: 1px;
  margin: 5rem 0 3rem;
  background-image: repeating-linear-gradient(
    to left,
    transparent 0,
    transparent .12rem,
    rgba(0, 0, 0, .15) .125rem,
    rgba(0, 0, 0, .15) .25rem
  );
}

To create a button that links back to the homepage on your 404 page, you can simply use an absolute URL (“/”) as the value for the button_link. This will direct users back to your store’s homepage when they click the button.

Here’s the updated code with the correct link:

"button_label": "Home",
"button_link": "/",

However, if you want to maintain the shopify:// URL format, you can use shopify://pages/home as the value for the button_link. This should also direct users back to the homepage.

"button_label": "Home",
"button_link": "shopify://pages/home",

Note that if you are using a JSON template for your 404 page, you might need to update the corresponding Liquid file (404-template.liquid) to ensure the correct link is used.

Locate the button element in the Liquid file and make sure it uses the button_link value for the href attribute, like this:


  {{ section.settings.button_label }}

Ensure that you replace your-button-class with the actual class (or classes) used for your button styling.