5 Squarespace CSS hacks

I know working with code can seem very daunting. But with these Squarespace CSS hacks you can make your website stand out from the crowd. No worries, I’ll tell you what to do in this post.

First Squarespace CSS hack

By changing the colors of the cookie banner you can make it totally on-brand.

The code you need for this is:

.sqs-cookie-banner-v2 {

 background: #139fae !important;

 border: 5px solid #23303d;

 border-radius: 10px;


.sqs-cookie-banner-v2 p, .sqs-cookie-banner-v2 a {

 color: #fff !important;


.sqs-cookie-banner-v2-accept {

 color: #fff !important;


@media only screen and (max-width: 640px) {

 .sqs-cookie-banner-v2 {

   bottom: 50px !important;



Everything with a # before it you can change. Want to know more go to my post about this.

Second Squarespace CSS hack

Squarespace has a lot of great fonts to choose from but maybe you have a font that you love but isn’t part of the Squarespace fonts. 

Use this code for that:


{ font-family: 'thename'; src: url(theURLgoeshere); }

and to let Squarespace know which header has to be the new font you have to use this code:

// Heading 1 //

h1 {font-family: 'thename';}

// Heading 2 //

h2 {font-family: 'thename';}

// Heading 3 //

h3 {font-family: 'thename';}

// Heading 4 //

h4 {font-family: 'thename';}

Do you want to know exactly what you have to do? Go to my post dedicated to Squarespace Custom Fonts.

Third Squarespace CSS hack

When you have a navigation and you want to change the color to designate an active page and make sure it’s not underlined use this navigation CSS for Squarespace:

/* change header nav active style */

.header-nav-item--active a {

  color: #23303d !important;

  background-image: none !important;


You can add your own color by adding the HEX code, so change #23303d to your own color.

Fourth Squarespace CSS hack

 Maybe you want to add round images to your page. You can do a lot of amazing things with Image Editor but creating a round image isn’t one of them.

But, with custom CSS code it’s not a problem at all. To create round images on your Squarespace website, just follow these steps:

First, make sure your image is cropped to square (1:1). 

Next, find the block ID of the image you’d like to adjust. (If you don’t have it already, this Squarespace Collection/Block Identifier Google Chrome extension https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde is super helpful for locating your block IDs!) 

Then, add this CSS snippet to Design - Custom CSS. Replace #block-id-goes-here with your specific block ID:

#block-id-goes-here img{



And voila, you can add a round image to, for instance, testimonials you have. Or you can use them as images for your services. These are just a couple of ideas.

Fifth Squarespace CSS hack

You can add a down arrow in a section of the page.

Go to Design- Custom CSS and past this code:

.down-arrow {

    border: solid #23303d;

    border-width: 0 1px 1px 0;

   display: block;

    padding: 20px;

    transform: rotate(45deg);

    -webkit-transform: rotate(45deg);

  margin: 0 auto;

  width: 0%;


.down-arrow-container {

    text-align: center;


You can change the color by replacing #23303d with your own color.

Now you have to add the arrow to your page. Go to the page and add a code block. In that block you paste:

<div class=”down-arrow-container”><div class="down-arrow"></div></div>

These are just a couple of Squarespace CSS tricks. 

Squarespace CSS hacks cheat sheet

  • 5 August, 2021

Marit Verlaat

Empowering introverted female entrepreneurs to change the world by creating their own Squarespace website.