CSS for a specific page

Solved
Highlighted
Tourist
40 0 1

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.

0 Likes
Highlighted

Hello @Spintiller,

If you want to add css for product page then

add below css

.template-product {
       //your css
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
40 0 1

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? 

0 Likes
Highlighted

@Spintiller,

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

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Tourist
40 0 1

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"

0 Likes
Highlighted

@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.

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
40 0 1

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!

 

Untitled.png

0 Likes
Highlighted

@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 

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
40 0 1

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

 

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

0 Likes
Highlighted

Success.

@Spintiller,

Go to theme.liquid file,

Search body tag and add below id like

<body id="{{ page_title | handle }}" >
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes