Jump to content

How to target specific page?

Recommended Posts

Hi,

I'd like to target a specific page or untarget a specific page (using :not() css), and WOW, the most simple thing to do with any other website builder, cms, whatever, seems to be something almost impossible with Squarespace.

So, I have a very very simple Squarespace E-commerce website with only the shop page, and I made almost no custom modification that could break anything (only a couple of lines of global css) :

1. I have categories for my products with a little navigation on the top left.

2. The page that shows all the product, is the Homepage, and the other category pages are single category page that displays products of that specific category.

3. On all of these pages there is a "homepage" class on the body, tho, the single category pages ARE NOT homepage! Are they?.

4. How do I target the homepage or, in other words, the page that shows all the product, in css? It seems to be strictly impossible to target specific page in Squarespace, how come? That should be a basic requirement!

5. I read that there should be a unique ID on the body (it also appears as a css class), something like "collection-6600245ce71de66d97faf271", but it's the same on all the shop pages.

  • Why is this unique ID, super long number, that doesn't mean nothing for nobody, strategy is used, and seem to be the "go to" solution for 75% of the answer on this forum. Seriously!?
  • Why there is not a way to simply target specific page?
  • Are they front-end developers working at Squarespace?
  • How do I target a specific page, I need a class name on the body that is different FOR EACH PAGE and TYPE OF PAGE.
    • if category : .category .category--categoryname or .category--all
    • if homepage : .page page--homepage
    • Something that make sense! Something Basic, Something simple! Something that would avoid hundreds of questions on the forum, about the same subject!
  • Do I really need javscript to solve that problem? COME ON!

6. I'd like to add a class on block, also impossible, the only class added to that block by Squarespace is "content-wrapper" wow, wonderfull, what can I do with that kind of class name!

What a frustration!

 

Link to comment
  • Replies 3
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

To apply code on One Page, you can

  • add code to Page Header Code Injection
  • or
  • add code to Code Block
  • or
  • add code to Markdown Block
  • or target Page ID
  • or
  • Use JavaScript code to attach a short ID to page, then you can target it.

 

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Sure, what is the Page ID? On which element of the page is the page ID set?

1. How, adding code to Page Header Code Injection will help me to target a specific page, HOW?

  • I already used the Page Header Code Injection and IT INJECTS THE SAME CODE ON ALL THE PAGES ON MY WEBSITE, and it injects inside the <head>, it is used to add stuff in the <head>, not to target a page.

2. I'm not asking how to apply code to one page but how to target a specific page, and looks like that my homepage/shop page with all my products is the same page as the category page (same ID). So even if I was applying code to one page it will be applied to my other category pages.

3. On my page shop (the one that shows ALL the products ), how do I :

  • add code to Page Header Code Injection, without injecting the same code on all the pages?
  • or
  • add code to Code Block - What for? If I add code block to my homepage that displays all the products, the same block will be added to the category page, I'm actually trying to hide a content block from the category page that has been added on the homepage/shop page.
  • or
  • add code to Markdown Block - What for? same as previous point.
  • or target Page ID - WHERE, What is the page ID of my homepage that display all the products? will it be different than the category pages? because so far I have this ID on my homepage shop (https://tulip-turkey-6psh.squarespace.com/?p) : collection-6601a862ba2fe81a40f1e6f8 and the exact same ID on my category pages (https://tulip-turkey-6psh.squarespace.com/shop/prints?p) : collection-6601a862ba2fe81a40f1e6f8. That's the problem!
  • or
  • Use JavaScript code to attach a short ID to page, then you can target it. - NO NO NO -> ONLY BAD DEVELOPERS DO THAT, I WILL NOT DO DIRTY TRICKS. and what would I do? target the URL? That can't be a solution, only bad developers can advice doing that!

Here is my home page :Screenshot2024-03-28at21_42_24.thumb.png.f1276e851f334fb58b0825cd4bfc3e9d.png

 

Here is my category page :

Screenshot2024-03-28at21_42_34.thumb.png.9a5d7d4425991583a443537b55bfd028.png

 

Those 2 pages have the exact same ID (collection-6601a862ba2fe81a40f1e6f8)

The intro block has been added to the homepage, but is showing on the category page as well. I would like to only show that intro text block on the homepage/shop page. I re-ask the same question, is it possible to target the category pages, so I can hide that block in css?

Thank you.

Link to comment

If you know HTML/CSS it's very simple, but if you don't, it's difficult to explain. You should describe the problem you want to solve, then we can provide the exact code for your case.

If your problem is, you can share page url, we can check easier

image.thumb.png.3c87fdc49b2d44cedffe05044e7568b3.png

and the site need password

image.png.74619ee9e197c54d6701126ce4c2b23b.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.