knollgrind Posted October 3, 2023 Posted October 3, 2023 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
knollgrind Posted October 6, 2023 Author Posted October 6, 2023 Bumping this. Anyone know a solution?
Lesum Posted October 6, 2023 Posted October 6, 2023 @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! knollgrind and nbd1570048695 2 If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee?
knollgrind Posted October 6, 2023 Author Posted October 6, 2023 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 Lesum 1
Thumbcandy Posted July 15 Posted July 15 (edited) Hi there This forum and specifically this thread has been very helpful to me, in getting close to what I need for my website. But I have a remaining technical issue, and also some problems with matching styles and I wonder if someone could help please. I wanted to add two things to the product page here: https://www.ultra-magazine.com/shop/ultra-issue-19 I sell paper magazines from the site, but I have just introduced a digital alternative via issuu.com. So my intention was to have two separate sections in each new product page from issue 19 onwards, in order as follows: Heading: Issue 19 Bold text: Buy Print Small text: £11.99 Standard quantity selector: Quantity: Small text: description of print product <button>PURCHASE Bold text: Buy Digital Small text: £5.99 Small text: description of digital product <button>PURCHASE Normal text: sales text describing my magazine My first problem is to add the text "Buy Print" after the first heading and before the £11.99 price. I researched and created some custom code to add the text, as follows: /* Text Before Price */ .product-price:before{ content: "Buy Print\a"; font-family: 'freight big pro'; font-size: 30px; font-weight: 300; font-style: normal; line-height: 2; display: block; } The result of this, though, is that this text also appears in the main store page https://www.ultra-magazine.com/shop on every product, and that's incorrect as only one specific product has the digital alternative. Is there a way that you can advise for me to target only the product page, and not the store page with all products on it? I tried isolating using the item ID as above, which I think is 66945ee35cca6d529bc81788 for the page, but my coding skills are only just starting so I probably am doing something wrong - as it doesn't work! Also, styles are a problem. The "Buy Print" font doesn't match the "Buy Digital" heading further down, even though I think it should as they both seem to be the same specification. Is there a way of matching this font through CSS tags to the font used by the theme? I would appreciate anyone's help in trying to sort this out. 🙂 Andy Edited July 15 by Thumbcandy
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment