Squarespace Customization

The Squarespace platform allows the web developer a lot of flexibility in creating unique designs. But, naturally, there are limits and some developers will want to go beyond them to create websites that are even more unique. Although not covered by Squarespace’s support team, CSS and JavaScript can be used by more advanced web developers.

CSS is the easiest way to make Squarespace sites look the way you want them to. From the Home page in the Squarespace site editor, go to Design: Custom CSS and you’ll find a text editing field into which you can enter CSS code. The trick here is to understand what code to enter.

The Squarespace Forum for customizing with code is a great place to get help in finding that code. A number of very experienced Squarespace developers are quick to help out newer members. If you know a little about CSS, it’s all about knowing what CSS Selectors to target.

For the more advanced user/developer, the inspect tool in your web browser will allow you to see the website’s code and find the elements and their selectors you want to style. From there it’s knowing enough about CSS to write the code needed.

Another option is to use pre-made CSS. A source for that is Ghost Plugins; they offer a library of free and paid-for widgets. Even if you don’t use their plugins outright, those plugins offer a great starting point and can get you onto the right selectors for the job.

The most advanced customization option is JavaScript code injection. It’s something available only to Squarespace users with Business plans and above. To access the feature, go to Settings: Developer Tools: Code Injection. If JavaScript is a bit over your head, there are sources for that, too. One is Beyondspace with a small, but growing, selection of plugins. This site uses their Lightbox Studio plugin to expand the available features of the stock Squarespace image lightbox.