How to make your Squarespace site look like you (and not a Squarespace template)

 
Having your own website is great, but there’s no point if it just looks like a Squarespace template! Here are my 4 tips for customizing your Squarespace site. Click through to get the tips!

After reading this post, you’ll understand the 4 places that you can change the style of your Squarespace template, plus, some easy customizations that you can make to differentiate your Squarespace site from others.

First, some basics:

What is CSS anyway? It stands for Cascading Style Sheets, and it’s the type of code that you use for styling up your site. When you’re adjusting styles in the Squarespace Style Editor, you’re affecting the CSS (cool, huh?).

There are essentially 3 places that you can add custom CSS in your Squarespace site (aside from using the Style Editor). And I’m listing these in order of best practices:

  1. In the Custom CSS tab under the “Design” menu.
  2. In the header of an individual page (by clicking the gear icon next to that page and then selecting the “Advanced” tab on the right).
  3. On the page within a Code Block.

Why use custom CSS?

Well, you can’t customize every element via the Style Editor. So, to get more unique details and customizations, you might want to use some custom CSS. Here are just a few Squarespace elements that are especially good for styling with custom CSS:

Bullet Points

  • The Squarespace Style Editor doesn’t give us ANY way to customize bulleted lists. We can either choose to have the traditional bullet “•” or a numerical one. But, by using a custom bullet image, we can differentiate our sites, inject brand personality, and delight our visitors.
  • You can see from these examples that, by adding in a custom bullet icon, we can break up blocks of text and add visual interest (as well as brand personality).
You can see how, by adding in custom graphics in place of the standard bullet points in your Squarespace template, you can make your content much more engaging.

Custom Fonts

  • Although Squarespace does offer a wide range of fonts (and 90% of the time I stick to these pre-loaded font options), sometimes you want to include an accent font.
  • The reason that you’d add in the font, rather than upload images of text, is because:
    • First, images slow your page load speed much more than text
    • Second, Google bots can’t read image files and so text is going to boost your SEO more.
  • For example, this client had a handwritten accent font she wanted to include on her site, so I added it in the custom CSS panel:
Here's an example of adding a custom font to make your website stand out from all the other Squarespace templates.

FAQs

  • Having expandable and collapsible blocks of text works wonders for large FAQ sections on sales pages:
  • *This requires jQuery (or vanilla javascript) as well as CSS, so it’s a bit more advanced.
The FAQ section is a simple way to customize the Squarespace "markdown block" to behave like an accordion.

Forms 

  • Because Squarespace doesn’t give us access to styling our forms via the Style Editor, we need to employ some custom CSS to achieve this kinda look:
By customizing the form fields in your contact form, you can easily and quickly differentiate your site from the standard Squarespace template.

Quote Blocks

  • Testimonials are one of the most important selling points that we can have on our websites. They give us instant street cred and help assuage any lingering hesitations that peeps might have about working with us.
  • The issue is that the Squarespace quote block isn’t super customizable, which is why I recommend adding in some of your own CSS to spice it up.
Here's an example of an easy customization to the Squarespace template "quote block", which I used for my client testimonials.
 

How to customize Squarespace CSS:

Ok, so now you know some places to customize the CSS of your Squarespace site, but you don’t know how to begin. Let me explain exactly how I do it.

Step 1: Open your website in Google’s Chrome browser (Firefox would be my second pick).

Step 2: Navigate to the page with the element you want to change. (For example, if I wanted to style my contact form, I’d navigate to my Contact page)

Step 3: Right click on any part of the form itself and select “Inspect” from the popup menu.

In this screenshot, you can see how to "inspect" an element on a page of your website.
 

Step 4: This will open up a window that shows you the page HTML and the CSS affecting each element.

This is a screenshot example of what you'll be able to access when you inspect a web page element on your Chrome browser.

Step 5: Find the CSS snippet for the element that you want to style and start playing around with different options. If I’ve totally lost you at this point, here’s a video walkthrough of these exact steps:

And, if you're completely coding illiterate, here’s an excellent resource for searching CSS properties (and here’s a simplified CSS reference). You might also check out this easy-to-follow free course on how to use CSS. And if you’re worried about writing it in the proper format, here’s a tool to check your work.

There’s an easier way to customize your Squarespace template:

If you’re totally overwhelmed by the above 5 steps, don’t worry. I’ve been there myself. But once you understand the fundamentals, customizing your Squarespace site becomes easy-breezy.

If you want a simpler solution, I got you! You can visit my Code Shop to grab ready-made custom CSS that is literally plug-and-play and will take your site from looking like an average Squarespace template to showcasing your brand personality.

And, if you’d rather not even think about the code (or you’d like to customize a page element that I don’t have in my code shop), you can hire me to do any one-off customization for your Squarespace site.

With  Designer on Demand you can ask me to:

  • Implement any of the Squarespace “plugins” that you see listed in my shop
  • Help you troubleshoot a single bug or performance issue on your site
  • Create custom code for a single page element on your site.

Customize your site the easy way: