Re: CSS for a specific page

Solved

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

Spintiller
Excursionist
54 0 7

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.

Accepted Solution (1)
oscprofessional
Shopify Partner
16116 2409 3125

This is an accepted solution.

@Spintiller,

Go to theme.liquid file,

Search body tag and add below id like

<body id="{{ page_title | handle }}" >
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free

View solution in original post

Replies 22 (22)

oscprofessional
Shopify Partner
16116 2409 3125

Hello @Spintiller,

If you want to add css for product page then

add below css

.template-product {
       //your css
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Spintiller
Excursionist
54 0 7

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
Shopify Partner
16116 2409 3125

@Spintiller,

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Spintiller
Excursionist
54 0 7

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
Shopify Partner
16116 2409 3125

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Spintiller
Excursionist
54 0 7

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

oscprofessional
Shopify Partner
16116 2409 3125

@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 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Spintiller
Excursionist
54 0 7

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

 

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

oscprofessional
Shopify Partner
16116 2409 3125

This is an accepted solution.

@Spintiller,

Go to theme.liquid file,

Search body tag and add below id like

<body id="{{ page_title | handle }}" >
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Spintiller
Excursionist
54 0 7

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

insanityskate
New Member
4 0 0

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
Excursionist
54 0 7

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 }}" >

insanityskate
New Member
4 0 0

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
Excursionist
54 0 7

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
Visitor
2 0 0

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
Shopify Partner
16116 2409 3125

Hello @WildKnightDist,

Can you please share your site url

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Spintiller
Excursionist
54 0 7

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.

 

 

 

 

WildKnightDist
Visitor
2 0 0

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

joshdane
Shopify Partner
33 0 22

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

Screen Shot 2022-04-20 at 8.19.21 PM.png

 

Any idea how to fix that?

Spintiller
Excursionist
54 0 7

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

joshdane
Shopify Partner
33 0 22

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
Shopify Partner
80 3 36

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

 

  1. Visit the page you want the content to appear on
  2. Right click near the top of the page and select "inspect"
  3. 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