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.
Hello @Spintiller ,
If you want to add css for product page then
add below css
.template-product {
//your css
}
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?
Inspect that element and with parent class you can add css.So It won’t affect anywhere.
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”
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.
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!
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
There is no “body id” in the theme.liquid anywhere.
How do I add a “body id” to a page?
Go to theme.liquid file,
Search body tag and add below id like
<body id="{{ page_title | handle }}" >
Great! That is what I was looking for! Thank you very much!
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 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
Hello @WildKnightDist ,
Can you please share your site url
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
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.
That’s great - really appreciate the reply. Thank you!
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
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
Thank you, but as I mentioned I’m new and I really don’t know where to find the 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
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 and . 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.
