Shopify themes, liquid, logos, and UX
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.
Solved! Go to the solution
This is an accepted solution.
Go to theme.liquid file,
Search body tag and add below id like
<body id="{{ page_title | handle }}" >
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?
This is an accepted solution.
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 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:
<body class="class name" id="id name">
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
<body class="template-{{ request.page_type | handle }}">
(it's right after the HEAD section)
and add this right below it
<body id="{{ page_title | handle }}" >
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
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.
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
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:
<body class="class name" id="id name">
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
<body class="template-{{ request.page_type | handle }}">
(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.
That's great - really appreciate the reply. Thank you!
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?
Can you paste the actual CSS code you added to liquid?
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.
@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:
<body id="your-shopping-cart" class="template-cart" ...>
<body id="{{ page_title | handle }}" class="template-{{ template | replace: ".", " " | truncatewords: 1, '' | handle }}">
// 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;
}
}
<div class="css-class-to-hide">Content to be hidden goes here</div>
#page-body-id-language1.page-body-class, #page-body-id-language2.page-body-class {
...
}
Anyone who can't get this to work should probably hire a developer.
Cheers
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024