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.