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

moir · ‎08-13-2021

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

drakedev · ‎08-13-2021

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 · ‎08-14-2021

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 · ‎08-14-2021

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 · ‎08-16-2021

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

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 · ‎08-15-2021

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 · ‎08-16-2021

@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 · ‎08-17-2021

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

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

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

Community Blog Articles