How do I add a custom page id so I can make individual customizations?

Technical Q&A
1

Hi there, thank you for taking the time to read this!

I’m currently trying to figure out how to create or add a custom ID for a couple of my pages one of them specifically being the customer account login page. I believe a unique page ID will help me achieve custom header colors for these specified pages. I would then access the theme.css.liquid file and add the customizations.

My goal is to be able to unlock individual page CSS control. I hope this all makes sense and if not, please let me know! I’ll do my best to answer. I haven’t found an accurate article related to this so I figured I’d be among the first. Thank you!

I did read over this article but I’m still a bit lost on where to add these changes: https://www.shopify.com/partners/blog/92262598-creating-useful-css-hooks-in-liquid

2

The technique described in the link is already applied to some extent in most of the themes.

A specific class is added to the body tag, in order to allow specific CSS customization.

For example, suppose that you want to add customization to the account page, the specific class injected in the HTML is template-customers-login

So, if you want to color all H1 and H2 to red on you customer account page you can this code

.template-customers-login h1,
.template-customers-login h2 {
    color: red;
}

This is the concept, in short, but if you have specific needs, please explain and I will try to help.

3

To ensure that I’m understanding this correctly, the snippet I can just insert into my Templates > customers/login.liquid?
visual: https://snipboard.io/qnibPg.jpg

Something else that I find myself questioning is that the file is written in Liquid, so if I directly insert HTML, Liquid plays nice with direct HTML inserted into that file?

Thank you for getting back to me! :slightly_smiling_face:

4

No, you don’t need to add anything to customers/login.liquid, the code is already there.

Go to your fronted store https:// yourstore.com/account/ and you can check the class associated to the by using Chrome Inspector Tool.

You just need to add the customization you want to the theme.css file.

About file with .liquid extension, they play nice with HTML. In fact they are HTML files and the liquid extension only tells to the Shopify rendering engine to replace the Liquid tags with the specific code.

5

You just need to add the code at body: template-{{ request.page_type | handle }}
It will create a separate class for all templates. Ex: customer account login page => template-customers-login
Hope it helps!

6

@drakedev

Hey there, thank you for getting back to me! I find that it gives me a very generic tag which is not ideal since I only want the custom CSS to be applied to this specific page. Shown below. Example of what I see using the inspector tool on this page URL.

moir_0-1629142832969.png
moir_0-1629142832969.png852×209 22.4 KB

I originally thought this and tried this before creating this post with no luck. Came to find out that it applied the changes to all of the pages with the associated header.

I’m possibly misinterpreting what you’re stating so sorry for that in advance if so.
Thanks again for taking the time!

7

@LitExtension
I’m sorry but I’m a noob. When you say add the code at the body with the generic looking code (guessing I don’t change any of the code?), I’m not sure exactly where I should add that code? To the customer-login file or? Thank you for the response! :slightly_smiling_face: I’m doing my best to research and learn!

8

Please follow the steps:

  • Step 1: Go to Online store > Themes > Actions > Edit code.
  • Step 2: Go to layout > theme.liquid and add code: https://i.imgur.com/FIdZ4xt.png
  • Step 3: You just need to turn on Inspect of the browser to check, at each page it will display a different class for the body.
    Ex: https://i.imgur.com/KwA3IPg.png for login page.
    Hope it clear to you.