The Best Places to find Custom CSS for Squarespace
Originally posed November 2020, updated April 2023
This post contains affiliate links for resources that I personally use and love for myself and clients.
It’s no secret that I love Squarespace! It’s a great platform to DIY a professional-looking website without knowing how to code. It’s easy to learn and use, plus it has well designed templates with bucketloads of style options.
But sometimes there are moments you want to change something that isn’t in the website styles. Or maybe you’re like me and you want to play around a little more to create a website that is completely your own.
That’s where custom CSS comes in!
CSS stands for “Cascading Style Sheet”. That's basically a fancy way of saying that the code controls how your website looks. You can change things like:
Adding rounded corners to elements
Creating fun effects with fonts
Spicing up your backgrounds with gradients
Adding fun hover effects
Changing up colours and so much more!
And once you start using CSS in Squarespace, it can be pretty addictive!
Today I'm sharing some of my favourite Squarespace code resources to help you get started. I get a heap of questions about coding in Squarespace when people join my Facebook group, so I figure it’s time to share!
Before I dive in, let’s just throw out a reminder… You don’t have to add any code in Squarespace to have a beautiful website, but the option for code is there if you want it!
Getting started with Squarespace? Sign up for a free trial here and use the code JHD10 for 10% off your first year (Yep, that's an affiliate link!)
Let’s get started with…
The best places to find custom CSS for Squarespace
My favourite code for Squarespace
It’s no secret that I love coding in Squarespace… I add custom coded elements to most websites I create! I even wrote a blog post with some of my favourite pieces of code that I use on pretty much every website I design.
If you want to:
Remove the underline below links in your website footer
Prevent words from hyphenating on mobile
Set a fixed width for your buttons
Remove the header, footer and announcement bar on landing pages
Or customise the heading size and colour on summary blocks
And if you’re wanting to turn your website into a sales machine, you can get your free website audit checklist here to see exactly what updates you should focus on.
Inside The Square
Becca from Inside the Square is amazing at teaching how to code in Squarespace. You can check out her free guide for getting started with code in Squarespace here. She also releases video tutorials each week with fun customisations you can try.
Becca is also the creator of Custom Code Academy, a course for coding in Squarespace. This course gives you a strong foundation for understanding what you can do with code and how to achieve the look you want specifically related to Squarespace. Writing your own code is a huge time saver since you don't need to Google things or troubleshoot as much!
Beatriz Caraballo
Beatriz is another Squarespace developer with a blog full of Squarespace code tutorials. Her posts show you what code to use, plus they walk you through how to understand what the code does. This makes it easier to troubleshoot or customise it further.
Beatriz is a pro at troubleshooting code as well. She has a blog post to help you troubleshoot your code if you get stuck with something. Or if you find you're doing a lot of coding on websites, her code membership is a fantastic community! As a member, Beatriz personally helps you troubleshoot your code (she's amazing!) and you get free access to her snippet directory and code shop.
I am passionate about making sure the websites I design look just as good on your phone as they do on your computer. This is a passion Beatriz shares, and she has a fantastic training bundle for coding for mobile to help with it.
Will has a heap of free Squarespace code tutorials on his website covering everything from changing buttons, forms, bullet points, blog pages and a whole lot more. His posts range from basic through to more advanced and he really dives into explaining the code.
If you enjoy Will’s style of teaching from the ground up, he also offers an affordable CSS course focused specifically on coding in Squarespace. He teaches you how to understand code yourself, so you’re not stuck relying on plugins or paying a developer, and can do more than just adjusting some code.
Will also offers the Curious Coder Membership, where he sends code methods, tips and tricks to your inbox multiple times a week based on themes like CSS animation and image captions. They’re always fun new ideas to try, and simple enough you can dive in quickly and easily.
Personally, I love Will’s Squarespace blogging plugins to make blogging even easier as a business owner. He has Section Loader Supreme that allows you to add the same section to multiple blog posts without recreating it over and over (such as promoting your lead magnet or a special offer) and Affiliate Link Genie that makes Google love your affiliate links rather than penalising you for them.
Chris Schwartz-Edmisten
Next up, we have Chris Schwartz-Edmisten! Chris has some super fun Squarespace video tutorials on his blog. If you want to float elements over 2 sections and make split layouts, his blog is the place to be!
Chris has a free 4 day CSS training for Squarespace. I found it super helpful when I was diving into coding in Squarespace. He also has a more advanced free training on Flexbox, a type of code that you can use to create unique layouts.
Chris has a fantastic shop with Squarespace plugins. In Squarespace, plugins are another name for code snippets you can add to your website. I can't wait to check out his mega menu plugin once I find a project to use it on!
If you know the basics of coding for Squarespace or you want to try advanced layouts, check out Chris's Custom Layouts course. This course was a game-changer for me and I use something I learned from it on every single website I design! You’ll learn how you can create split layouts, how to make side-by-side sections the same height, how to centre text vertically, and so much more!
Square Stylist
If you haven’t been to Square Stylist before, you’re missing out! Rache has created the most unique Squarespace website I’ve ever seen (check out the horizontal scroll when you visit)! She’s a master of code (well beyond just CSS for style updates!).
You can check out her blog here, where she shares tutorials like revealing images on hover. She also has a free Squarespace CSS Basics course here.
Rache offers some amazing mini courses with more in-depth customisations. If you want to create mega menus or vertical tabs, Rache is your girl! I love her horizontal galleries, and she has so many more creative ideas!
Ghost Plugins
Ghost Plugins is another great resource for free Squarespace plugins. They have over 300 free plugins to choose from!
If you want to add hover effects, customise summary blocks or personalise forms, Ghost makes it possible! These are just a few of the plugin ideas you can find there.
You can even sign up for access to extra secret plugins or purchase some of the “super plugins”. These are more in-depth paid plugins that allow you to customise things even further.
Ghost Plugins now also sells premium Squarespace templates that help you create a more customised look for your website compared to the standard templates, in a budget-friendly way compared to a full custom website design project.
Other Squarespace Plugins
Looking for something specific? Here are a handful of other Squarespace plugin stores you might want to check out!
SQSP Themes has fun plugins like a Squarespace blog sidebar, a plugin to turn anything into a lightbox, accordion tabs, related posts and products plugins, a countdown timer and more.
Elfsight has social media feed plugins, Google review plugins, Facebook feed plugins, YouTube gallery plugins, age verification plugins, pricing table plugins, all sorts of chat plugins and more.
Square Websites has plugins for advanced filtering, custom tables, advanced summary blocks, advanced maps, animate on scroll, social media tabs and more, along with a Google Chrome extension that can help you transfer Squarespace websites easily.
Squarepaste has plugins such as a summary filter, vertical timeline, portfolio filter, one to add a character limit to your forms and more, along with Squarespace templates.
Special Mention
I also want to share an honourable mention here because I LOVE the idea! My Wordpress mentor, Julia, has created a coding course specifically for kids. It helps them develop problem-solving skills while learning an in-demand skill.
If you have kids who love screen time way too much, this is a great way to get them doing something productive. As a bonus, you'll get a break from hearing “Muuuuummmmmm, I’m boooooooored!” for the millionth time!
You kids will learn how to create games and basic websites. They'll also learn skills like Canva design. There’s even an upgrade to learn business skills so they could make money from what they are learning!
Our kids tend to be more tech-savvy than we are anyway (my 5-year-old can navigate Netflix and YouTube like a pro!). This program will help to nurture that ability. And who knows, they may even get good enough to be your own personal tech support or designer!
It’s only $37 for the course, and based on what Julia has included in her WP Rockstar program, it’s going to be insanely good! I’ve already purchased it for Mister-Five over here, even though he’s still a few years off learning! 😂
A word of warning:
Dodgy code can break your website. Since it's an advanced modification, Squarespace Customer Care can't troubleshoot if it does. You are responsible for any code you add to your website, so you want to make sure you:
Only add code for things you can’t change in your website style settings
Test your website after adding each piece of code by looking over each page of your actual website
Delete any code that breaks your website or doesn’t change anything, so it doesn't slow your website down
If you’re not confident adding code to your website, it’s best to work with a designer to ensure everything works. That way you can have a unique website without wasting time learning code. Better still, you don't have to troubleshoot if things break! This is something I love to help with on Website Support calls and VIP Design Days.
