How to apply CSS to a specific element on just one page?

Spintiller · ‎03-26-2020

Can someone tell me what the css syntax is for applying css to an element on a specific page only?

If I want the h1 element on the products page to have different css than the h1 on the rest of the site what is the syntax I put at the bottom of the theme.scss.liquid to say "make h1 element blue but only on the products page".

Thanks.

oscprofessional · ‎03-26-2020

@Spintiller,

Go to theme.liquid file,

Search body tag and add below id like

<body id="{{ page_title | handle }}" >

View solution in original post

oscprofessional · ‎03-26-2020

Hello @Spintiller,

If you want to add css for product page then

add below css

.template-product {
       //your css
}

Spintiller · ‎03-26-2020

That is helpful thank you.

But I also want to be able to modify specific elements within the page.

If there are multiple sections on a page using "h1" for instance, how to I modify just one of them?

oscprofessional · ‎03-26-2020

@Spintiller,

Inspect that element and with parent class you can add css.So It won't affect anywhere.

Spintiller · ‎03-26-2020

Ok can you give me the syntax for that?

.template-product is the page

h1 is the element I want to apply the css to

It's parent class is "grid-item"

oscprofessional · ‎03-26-2020

@Spintiller,

If you use parent class is "grid-item" then it will affect everywhere in your page because this class is present in all sections.

Please share your site url so that I will give you exact solution.

Spintiller · ‎03-26-2020

It's spintiller.com pw Spintiller

Trying to modify css for "section-header" but only in this spot on the page and only on this page.

Thanks!

oscprofessional · ‎03-26-2020

@Spintiller,

This is not product page.

Its template page.You can add id to body so it will create particular id to this page then we will add css for this.

Please follow below referral link to add id

https://community.shopify.com/c/Shopify-Design/Best-way-to-add-page-specific-CSS/td-p/221691

Spintiller · ‎03-26-2020

There is no "body id" in the theme.liquid anywhere.

How do I add a "body id" to a page?

oscprofessional · ‎03-26-2020

@Spintiller,

Go to theme.liquid file,

Search body tag and add below id like

<body id="{{ page_title | handle }}" >

Spintiller · ‎03-26-2020

Great! That is what I was looking for! Thank you very much!

insanityskate · ‎05-10-2021

Hi guys, I'm new here, I created a new page on the default theme.

How do I customize that specific page with code ?

I tried to modified the code but can't find the page in the list

Spintiller · ‎05-10-2021

To add custom CSS to a specific page you need to add the ID and CLASS of the BODY section of the page to your CSS.

So if you're in DevTools, scroll to the top of your page and look for:

Then in your CSS you would add:

#id name.class name {

custom CSS

}

So it seems yours would be:

#wild-knight-vodka.template-page {

.template-index {

width: 100%;

etc...

}

If the BODY section doesn't have an ID, you can add it by going to Edit Code > theme.liquid

Find the section that starts with

(it's right after the HEAD section)

and add this right below it
<body id="{{ page_title | handle }}" >

insanityskate · ‎05-10-2021

Thank you, but as I mentioned I'm new and I really don't know where to find the <body class="class name" id="id name"> or the rest actually.

I'm in the edit code section and I see folders with lots of css in it.

If not a trouble, could you be more specific ?thank you

Or even point to a youtube tutorial is fine too

Spintiller · ‎05-10-2021

If you're looking at your website on Google and you right click a drop-down menu will appear and at the bottom is "Inspect".

Here you see the code behind the page you are viewing.

Near the top of the page you should see a tag called <body class="xxxxxx"> and <id class="xxxxx">. These are the elements you use to add css to just this page.

There are instructions in my last reply on how to add the "id class" if you don't see one.

I can give you further help if you need it. This frustrated the hell out of me when I first started.

WildKnightDist · ‎06-03-2020

Hi,

I am trying to set the image width to 100% to fill the full width of the screen on one particular page template.

I found that this is the area that affects the page width in the css:

.main-content {
margin-top: $gutter / 2;

.template-index & {
margin-top: 0;
}
}

And adding the following works but affects other pages as well.

width: 100%;
max-width: 100%;
padding: 0!important;

I wish to add this full width to the page <body id="wild-knight-vodka" class="template-page"> but cannot work out how to enter this into the css that works for that page but does not affect the others.

Appreciate any help that you can offer please.

Thanks & regards,

Matt

oscprofessional · ‎06-03-2020

Hello @WildKnightDist,

Can you please share your site url

Spintiller · ‎06-03-2020

Don't know if you got the answer for this but I struggled with this forever until I finally figured it out so I thought I'd share in case you still needed the answer.

To add custom CSS to a specific page you need to add the ID and CLASS of the BODY section of the page to your CSS.

So if you're in DevTools, scroll to the top of your page and look for:

Then in your CSS you would add:

#id name.class name {

custom CSS

}

So it seems yours would be:

#wild-knight-vodka.template-page {

.template-index {

width: 100%;

etc...

}

If the BODY section doesn't have an ID, you can add it by going to Edit Code > theme.liquid

Find the section that starts with

(it's right after the HEAD section)

and add this right below it
<body id="{{ page_title | handle }}" >

I'm using the Debut theme so I don't know if the location of the body id is the same for other themes.

Hope that helps.

WildKnightDist · ‎06-05-2020

That's great - really appreciate the reply. Thank you!

joshdane · ‎04-20-2022

I did that and my CSS shows up now, but it is crossed out with the yellow caution sign in Chrome.

Any idea how to fix that?

Spintiller · ‎04-21-2022

Can you paste the actual CSS code you added to liquid?

joshdane · ‎04-21-2022

Figured out why it isn't working. My theme doesn't use .scss which is Sass a CSS pre-processor.

So it worked, but the theme doesn't recognize it, so my css is not valid in Chrome.

chcsep · ‎01-11-2023

@Spintiller thanks, this was helpful. Can you please update which answer is accepted as a solution? Such as your 2020-06-03 reply or this one?

For the sake of people who aren't as familiar with coding, I've rewritten detailed instructions below, based on Spintiller's description above and what I found with my store when trying to add content that only appears on the Cart page. Some aspects may vary depending on what theme and apps are installed on any given store:

Visit the page you want the content to appear on
Right click near the top of the page and select "inspect"
Look for the tag that starts with "<body", which should appear near the top after after "<head>...</head>" (it might be "<body>" or it might be something like <body id="abcd" class="abcd">
1. If there is already an id and class defined in the tag (in my case, id="your-shopping-cart"), take note of that. Mine says:

<body id="your-shopping-cart" class="template-cart" ...>

- Note: If your store has multiple languages, you'll have to note the id of the body tag for each language. The class should be the same regardless of language.
- Note: If there are multiple classes (separated by spaces), you only need to use the one that is applicable to this page.
4. If your body tag does not have an id or class defined:
1. In your Shopify Admin, go to Online Store > Themes > button with "..." > Edit Code
2. On the left, select theme.liquid
3. Click in the code section and ctrl+f to search for "<body" to find the body tag
4. Change the "<body>" tag to:

<body id="{{ page_title | handle }}" class="template-{{ template | replace: ".", " " | truncatewords: 1, '' | handle }}">

- Repeat step 3 to take note of how this appears on the front end for the desired page
5. On the page, right click on the section that you want to be affected, and click "inspect"
1. In the inspector, make sure the desired tag is selected in the code viewer, then click the "computed" tab and take note of what appears for "display" (e.g. "display:block")
6. Edit the CSS page for your store:
1. Back in your code editor, on the list on the left, scroll down and expand the "Assets" folder
2. Open the one that starts with "theme" and contains "css" (e.g. theme.scss.liquid, though any global css file would do)
7. Go to the end of the CSS file (doesn't have to be the end, just a clear spot) and add the following code:

// Add a note here for future reference of what this code is intended to do
.css-class-to-hide {
  display: none;
}

#page-body-id.page-body-class {
  .css-class-to-hide {
    display: block !important;
  }
}

Where "css-class-to-hide" is the class you add to the tag on your template for the element you want to only appear on the desired page/template, e.g.

<div class="css-class-to-hide">Content to be hidden goes here</div>

Where "page-body-id" is the class element in the body tag noted in step 3.
Where "page-body-class" is the class element in the body tag noted in step 3
Where "display: block" is the default display status of the element noted in step 5 (always keep the "!important" part because this is what overrides the default hidden behaviour)
If you have multiple languages, separate multiple entries with commas, like this (the class should be the same regardless of language):

#page-body-id-language1.page-body-class, #page-body-id-language2.page-body-class {
 ...
}

8. Lastly, test to make sure that the content only appears on the page you want it to appear on.

Anyone who can't get this to work should probably hire a developer.

Cheers

How to apply CSS to a specific element on just one page?

Community Blog Articles

Shopify Community

Support

Shopify

Quick Links