Using Site Styles like a Pro
If you can avoid using Custom CSS, I say do it! This way your client can customize whatever they want when you’re long gone. That’s the whole point right? Below are the steps I take to determine whether or not I need to add Custom CSS.
1. Check Site Styles
This one is obvious, but just make sure. 😉
Mobile is a bit trickier (and fussier). TIP : If you want to customize the nav, I find that I have to leave the Site Styles, open the mobile nav, and then go back into Site Styles.
2. Use DevTools
Sometimes the Site Styles selector doesn’t work, so I use the Developer Tool (DevTools) to see what the class name is called. Typically this is how Squarespace describes it in Site Styles and Support.
Open the Developer Tool (CMD SHIFT C) and select the element.
In this example, this class is called "Product Block Product Details Product Title”.
Check Site Styles for an element with a similar name.
In this example, there’s a similar element but it’s called “Product Detail Page Item Title” (see screenshot) — so, not the same. This targets the product detail page itself and not the product block.
This class is called "Product Details Product Title”.
The only similar element is “Product Detail Page Item Title” - not what we’re looking for.
3. Check support.squarespace.com
One final check!
In this example, Squarepace explains in an article that the only way to edit a Product Block’s font styles is to change the Paragraph font’s settings.
Google “site:https://support.squarespace.com Product Details Product Title”. Using site: only searches within that website. Check the blog post to make sure and if you want to be super sure, you can always chat with Customer Support; I literally have this link as a bookmark. When I was first starting, I would chat with them almost every day!
Alrighty, if it’s not there, it’s not there! At this point, you can confidently add it to Custom CSS.