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

moir
Shopify Partner
7 0 0

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

 

 

Replies 7 (7)

drakedev
Shopify Partner
685 148 228

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

<body class="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.

If my answer was helpful click Like to say thanks
If the problem is solved remember to click Accept Solution
Shopify/Shopify Plus custom development: You can hire me for simple and/or complex tasks.
moir
Shopify Partner
7 0 0

To ensure that I'm understanding this correctly, the <body class="template-customers-login"> 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! 🙂

drakedev
Shopify Partner
685 148 228

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

If my answer was helpful click Like to say thanks
If the problem is solved remember to click Accept Solution
Shopify/Shopify Plus custom development: You can hire me for simple and/or complex tasks.
moir
Shopify Partner
7 0 0

@drakedev 

Hey there, thank you for getting back to me! I find that it gives me a very generic <body> 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

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!

LitExtension
Shopify Partner
4860 1001 1124

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!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
moir
Shopify Partner
7 0 0

@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! 🙂 I'm doing my best to research and learn!

LitExtension
Shopify Partner
4860 1001 1124

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.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify