Need Help Targeting CSS for Specific Product - Not All Product Detail Pages

Hi, I am extremely new to CSS and realize some of the code on my site might be a little unconventional.

I am looking for a way to target specific product detail pages, NOT every single product detail page, to essentially have the ability to have a different product detail layout for every single product. I don't actually want them to look radically different or anything, but I am needing this as a workaround for the limited default font customization and background image options with product detail pages.

I am using imported text images in my product detail pages to get the desired font effect. However, I want to be able to have a different background image for all of them so that I can do this font work for each different product title. Here is how my first product page looks.

The "As Spoken Black Phonograph Record" text is an inserted background image for .ProductItem-details-title, and was not / cannot (to my knowledge) be created within the product detail page customization. As far as I am aware, this font work WOULD be possible on just about any other text block on the site, except for product detail pages since Squarespace does not allow you to edit the HTML on those. I could be totally wrong, I literally have never coded until a few days ago.

Here is the code I used to do this.

section[data-section-id="65163a66aa6e0a29d8745d53"]

{.ProductItem-details-title  {

  font-family: 'Americanus Italics' !important;
  font-size: 0px !important;
  background-image: url(my image URL);
  background-size: contain;
    background-repeat: no-repeat;
  background-position: center;
  padding-top: 100px;
    padding-bottom: 100px;
}
}

Here is the link to the product. Hopefully this is available for you guys.

https://pomegranate-trombone-sp9x.squarespace.com/shoppe/p/vf744cp16prrzi7hrsgsnkxsr0chrl

Please forgive me if this code is ugly. The font is at 0px so that I could just have the image there instead but still have the padding from where the font would be, I'm sure there's a better way to do that. Anyway, I am hoping to find a way to have this code / URL image applied ONLY to this product detail page as I will need different image text for the others. That is what I was trying to do with the section ID code at the start, but I realized that section ID is for my whole shop anyway and I can't find some kind of specific ID that applies only to the individual product pages.

I think I saw somewhere that you can customize the CSS better if you don't use the Squarespace product blocks and instead build them yourself from an empty page (I don't really understand this anyway) but the store will be high traffic upon completing construction and I would rather be able to do it in a simpler, integrated way with maintained business functionality.

Any help is much appreciated, thank you!

James

A complete novice

Bumping this. Anyone know a solution?

@knollgrind Each product details page has its own unique ID. The product page you shared has this ID: '#item-651a2f09e2260e38d2e5d5a5'. So, instead of using the section ID, if you use the product page ID, it would resolve the issue. I recommend using this Google Chrome extension to easily find these IDs on any page: https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

After installing the extension, when you visit any product page, simply click on the extension icon, and it will display all the IDs. Then, you can click on the ID at the top left corner of the page to copy it and replace the section ID in your code. Let me know if you need assistance in locating the product page IDs. Thanks!

Dude, thank you so much! Swapping the section ID with the item ID worked perfectly. I had been using the ID finder extension for just about everything, but I just looked closely and when using the ID finder, the item ID only comes up at the top left of the product detail page. I had seriously just been scrolled too low on each page to see it.

If anyone else needs help with this and is as unskilled as me, the tag comes up in yellow color only when you are on the product detail page itself. It will not appear in your shop grid over the item.

You saved me a big headache. I really appreciate it!

James