Hi There, have read MANY posts on this but they were old so suspect things might’ve have changed.
How do I get the page URL handle to show as a body class?
This doesn’t work…
When the page renders, I see the page title and the template name but no handle.
Does anyone know of a way to get basic CSS hooks onto the body?
Any help would be much appreciated. Cheers, Ben
Probably want to use request.path
https://shopify.dev/api/liquid/objects/request#request-path
When in doubt reference the language
https://shopify.dev/api/liquid/objects/page_title
https://shopify.dev/api/liquid/filters/handleize
Beyond that add better detail to drastically improves chances of better solutions:
Provide an example of the text entered. What is entered in the page title and what is expected.
Provide an example of the OUTPUT. not just the liquid input but the rendered body class.
If existing posts solutions are not working provide an example of those posts.
So it increases the chances those posts get a proper solution or way to fix bugs.
Thanks for the reply. Firstly, go easy, I’m not a developer.
Secondly, I found the API docs but they don’t show examples because it’s reference, so if you’re just a lowly merchant/designer, they’re not particularly helpful.
I’m also not 100% sure what you mean by “Provide an example of the text entered” and “What is entered in the page title and what is expected” because I added the exact code as entered in my theme into the question and I was simply expecting to see the page handle along with the title and template. Nothing complicated - right?
Again, this is the code and while the title and template output, the handle does not…
But incase this is confusing, here is the rendered class for the blog collection page…
But I was expecting to see “news” after the title because it’s the handle…
And here are some posts I found. Although, only the first links was helpful so I’m not sure how much value there is in making this question look more complicated than it needs to be.
https://community.shopify.com/c/shopify-design/css-for-a-specific-page/td-p/689112
https://community.shopify.com/c/shopify-design/changing-css-to-a-specific-page-only/td-p/783963
https://community.shopify.com/c/technical-q-a/css-to-target-a-specific-section/td-p/1276709
https://community.shopify.com/c/shopify-design/need-css-to-target-a-specific-collection/td-p/1631722
https://community.shopify.com/c/shopify-design/target-a-specific-sections-content/td-p/1689847
Not sure why the example from others posts didn’t work but I found an slightly different example on Stack Overflow and this works to output the page title, then page handle, then template…
Hope that helps someone.
Recently found a better way of doing all this here: Creating Useful CSS Hooks in Liquid - Shopify New Zealand
For my own reference, this gives a range of body id and class hooks…
Which renders like this on pages…
And the home page renders as “index” like this…